From b3416e858062a208ad79379d7a96d4c58b5b4dd7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Tue, 1 Sep 2026 07:53:44 +0100
Subject: [PATCH] Spacing says which width it is for

Every field in there writes one breakpoint, chosen by the tabs at the top of the
panel. Without the name the same six selects mean six different things depending
on something above them.

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

diff --git a/web/sections/LayoutPanel.tsx b/web/sections/LayoutPanel.tsx
index 4a19310..d2e0fde 100644
--- a/web/sections/LayoutPanel.tsx
+++ b/web/sections/LayoutPanel.tsx
@@ -4,7 +4,7 @@ import { useClient } from 'hooks/useClient';
 import { readableError } from '../errors';
 import { useFlash } from '../useFlash';
 import { useAutosave } from '../useAutosave';
-import { usePreviewable, useViewMode } from '../ViewMode';
+import { DEVICES, usePreviewable, useViewMode } from '../ViewMode';
 import { applySpacing, paintMeasure, type SpacingDraft } from '../canvas';
 import { SitePreview, useDevPort } from '../SitePreview';
 import { useEditorSlot } from '../useEditorSlot';
@@ -347,7 +347,13 @@ export const LayoutPanel = () => {
           </AccordionContent>
         </AccordionItem>
         <AccordionItem value="padding" className="rounded-lg border border-border px-4">
-          <AccordionTrigger className={SECTION_TITLE}>Spacing</AccordionTrigger>
+          <AccordionTrigger className={SECTION_TITLE}>
+            Spacing
+            {/* Which width these numbers are for. Every field in here writes one breakpoint, chosen by
+                the tabs at the top of the panel — so the title has to say which, or the same six
+                selects mean six different things depending on something above them. */}
+            <span className="ml-1.5 font-normal text-muted-foreground">({DEVICES[device].label})</span>
+          </AccordionTrigger>
           <AccordionContent>
                 {/* Three bands. PaddingTab is still the per-SECTION control, for the pages. */}
                 <SpacingTab