fix(web): 130+ UI consistency fixes

[0x00-sys]

Problem

The web app has accumulated small UI drift: raw interactive elements missing the cursor-pointer the primitives opt into (Tailwind v4 preflight leaves buttons at cursor: default), controls with outline-none and no focus ring, seven different disabled opacities (30/40/45/50/55/60/80) against the primitives' opacity-64, popups that animate in but not out (or not at all), single-line text clipping descenders, and sibling components hand-rolling what a shared primitive already provides.

None of these are features — every change aligns an element with what its own siblings or the ui/ primitives already do. When one instance of a defect was found, the identical pattern was grepped for across the tree, so each category below is exhaustive rather than anecdotal. ~130 fixes, 87 files, +249/−283.

Fixes

1. Switch thumb flush against the track edge; unchecked state invisible in dark

The thumb had a 1px inset (p-px on a track sized thumb+2px). The track now grows 2px each way with p-0.5, giving an even 2px inset in both states — the checked translate distance is unchanged (--thumb-size − 4px before and after). Separately, the dark unchecked track was --input = white/8% under a bg-background thumb — structurally invisible. It now gets dark:data-unchecked:bg-foreground/16 plus the hairline inset-ring-white/6 edge treatment dark surfaces use elsewhere. Checked state untouched. Applied to ui/switch.tsx and the inline switch in ui/menu.tsx.

Before	After

2. Descender clipping (the letter g cut off)

leading-none combined with truncate/line-clamp gives a 1em line box with overflow: hidden, so g/y/p/q tails clip at the box edge. Three real instances: the sidebar thread tooltip title (Sidebar.tsx), InputGroupText, and a copy-pasted leading-8.5 on the small NumberField (a 34px line box inside a 26px input).

Before	After

3. ~60 clickable elements missing cursor-pointer

Raw <button>s and clickable labels across the sidebar, terminal drawer, pull-requests page, changed-files tree, settings, diff panel, and preview cards rendered the arrow cursor. Also fixed at the source: AutocompleteItem shipped cursor-default, which three consumers (command palette, composer command/stash menus) had each patched around locally; the base is now correct. Conditionally-clickable elements set both branches (isClickable ? "cursor-pointer" : "cursor-default").

Each clip shows nightly first, then the fixed build after the window switch:

Add-Action icon presets	Sidebar PR badge

Terminal drawer buttons	PR page rows + condensed filters

4. Menus and selects don't animate; popovers animate in but not out

ui/popover.tsx had data-starting-style with no data-ending-style, so popovers faded in and popped out. ui/menu.tsx and ui/select.tsx popups carried origin-(--transform-origin) but no transition at all. The combobox and autocomplete popups declared transition-[scale,opacity] with nothing driving it. All five now share the tooltip's bidirectional scale/fade. Frame-level proof: at 120Hz, nightly's menu open/close changes exactly 1 frame; fixed shows a multi-frame ramp both directions.

Before	After

5. Snoozed shelf expand judders the list; Settled doesn't

The thread list FLIP-animates every moved row (auto-animate). Settled sits at the list tail, so expanding it moves nothing and looks smooth; Snoozed sits mid-list, so expanding it slides every settled row below while translucent rows cross each other. Shelf toggles now suspend the list animation for that one update (toggleShelfWithoutListAnimation in Sidebar.tsx), making both shelves behave identically. Single-row transitions — settle, wake, pin reorder — keep the animation they were designed for.

Before	After

6. Autocomplete popup was the only opaque popup

Every popup surface uses dropdown-glass except the autocomplete popup (composer @-mentions, file pickers), which hand-rolled border bg-popover shadow-lg/5 — and therefore also ignored the Settings → Appearance glass controls.

Before	After

7. Theme color picker cancelled its own glass

