fix(cmux-next settings): the gallery draws Settings with the app's cascade

Merged
TE
15d ago
+31-5

Layout pass, Settings surface: the gallery now draws Settings with the app's cascade.

Running list (layout pass, 2026-10-20 GUI push): fixed #22785 (Settings: Undo bar, title edge, density names), #22825 (Markdown toolbar width), #22839 (Chief inspector latency bars in the theme accent), #22847 (harness rows without a mark), and this PR. The full list is in HQ knowledge/layout-pass.md.

What

Earlier the layout pass logged "the Settings switch off and on states differ in size and border". The app was fine; the gallery was wrong. main.tsx imports styles.css, layout.css and refined.css in that order, but the theme-tokens gallery entry imported styles.css and layout.css on their own. The gallery bundle split the shared sheets into separate chunks and loaded them out of order: refined.css, then layout.css, then styles.css. The two base sheets share 33 selectors (:root tokens, .row, .group-title, .sidebar, .switch, ...), so every gallery shot of Settings showed the older look: a 32×18 outlined switch, upper-case group titles and a wider sidebar. Layout passes judged from those shots were judging a page nobody ships.

page.css @imports the three sheets in cascade order, and both importers use it, so no bundle can reorder them. tailwind.css stays separate: its rules are in cascade layers, which lose to unlayered rules whatever the load order. The app's cascade doesn't change.

Before / after (gallery pages.settings, general, 1000px)

Before (gallery)After (gallery, matches the app)
before darkafter dark
before lightafter light

Test

bun test src/pages/settings/layout.test.ts, new case "only page.css imports the page's sheets": fails on base (the theme-tokens gallery and main.tsx import the sheets directly) and passes on head. All 8 tests in layout.test.ts and render.test.tsx pass.

Changelog

none (the gallery only; the app already loads the sheets in order)

Observed / Not run

  • Ran: gallery build on base and head on Linux. On head the stylesheet list for the settings frame ends with page.css and the switches measure 28×16 (base: 32×18 with a transparent track). Captured 30 Settings cases (general, accounts variants, theme tokens) in light and dark, base and head. prepush-gate.py and vp fmt --check on the changed files pass.
  • Not run: the full bun run check (the sparse worktree symlinks node_modules, so it lints that), and no macOS build. The app's own page bundle keeps the same order by construction (one entry, same import order), but I didn't inspect a built app bundle.

Agent session: huge-blue

🤖 Generated with Claude Code