From 7e29953c07c08398da5e45b38ce844ac0baa0455 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Padez?= Date: Mon, 31 Aug 2026 05:17:57 +0100 Subject: [PATCH] four typefaces across from sm, not lg MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The one-row change was committed and never deployed, so it had not been seen at all. And the breakpoint was lg — 1024 — which four short selects had no reason to wait for. The breakpoint here is the browser window's rather than the panel's, and the panel is wide in every window the admin runs in. Co-Authored-By: Claude Opus 5 (1M context) --- web/sections/LayoutPanel.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/web/sections/LayoutPanel.tsx b/web/sections/LayoutPanel.tsx index dab9558..896216e 100644 --- a/web/sections/LayoutPanel.tsx +++ b/web/sections/LayoutPanel.tsx @@ -281,6 +281,10 @@ export const LayoutPanel = () => { {/* Four across, one row. + At `sm:` and not `lg:`. The breakpoint here is the BROWSER's, not the panel's — and this panel + is wide in every window anybody runs the admin in — but lg is 1024 and there was no reason to + make four short selects wait for it. + Two columns meant Typefaces was twice the height of Colours, so switching tabs moved everything below it — and the preview above it changed size to match. A tab strip whose contents jump is a tab strip that has to be re-read every time it is used. @@ -288,7 +292,7 @@ export const LayoutPanel = () => { The hint moves into the option list's own space rather than a line under each select, which is where the second row of height was really going. */} -
+
{ROLES.map(({ key, label, hint }) => (