From 8f26d0d3b659444a3af76f5c6e848fc8577de435 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.

One span, not two: the trigger is justify-between and puts the chevron last.

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

diff --git a/web/sections/LayoutPanel.tsx b/web/sections/LayoutPanel.tsx
index 4a19310..675b966 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,15 @@ 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}>
+            {/*
+              ONE child, because the trigger is `justify-between` and puts the chevron last — two would
+              spread the title and the width apart with the arrow beyond them.
+            */}
+            <span>
+              Spacing <span className="font-normal text-muted-foreground">({DEVICES[device].label})</span>
+            </span>
+          </AccordionTrigger>
           <AccordionContent>
                 {/* Three bands. PaddingTab is still the per-SECTION control, for the pages. */}
                 <SpacingTab