From ed900bc2d3f2a9bf23f09a8d6f12708127ee9a49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Tue, 1 Sep 2026 04:02:37 +0100
Subject: [PATCH] one padding value, for the device on the toggle

The three columns became one select. Which breakpoint it writes comes from the device control above it,
so the value you see is the value for the view you are looking at.
---
 web/sections/GutterTab.tsx | 77 +++++++++++++-------------------------
 1 file changed, 26 insertions(+), 51 deletions(-)

diff --git a/web/sections/GutterTab.tsx b/web/sections/GutterTab.tsx
index 65f1d47..176a47b 100644
--- a/web/sections/GutterTab.tsx
+++ b/web/sections/GutterTab.tsx
@@ -1,3 +1,4 @@
+import { useDevice } from '../DeviceToggle';
 /**
  * The site's horizontal gutter: how far the content sits from the edge of the window.
  *
@@ -23,17 +24,8 @@
 
 export type Gutter = Partial<Record<'base' | 'md' | 'lg', number>>;
 
-/**
- * The three widths, smallest first, with the name the admin uses for each.
- *
- * Smallest first because that is the direction they cascade: `md` inherits from `base`, `lg` from `md`.
- * Read left to right, the row is the progression.
- */
-const WIDTHS = [
-  { key: 'base' as const, label: 'Mobile', hint: 'every width' },
-  { key: 'md' as const, label: 'Tablet', hint: '768 and up' },
-  { key: 'lg' as const, label: 'Desktop', hint: '1024 and up' },
-];
+/** The device toggle's names, and the breakpoint each one writes. */
+const BREAKPOINT = { desktop: 'lg', tablet: 'md', mobile: 'base' } as const;
 
 /** What a width falls back to: the nearest smaller one that has a value. */
 const inherited = (gutter: Gutter, key: 'base' | 'md' | 'lg'): number | null => {
@@ -55,53 +47,36 @@ export const GutterTab = ({
   steps: number[];
   onChange: (gutter: Gutter) => void;
 }) => {
-  const set = (key: 'base' | 'md' | 'lg', value: string) => {
+  const [device] = useDevice();
+  const key = BREAKPOINT[device];
+
+  const set = (value: string) => {
     const next = { ...gutter };
-    // Removed rather than stored as null: an absence is what "inherit" means, and a marker for it would
-    // leave two ways to say the same thing.
+    // Removed rather than stored as null: an absence is what "inherit" means.
     if (value === '') delete next[key];
     else next[key] = Number(value);
     onChange(next);
   };
 
+  const own = gutter[key];
+  const from = inherited(gutter, key);
+
   return (
-    <div className="flex flex-col gap-3">
-      <div className="flex flex-wrap items-baseline gap-2">
-        <h4 className="text-xs font-medium">Horizontal padding</h4>
-        <span className="text-[10px] text-muted-foreground">
-          The space between the content and the edge of the window — the header, the page and the footer
-        </span>
-      </div>
-
-      <div className="grid grid-cols-3 gap-3 sm:grid-cols-4">
-        {WIDTHS.map(({ key, label, hint }) => {
-          const own = gutter[key];
-          const from = inherited(gutter, key);
-
-          return (
-            <div key={key} className="flex flex-col gap-1">
-              <label className="text-xs">{label}</label>
-              <select
-                value={own === undefined ? '' : String(own)}
-                onChange={(event) => set(key, event.currentTarget.value)}
-                className="h-8 rounded-md border border-input bg-transparent px-2 text-xs"
-              >
-                {/* Mobile is the smallest, so there is nothing below it to inherit from and the empty
-                    option means what it actually does there: none. */}
-                <option value="">
-                  {key === 'base' ? 'None' : from === null ? 'Inherit (none)' : `Inherit (${from})`}
-                </option>
-                {steps.map((step) => (
-                  <option key={step} value={String(step)}>
-                    {step}
-                  </option>
-                ))}
-              </select>
-              <span className="truncate text-[10px] text-muted-foreground">{hint}</span>
-            </div>
-          );
-        })}
-      </div>
+    <div className="flex flex-col gap-1">
+      <label className="text-xs">Horizontal padding</label>
+      <select
+        value={own === undefined ? '' : String(own)}
+        onChange={(event) => set(event.currentTarget.value)}
+        className="h-8 rounded-md border border-input bg-transparent px-2 text-xs"
+      >
+        {/* Mobile is the smallest, so there is nothing below it to inherit from. */}
+        <option value="">{key === 'base' ? 'None' : from === null ? 'Inherit (none)' : `Inherit (${from})`}</option>
+        {steps.map((step) => (
+          <option key={step} value={String(step)}>
+            {step}
+          </option>
+        ))}
+      </select>
     </div>
   );
 };