The picker painted bg-popover on a child filling its glass popover, stacked border-border/70 + shadow-2xl on top of the glass border/elevation (utilities beat the @layer components shadow silently), and its dark hex field used a black wash on a dark surface — the only dark overlay in settings that darkens instead of lightens (cf. AddProviderInstanceDialog's dark:bg-white/* pattern).

Before	After

8. Two select triggers, two chevrons

ui/select.tsx contains two trigger components. One rendered the picker-standard ⇕ (matching comboboxes, the diff-panel branch picker, the PR base selector); the other a half-size 50%-opacity ˅. Value pickers now consistently use ⇕; menus and compact ghost selects keep ˅ — the pop-up vs pull-down distinction the app already follows.

Before	After

9. Invisible keyboard focus on ~15 controls

outline-none/outline-hidden with no replacement ring: diff-file collapse chevrons, changed-files tree rows (three of five also missing the ring offset their two siblings have), markdown <details> triggers, toast copy/expand buttons, combobox/autocomplete trigger and clear buttons, the ⌘K submenu Back button, the scroll-to-end pill, onboarding step cards. All now use the standard ring (focus-visible:ring-2 focus-visible:ring-ring + offset), or the inset variant where full-bleed rows would clip an offset ring.

The tooltip proves focus is on the collapse button in both shots; only one shows it:

Before	After

10. Project settings "Actions" section invented a third heading scale

text-base font-semibold where every settings row title is text-sm font-medium tracking-[-0.005em], a brighter description than the canonical recipe, and py-2 rows against the ITEM_ROW_CLASSNAME standard of py-3.

Before	After

11. Preview controller badge didn't match the zoom pill

Same overlay layer, same geometry, different everything else: text-[11px] on bg-background/90 + shadow-sm vs the zoom pill's text-xs on bg-popover/95 + shadow-md/10. Now identical.

Before	After

12. Timeline disclosure rows misaligned

The turn-plan row lacked the size-5 chevron centering box its sibling work-group rows use (and used gap-2 vs their gap-1.5), so stacked rows' labels started at different x-offsets; one chevron was also size-3 vs size-3.5.

Unannotated pair

Before	After

13. Disabled states dimmed to seven different values

opacity-30/40/45/50/55/60/80 normalized to the primitives' opacity-64 across ~20 sites, including the shared sidebarMenuButtonVariants (disabled: and aria-disabled:). Two disabled rows (search results in flight, saved-backend cards while applying) had no dimming at all and gained it.

Before	After

14. Added during review

Two fixes landed after the PR opened, in the same spirit:

Autocomplete and combobox popups now animate their exit (Cursor Bugbot finding, confirmed real). Both put the scale/fade transition on a wrapper span reacting to a child's data-ending-style, but Base UI waits only on the Popup node's own animations before unmounting, so exits popped instantly. The transition now lives on the Popup itself, matching menu, select, popover, and tooltip.

The changed-files header buttons were different sizes. The collapse-all button carried a !size-[22px] override forcing it 2px smaller than the Open-diff button beside it. Removed the override so both render the standard control size; the two tests pinning the old markup now pin its absence.

Before	After

15. Changed-files collapse-all button desynced from manually opened folders

The collapse/expand-all button on the changed-files card toggled a boolean owned by the timeline row, while each folder's open state lived privately inside the tree. Folders opened by hand desynced the pair: the button's icon pointed the wrong way and its first click re-applied the state the tree was already in — a visible no-op. The folder state now lives next to the button, which derives its icon, tooltip, and action from the actual per-folder state (collapse-all exactly when every folder is really open). Manual folder toggles also survive collapsing and reopening the card now.

Before	After

Cursor Bugbot then caught an edge in the new derivation: with only root-level files there are no folders, every() is vacuously true, and the button pinned itself to "Collapse all folders" with nothing to do. Confirmed against a root-only fixture; since the control is meaningless without folders, it is now omitted entirely in that case:

16. Fixes without a useful screenshot

Fix	Detail
Dead electron-drag-region class	PreviewPanelShell referenced a class that no stylesheet defines — the preview panel's window-drag strip has been inert since it shipped (the bundle defines only .drag-region). Renamed to the real class.
Sheet backdrop ≠ dialog backdrop	Sheets used bg-background/60 backdrop-blur-xs (2px); dialogs use .dialog-backdrop (4px + tuned tint). Sheets now use the shared class.
dropdown-glass lacked saturate()	The only glass surface without saturate(var(--glass-saturation)); content behind menus read grayer than behind dialogs.
prefers-reduced-motion	Only 2 of ~20 looping animations respected it. The reduce block now also covers status/ghost pulses, status ping, the ultrathink loop, and the update-pill countdown.
Ghost-pulse period	2.4s vs status-pulse's 2s; simultaneous pulses on the PR page visibly drifted against each other. Synced to 2s.
Dead CSS	Four zero-consumer blocks removed (.ultrathink-pill, .ultrathink-word, .turn-chip-strip, .diff-render-file) plus a duplicate dark model-picker-surface rule that overrode nothing; the split .dialog-glass declaration merged; two near-identical markdown scrollbar styles unified on the --app-scrollbar-width token.
Geometry tokens	Hardcoded paddings duplicating --sidebar-*-inset, --floating-content-inset, --command-content-inset, and --fade-size now route through the vars (zero visual delta — these tokens exist, per the comment above them, so these surfaces "cannot quietly drift apart"). sidebarMenuButtonVariants lg/sm had the radius and inset values transposed relative to default.
Hover/transition long tail	Bare transition where only colors change, color hovers with no transition, hover-reveals without a keyboard reveal (focus-visible:opacity-100), one-off hover tokens (hover:bg-accent/50 amid /20 siblings), a dead transition-colors with no hover state, hover:cursor-pointer instead of cursor-pointer.

Notes

• Two changes are opinion rather than drift-repair, and are isolated so they can be debated (or reverted) without touching the rest: the switch geometry (2px thumb inset, visible unchecked track in dark mode) and toggling the sidebar shelves without the list animation.
• Tooltips and toasts keep their heavier glass shadow. It reads as an intentional elevation variant, so it was left alone.
• One test was updated: the standalone stop button now matches the send button it swaps places with, which removes a 4px layout jump on narrow viewports. The test's intent (the pending variant stays smaller) is preserved.
• The branch is rebased continuously as main moves. Where newer commits rewrote code this PR had fixed, the same fixes were re-applied to the new code: both the update pill's new footer button and the right panel's new empty-state cards shipped carrying the old off-convention disabled opacities (60 and 40), normalized to the primitives' 64 here. Fixes that the reworks made obsolete were dropped.

Validation

• vp run --filter @t3tools/web typecheck
• vp test run --project unit (apps/web) — 2199 tests passed
• vp lint --report-unused-disable-directives
• vp fmt --check
• vp run --filter @t3tools/web build
• Manually verified against the previous build side by side (all screenshots/videos above are from those sessions); popup animation additionally verified by per-frame analysis.

Model: Claude Fable 5 · Harness: Claude Code in T3 Code

Note

Fix 130+ UI consistency issues across cursor, opacity, animation, and focus styles

• Adds cursor-pointer to dozens of interactive elements (buttons, rows, links) that previously showed the default cursor, and adds cursor-default/pointer-events-none to disabled controls.
• Standardizes disabled-state opacity to opacity-64 across buttons, labels, and settings rows (previously mixed between opacity-40, opacity-45, opacity-50, and opacity-60).
• Adds focus-visible ring styles to keyboard-navigable elements including sidebar thread timestamps, image preview buttons, composer buttons, and the stash delete control.
• Moves ChangedFilesCard directory expansion state internal, replacing the allDirectoriesExpanded/onToggleAllDirectories props with defaultAllDirectoriesExpanded and per-directory override tracking; hides the collapse-all control when no directory nodes exist.
• Adds prefers-reduced-motion support in index.css to disable ghost-pulse, status-pulse, status-ping, ultrathink, and chroma animations; also shortens the ghost-pulse period from 2.4s to 2s.
• Unifies popup and backdrop styling via shared constants (DROPDOWN_LIST_POPUP_CLASS, DIALOG_BACKDROP_CLASS, SWITCH_TRACK_CLASS) and replaces arbitrary Tailwind values with CSS variable-driven utilities across sidebar, scroll area, and minimap components.
• Risk: ChangedFilesCard prop rename (allDirectoriesExpanded → defaultAllDirectoriesExpanded, removal of onToggleAllDirectories) is a breaking interface change for any callers outside the updated files.

^{Macroscope summarized f631c20.}

---

Note

Low Risk
Mostly CSS and presentational state; the largest behavioral tweaks are changed-files folder state and sidebar shelf animation suspension, both localized and covered by updated unit tests.

Overview
Broad UI consistency pass across the web app: interactive elements get cursor-pointer (and disabled cursor-not-allowed / opacity-64), focus-visible rings where outlines were stripped, and bidirectional open/close animations on menus, selects, popovers, and list popups via shared DROPDOWN_LIST_POPUP_CLASS on combobox/autocomplete.

Changed-files card lifts folder expand/collapse into ChangedFilesCard so collapse-all matches real folder state, hides the control when there are no directories, and drops the !size-[22px] header override so both actions match.

Sidebar snoozed/settled shelf toggles temporarily disable auto-animate on the thread list to avoid mid-list FLIP jank; shelf headers gain hover/focus styling aligned with other sidebar rows.

Primitives and settings pick up smaller alignments: checkbox/radio cursors, menu switch track via SWITCH_TRACK_CLASS, menu group labels in composer trait menus, geometry tokens (--control-radius, sidebar insets), and assorted typography/transition tweaks (e.g. descender clipping, preview badge vs zoom pill).

^{Reviewed by Cursor Bugbot for commit f631c20. Bugbot is set up for automated code reviews on this repo. Configure here.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: a4af8e7d-cdc7-4ebf-9c59-78c30b597389

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger 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.}

[macroscopeapp]

Approvability

Verdict: Approved f631c20

This PR contains 130+ mechanical CSS class modifications for UI consistency: adding cursor-pointer to interactive elements, focus-visible ring styles for accessibility, standardizing opacity values, and using CSS variables for consistent spacing. All changes are pure styling with no runtime behavior impact.

^{You can customize Macroscope's approvability policy. Learn more.}

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

Dismissing prior approval to re-evaluate e21bd74

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

Dismissing prior approval to re-evaluate c4ef3ee

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

Dismissing prior approval to re-evaluate 602815c

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

Dismissing prior approval to re-evaluate 66f4e28

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

Dismissing prior approval to re-evaluate f9cf6c4

[macroscopeapp]

UI consistency review: 3 findings, all in shared primitives or their call sites. The rest of the pass (cursor/focus-ring standardization, opacity-64 alignment, --control-radius / --sidebar-row-content-inset adoption, switch track/thumb geometry, electron-drag-region → drag-region, ChangedFilesCard state lift and !size-[22px] removal) checks out: the switch travel math still resolves to --thumb-size - 4px, icon-xs and xs buttons are both size-7 sm:size-6 so the collapse-all control still lines up with "Open diff", and --control-radius (0.5rem) equals rounded-md so the sidebar radius token swap is a no-op visually.

^{Posted via Macroscope — UI Consistency}

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

Dismissing prior approval to re-evaluate 518548d

[macroscopeapp]

Reviewed the changed web UI against the shared primitives and Tailwind/CSS ownership rules. The three findings from the previous run (selectTriggerIconClassName sizing, the missing autocomplete popup shadow, and the hand-copied MenuGroupLabel classes in TraitsPicker) are all addressed.

Two new items below. Everything else checked out: the --control-radius / --sidebar-row-content-inset swaps are value-preserving, the Switch and MenuCheckboxItem track resize keeps thumb size and travel identical, the ChangedFilesCard state hoist keeps the ChangedFilesTree contract intact (only consumers are the card and its tests), and the unlayered prefers-reduced-motion block correctly overrides the animate-* utilities.

^{Posted via Macroscope — UI Consistency}

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

Dismissing prior approval to re-evaluate 251a1dc

[macroscopeapp]

Reviewed the changed web UI files for shared-primitive and Tailwind-ownership consistency. The earlier findings (autocomplete popup elevation, select trigger icon sizing, TraitsPicker group label, image-dialog close button, mini-player focus ring) are resolved in this head. Two small consistency items remain, both inline.

^{Posted via Macroscope — UI Consistency}

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

Dismissing prior approval to re-evaluate 4a6ca15

[macroscopeapp]

UI consistency review: two findings, both about shared-token/primitive ownership. Everything else in the pass (focus-ring standardization, opacity-64 disabled token, cursor-pointer on interactive elements, popup/glass elevation, --control-radius / --sidebar-row-content-inset adoption, select trigger icon deferral, changed-files expansion state) checks out, and the earlier review points are resolved.

^{Posted via Macroscope — UI Consistency}

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

Dismissing prior approval to re-evaluate fdbce62

[macroscopeapp]

UI consistency review of the web surface changes. Most of the pass is a clean convergence (shared DIALOG_BACKDROP_CLASS, extracted SWITCH_TRACK_CLASS, primitive-owned icon sizing in Button, --control-radius / --sidebar-row-content-inset sidebar rows, MenuGroupLabel instead of hand-rolled labels). Three ownership issues introduced by this diff are worth tightening before merge.

^{Posted via Macroscope — UI Consistency}

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.