fix(web): replace double-outline focus style with thicker border

[FSM1]

Summary

• Replace the double-outline focus indicator (border + offset outline) on dialog inputs, buttons, and modal close button with a single 2px border on focus
• Update Pencil design to match: input focus border thickness 1px → 2px

Test plan

• Open any dialog (New Folder, Rename, etc.) and verify the focused input shows a single thick green border + glow, not a double ring
• Tab through dialog elements (close button, input, cancel, create) — all should show single 2px green border on focus
• Verify no layout shift when focus changes (padding compensation applied)

🤖 Generated with Claude Code

Summary by CodeRabbit

• Bug Fixes
  • Improved focus indicators across dialogs, buttons, and modal controls by replacing double-outline rings with a single 2px border for clearer keyboard focus and accessibility.
• Design
  • Increased border/stroke thickness across several UI elements for stronger visual weight and consistency.
• Documentation
  • Updated project state and task planning notes to reflect completion of the related quick task.

[coderabbitai]

Walkthrough

Quick task 012 completion (replacing double-outline focus styles with 2px single borders) is documented in planning files. Corresponding CSS changes applied to dialog inputs, buttons, and modal close controls. Design file stroke thickness updated to match the focus styling modifications.

Changes

Cohort / File(s)	Summary
Planning & Documentation .planning/STATE.md, .planning/quick/012-input-focus-outline-style/012-PLAN.md, .planning/quick/012-input-focus-outline-style/012-SUMMARY.md	Updated project state to reflect completion of quick task 012. Added planning and summary docs for replacing double-outline focus with a single 2px border on dialog elements; updated timestamps and task entries.
CSS Focus Style Updates apps/web/src/styles/dialogs.css, apps/web/src/styles/modal.css	Replaced outline-based focus indicators with border-based focus: dialog inputs and buttons now use 2px border on focus (with padding adjustments), dialog-button base uses 1px transparent border to preserve sizing, and modal close uses a 2px green border + glow instead of an outline. Transitions updated to include border properties.
Design File designs/cipher-box-design.pen	Increased stroke thickness from 1 to 2 on various UI elements (modal borders, headers, buttons, fills) to match updated focus/border styling.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Fix - Empty state ascii art #55: Edits the same designs/cipher-box-design.pen file — likely related design stroke/thickness adjustments.
• Phase 6.3 - UI restructure #53: Modifies apps/web/src/styles/dialogs.css and related modal styles — likely overlaps in dialog/modal focus styling changes.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: replacing double-outline focus styles with a thicker border approach across dialog and modal components.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/input-focus-outline

---

No actionable comments were generated in the recent review. 🎉

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@apps/web/src/styles/modal.css`:
- Around line 96-100: Update the `.modal-close:focus` rule to use
`.modal-close:focus-visible`, add padding compensation to offset the
border-width increase (match the pattern in `dialogs.css` e.g. reduce padding by
1px via calc(...) so the element doesn't shift), include the green glow by
adding `box-shadow: var(--glow-green)` and ensure `border-color` and
`border-width` are included in the element's `transition` so the border change
animates; if `box-sizing` is not already `border-box` on `.modal-close`, set it
or adjust padding compensation accordingly.

🧹 Nitpick comments (2)

apps/web/src/styles/dialogs.css (2)

71-77: Input focus uses :focus — consider :focus-visible for consistency.

.dialog-input:focus works fine functionally. However, .dialog-button uses :focus-visible (line 143), and .modal-close also targets focus. Using :focus-visible consistently across all three elements would be more predictable — :focus fires on mouse clicks too, which may show the thick green border unexpectedly when clicking the input. This is a minor consistency point; inputs often do use :focus intentionally since they remain focused during typing.

---

83-85: Pre-existing: legacy rgba() notation.

Lines 85 and 190 use legacy comma-separated rgba(239, 68, 68, 0.4) syntax. Per coding guidelines, modern space-separated notation is preferred: rgb(239 68 68 / 40%). These aren't changed in this PR, so flagging as a follow-up.

As per coding guidelines: "Always use modern space-separated color function notation instead of legacy comma-separated syntax."