cmux NEXT App Store: Discover lines up with the toolbar; the Cloud banner fits the split list

Merged
TE
15d ago
+121-5

Layout pass, running list (this lane): merged #22897 diff toolbar, #22954 Stats, #22959 path picker. Open: #22966 History, this PR (App Store). Full list in HQ knowledge/layout-pass.md.

In progress until review passes.

The App Store's Discover list was a centered 1200px column under a full-width toolbar:

  • At 1214px the chips and cards sat 7px in from the tabs and search field, close enough to read as a mistake. At 1664px they sat 250px in.
  • The featured Cloud banner touched the toolbar's rule: 0px above it, 14px below.
  • In the split view (list beside a selected app), the banner squeezed its text into a 72px column, 255px tall. The "Fun" chip wrapped onto a line by itself.

Now:

  • The list spans the toolbar's edges at every width: chips and grid start under the tabs and end under the search field.
  • The banner gets the chips' 12px above it.
  • A container query on the list (its own width, not the window's) handles the 340px split column. The banner puts Explore Cloud under the text and drops the cloud art, and the chips scroll sideways on one row with a fade at the right edge. The list is 110px shorter.
BeforeAfter
Grid, 1214, dark
Grid, 1664, light
Split, 1214, dark

Stills are the page's ?mock dev entry in Chromium (Playwright).

#21997 (open, no live owner) restores the older Discover home and raises the same cap to 1240px; it will conflict on that one line. Whoever picks it up should keep the full-width list.

Test

CMUX_BROWSER_TESTS=1 bun test test/apps-page-edges.test.ts, real Chromium on the page's mock entry:

  • Base (502eaf73205, test only): 3 fail. Grid left 25 vs tabs 18 at 1214; 250 vs 18 at 1664; the split banner's button is beside its text, not under it.
  • Head: 3 pass.

Observed / Not run

  • Ran: the test above red then green; oxfmt, oxlint and tsc on the changed files; check:layers, type-scale, status-glyphs, system-blue, text-focus, dialog-keys, switch-fetches, browser-lanes; prepush-gate.py.
  • Not run: the full bun run check (fleet-only on this host), and the gallery advisory capture. No Swift change.

Changelog

Fixed: The App Store's Discover list lines up with its toolbar at every window width, and the featured Cloud banner fits the narrow list beside an open app.

Agent session: huge-blue

🤖 Generated with Claude Code