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.
         */}
-        <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>