From 5c3bb83babd104d835fdfd68820f26a70d29e7e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Mon, 31 Aug 2026 05:12:51 +0100
Subject: [PATCH] the typefaces fit on one row, so the tabs stop jumping
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

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>