[mahanti]

Sidebar avatar rows could paint 30px of selection behind a 28px button, leaving the avatar visibly high. Make the select button block-level flex to remove that baseline gap, and give Team working badges the same trailing inset as Solo.

Align pane-header controls with the painted band between the outer rim and separator using a 1px optical adjustment. Preserve the existing tab-strip height and scrollbar inset so overflowing WebKit tabs stay aligned with header actions.

Validation:

• Native desktop geometry: painted sidebar row/button now both 28px; header stays 40px with controls shifted up 1 CSS pixel. Visually accepted by Arjun.
• Independent agent review completed; the WebKit overflow issue it found was fixed and rechecked.
• Two new browser journeys (four Chromium/WebKit cases) cover status-bearing avatar centering against the painted row, Team/Solo activity spacing, closable profile headers, and fitting/overflowing tabs. Real layout is required; jsdom cannot detect baseline or scrollbar geometry. No browser cases removed.
• pnpm design:test --maxWorkers=1: 26 files / 163 tests passed. Higher-concurrency attempts hit the existing 5-second CSS-compilation test deadline under host load; no deadlines or assertions were changed.
• pnpm design:build (including design TypeScript), pnpm design:check, and mandatory commit/push hooks passed. The first push hit the existing 30-second runtime integration-test deadline under host load; the unchanged commit passed on a serial-worker rerun. No hooks, timeouts, or assertions were modified.

Failure evidence: native selected-row height changed from 30px to 28px, matching the unchanged 28px button. The intermediate WebKit header implementation shifted tab inset from 3px to 1px on overflow; the final implementation preserves 3px in both states.

Broad browser/native suites are deferred to CI. Fixture screenshots are saved locally; GitHub attachment upload is unavailable in this tool session.

buzz-review-completed

[kalvinnchau]

🤖 Two findings on header geometry; the focus-ring regression should be addressed before merge.

[kalvinnchau]

🤖 [P2] Preserve keyboard focus-ring clearance

Keyboard-focus a 32px header action in the 40px conversation header, such as Channel members, Toggle shared sessions, or Channel actions. The 2px outline plus 2px offset previously fit exactly inside the clipping container; translating the control up 1px clips the top pixel of its focus ring. Chromium and WebKit measurements showed ring clearance changing from 0px with the translation disabled to −1px here. Remove the translation or adjust header/ring geometry to preserve the full outline, and add a ring-clearance regression check alongside the geometry assertion.

[mahanti]

🤖 We’ll fix the keyboard focus-ring clearance in a separate PR, including regression coverage. Keeping this PR focused on the sidebar and header alignment fixes.

[kalvinnchau]

🤖 [P3] Scope the optical offset to headers with matching framing

This rule also moves headers that lack the rim/separator combination described here. .mediaReviewThreadHeading removes the separator and has no rim (src/features/messages/Messages.module.css:1209,1236), while .mediaViewer has no border (:1123). Source tracing indicates that the adjustment puts their controls respectively 1px and 0.5px too high; these media-header offsets were not runtime-measured. If retaining the adjustment, scope it to contexts with the assumed framing instead of every PanelHeader child.

[mahanti]

🤖 Thanks for flagging the framing differences. We’ll revisit the header framing scope alongside the focus-ring fix in a separate PR, keeping this PR focused on the alignment fixes.