[AllTerrainDeveloper]

Reported from the Theme tab: the picker strip's last card ("Holo") is cut in half by the Save as a theme / Export / Import cluster sitting beside it.

Why it happened

.atf-studio__top was a flex row: the picker on the left, the actions on the right. The strip scrolls horizontally (overflow-x: auto), so whatever shares its line silently takes width away from it — about 280px for those three buttons. Ten chips at 92px plus gaps need ~1,064px; the strip was getting ~950px, so it always ended mid-card.

The failure mode is what makes it worth fixing rather than nudging: a strip that runs out of room at the panel edge reads as "there is more, scroll". A strip that runs out of room against a button cluster reads as a broken card.

The layout

Two stacked rows instead of two side-by-side columns:

THEME                          [Save as a theme] [Export] [Import]
[Clean][Midnight][Glass][Brutal][Paper][Neon][Terminal][Soft][Editorial][Holo]

The actions move onto the heading's line, where there was already empty space beside the word "Theme"; the strip gets the full width of a row of its own. On the window in the report all ten themes now fit without scrolling at all. On a narrower window it still scrolls — and scroll-snap-type: x proximity with scroll-snap-align: start on the chips means a scroll can no longer come to rest on half a card either.

Cost: about 14px of the top region — the difference between a 12px heading line and a 30px button line. That region is budgeted at ~110px precisely so the token controls stay above the fold (there's a comment in theme-studio.ts explaining why the picker became a horizontal strip in the first place), and 14px does not threaten it. The picker was spending that width on being unreadable.

Also removed the now-unused .atf-studio__picker rule, and dropped the margin-block-end: 4px that existed only to lift the buttons off the strip's scrollbar gutter.

Verification

Chrome control was switched off by the organization partway through this task, so I could not take an "after" screenshot — flagging that rather than implying I eyeballed it. Instead the structural fact is pinned by tests, which is the more durable check anyway:

• tests/vitest/theme-studio-layout.test.ts (3 cases): the actions and the heading share .atf-studio__topbar; the strip's parent is .atf-studio__top and has no .atfs__actions child of its own — i.e. nothing shares the strip's row; and every theme is rendered rather than the overflow being dropped.
• 251 vitest green, tsc clean, builder bundle rebuilt and deployed to the 8889 site.

The change affects both places the component mounts — the builder's Theme tab and the standalone Theme Studio window — since they share mountThemeControls().

Worth a reload and a look on your side, since I could not.

🤖 Generated with Claude Code

https://claude.ai/code/session_0119U4sRRWGcTQdwYreTwpAp