Flash highlight ring draws outside the card and clips in the hunk scroll wrapper

What's requested

The flashed-card highlight (the emerald ring drawn when a Comments-index pill jumps to an inline thread/staged card) uses outside-drawn outline geometry inside a clipping scroll container. Move the ring geometry inside the card's own box so it never clips, never widens the scroll extent, and follows the card's rounded corners.

Evidence

web/src/pages/Pull.jsx:693 (StagedCard) and Pull.jsx:754 (ThreadCard): ${flashed ? " outline outline-2 outline-emerald-500" : ""} — a plain outline-2 draws 2px OUTSIDE the border box.
web/src/pages/Pull.jsx:524: every hunk renders inside <div class="mb-3 overflow-x-auto">. An element box that reaches the wrapper's edge clips the outside-drawn ring on that edge, and because overflow-x: auto implies overflow-y: auto, the outside ring can also contribute to/clip against the wrapper's scroll extent. Long code lines (the common case that makes the wrapper scroll) put the card's right edge at the wrapper edge — exactly where the ring paints.

Fix shape

Inset ring geometry on the flashed state: outline-offset: -2px (or an inset box-shadow ring composed in ui.css per F2), so the ring paints inside the card's border box and hugs the rounded corners.
Note the existing outside-draw precedent is the a11y focus ring (web/src/ui.css:18-21) — that one is fine where it is; this ticket is only about the flash ring on cards living inside overflow-x-auto.

Architecture notes

Pure CSS/class change on the two flashed-card class strings; no layout, wire, or hash surface touched.
Verify against the sibling surfaces: the same flash classes are shared by ThreadCard and StagedCard, and the draft composer card (Pull.jsx:583) shares the same slot — keep the geometry treatment consistent across the slot.

Acceptance criteria

With a horizontally scrolled hunk (long line), the flash ring is fully visible — no clipped right edge, no new scroll extent from the ring.
Ring follows the card's rounded corners in both themes.
ThreadCard, StagedCard, and any future card in the same slot all use one shared geometry treatment.
The a11y :focus-visible outline is unchanged.

# Flash highlight ring draws outside the card and clips in the hunk scroll wrapper ## What's requested The flashed-card highlight (the emerald ring drawn when a Comments-index pill jumps to an inline thread/staged card) uses outside-drawn outline geometry inside a clipping scroll container. Move the ring geometry inside the card's own box so it never clips, never widens the scroll extent, and follows the card's rounded corners. ## Evidence - `web/src/pages/Pull.jsx:693` (StagedCard) and `Pull.jsx:754` (ThreadCard): `${flashed ? " outline outline-2 outline-emerald-500" : ""}` — a plain `outline-2` draws 2px OUTSIDE the border box. - `web/src/pages/Pull.jsx:524`: every hunk renders inside `<div class="mb-3 overflow-x-auto">`. An element box that reaches the wrapper's edge clips the outside-drawn ring on that edge, and because `overflow-x: auto` implies `overflow-y: auto`, the outside ring can also contribute to/clip against the wrapper's scroll extent. Long code lines (the common case that makes the wrapper scroll) put the card's right edge at the wrapper edge — exactly where the ring paints. ## Fix shape - Inset ring geometry on the flashed state: `outline-offset: -2px` (or an inset `box-shadow` ring composed in ui.css per F2), so the ring paints inside the card's border box and hugs the `rounded` corners. - Note the existing outside-draw precedent is the a11y focus ring (`web/src/ui.css:18-21`) — that one is fine where it is; this ticket is only about the flash ring on cards living inside `overflow-x-auto`. ## Architecture notes - Pure CSS/class change on the two flashed-card class strings; no layout, wire, or hash surface touched. - Verify against the sibling surfaces: the same flash classes are shared by ThreadCard and StagedCard, and the draft composer card (Pull.jsx:583) shares the same slot — keep the geometry treatment consistent across the slot. ## Acceptance criteria - [ ] With a horizontally scrolled hunk (long line), the flash ring is fully visible — no clipped right edge, no new scroll extent from the ring. - [ ] Ring follows the card's rounded corners in both themes. - [ ] ThreadCard, StagedCard, and any future card in the same slot all use one shared geometry treatment. - [ ] The a11y `:focus-visible` outline is unchanged.

crueber added the

bug

pull requests

labels

2026-09-15 14:03:08 +00:00

crueber added this to the v1 milestone

2026-09-15 14:03:08 +00:00

crueber added the

issues

label

2026-09-15 14:03:49 +00:00

crueber referenced this issue from a commit

2026-09-15 14:52:04 +00:00

FIXED (Forgejo #574) — flashed-card ring insets so the hunk scroll wrapper never clips it

crueber referenced this issue from a pull request that will close it,

2026-09-15 14:52:05 +00:00

Fix #574: inset the flashed-card ring so the hunk scroll wrapper never clips it #578

crueber referenced this issue

2026-09-15 14:57:25 +00:00

Fix #574: inset the flashed-card ring so the hunk scroll wrapper never clips it #578

crueber referenced this issue from a commit

2026-09-15 14:57:45 +00:00

Merge pull request 'Fix #574: inset the flashed-card ring so the hunk scroll wrapper never clips it' (#578) from fix/issue-574 into main

crueber closed this issue

2026-09-15 14:57:45 +00:00

crueber commented

2026-09-15 14:57:46 +00:00

Author

Owner

Fixed by #578 (merged): flash ring takes inset geometry (outline-offset -2px, Tailwind-only) on both ThreadCard and StagedCard — byte-identical fragment, paints inside the border box, no clip or scroll-extent change in the hunk wrapper; focus-visible untouched. Verified: 1417 unit tests green (smoke excluded, pre-existing), vite/esbuild green, independent review APPROVE incl. headless-Chromium rendered check (ring visible scrolled-right, scrollWidth unchanged).

crueber referenced this issue

2026-09-15 15:02:30 +00:00

Fix #575: clicking inside a thread/staged card flashes it like a pill jump #579

crueber referenced this issue

2026-09-15 15:04:15 +00:00

Fix #575: clicking inside a thread/staged card flashes it like a pill jump #579