the typefaces fit on one row, so the tabs stop jumping

Two columns made Typefaces twice the height of Colours, so switching tabs moved everything below it and
resized the preview above. A tab strip whose contents jump is one that has to be re-read every time it
is used — which is the opposite of what tabs were for here.

Four across on a wide panel, two on a narrow one, and the hints truncate rather than wrapping into the
second row of height they were really costing.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

web/sections/LayoutPanel.tsx

@@ -278,7 +278,17 @@ export const LayoutPanel = () => {
 
           <TabsContent value="typefaces" className="rounded-lg border border-border p-4">
       <>
-        <div className="grid gap-3 sm:grid-cols-2">
+        {/*
+          Four across, one row.
+
+          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.
+
+          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">
           {ROLES.map(({ key, label, hint }) => (
             <div key={key} className="flex flex-col gap-1">
               <label className="text-xs">{label}</label>
@@ -298,7 +308,7 @@ export const LayoutPanel = () => {
                   </option>
                 ))}
               </select>
-              <span className="text-[10px] text-muted-foreground">{hint}</span>
+              <span className="truncate text-[10px] text-muted-foreground">{hint}</span>
             </div>
           ))}
         </div>