diff --git a/web/sections/LayoutPanel.tsx b/web/sections/LayoutPanel.tsx
index e1acca0..dab9558 100644
--- a/web/sections/LayoutPanel.tsx
+++ b/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>