From 33f2ea46636b40ae5723e3ee4b7fabb378bb950d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Tue, 1 Sep 2026 08:10:05 +0100
Subject: [PATCH] the editor sections fall to one column when it is narrow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A container query on the scroller, once, so a new section is responsive by being
in the column rather than by remembering to say so. Below 320px the two-column
sections stack instead of truncating every select to "Martia…".

Colors stays flex-wrap: three swatches in a two-column grid is 2 and 1.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 web/EditorPanel.tsx           | 10 +++++++++-
 web/sections/FontSizesTab.tsx |  2 +-
 web/sections/LayoutPanel.tsx  |  2 +-
 web/sections/SpacingTab.tsx   |  2 +-
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/web/EditorPanel.tsx b/web/EditorPanel.tsx
index 2980c14..350ad80 100644
--- a/web/EditorPanel.tsx
+++ b/web/EditorPanel.tsx
@@ -37,7 +37,15 @@ export const EditorPanel = () => {
       </div>
 
       {editor ? (
-        <div className="min-h-0 flex-1 overflow-auto p-3">{editor}</div>
+        /*
+          `@container`, once, for every section inside it.
+
+          The sections lay out in two columns and have to fall back to one when the panel is dragged
+          narrow — and the window's width says nothing about that, because the width here is a divider
+          somebody moves. Declared on the scroller rather than per section, so a new section is
+          responsive by being in the column rather than by remembering to say so.
+        */
+        <div className="@container min-h-0 flex-1 overflow-auto p-3">{editor}</div>
       ) : (
         <div className="flex min-h-0 flex-1 items-center justify-center p-6 text-center">
           {/* Names what the panel is FOR rather than saying it is empty. "Nothing selected" describes
diff --git a/web/sections/FontSizesTab.tsx b/web/sections/FontSizesTab.tsx
index 4d3e8a8..2b6938e 100644
--- a/web/sections/FontSizesTab.tsx
+++ b/web/sections/FontSizesTab.tsx
@@ -60,7 +60,7 @@ export const FontSizesTab = ({
   };
 
   return (
-    <div className="grid grid-cols-2 gap-3">
+    <div className="grid grid-cols-1 gap-3 @[20rem]:grid-cols-2">
       {ROLES.map((role) => {
         const current = sizes[role.size];
         const own = current?.[key];
diff --git a/web/sections/LayoutPanel.tsx b/web/sections/LayoutPanel.tsx
index dfe5ad9..78a792e 100644
--- a/web/sections/LayoutPanel.tsx
+++ b/web/sections/LayoutPanel.tsx
@@ -354,7 +354,7 @@ export const LayoutPanel = () => {
             give each one room to be read, which is the only thing this control is for.
 
           */}
-          <div className="grid grid-cols-2 gap-3">
+          <div className="grid grid-cols-1 gap-3 @[20rem]:grid-cols-2">
             {ROLES.map(({ font, label }) => (
               <div key={font} className="flex flex-col gap-1">
                 <label className="text-xs">{label}</label>
diff --git a/web/sections/SpacingTab.tsx b/web/sections/SpacingTab.tsx
index d122365..d10f12d 100644
--- a/web/sections/SpacingTab.tsx
+++ b/web/sections/SpacingTab.tsx
@@ -94,7 +94,7 @@ export const SpacingTab = ({
       {BANDS.map((band) => (
         <div key={band.key} className="flex flex-col gap-2">
           <h4 className="text-xs font-medium">{band.label}</h4>
-          <div className="grid grid-cols-2 gap-3">
+          <div className="grid grid-cols-1 gap-3 @[20rem]:grid-cols-2">
             {band.fields.map((field) => {
               const current = (spacing as Record<string, Record<string, Steps> | undefined>)[band.key]?.[field.key];
               const own = current?.[key];