four typefaces across from sm, not lg

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) <noreply@anthropic.com>

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.
         */}
-        <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
+        <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
           {ROLES.map(({ key, label, hint }) => (
             <div key={key} className="flex flex-col gap-1">
               <label className="text-xs">{label}</label>