From 89380a69d6598cf07c3d73e3ae89cc5a006cc4f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Tue, 1 Sep 2026 03:55:12 +0100
Subject: [PATCH] the device control spans the section

No label, full width, three across. It scopes the fields below it, so it reads as their header.
---
 web/DeviceToggle.tsx         | 10 ++++++++--
 web/sections/LayoutPanel.tsx | 15 ++-------------
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/web/DeviceToggle.tsx b/web/DeviceToggle.tsx
index 8fc6ead..fe4fdef 100644
--- a/web/DeviceToggle.tsx
+++ b/web/DeviceToggle.tsx
@@ -55,13 +55,19 @@ export const DeviceToggle = ({ size = 'bar' }: { size?: 'bar' | 'section' }) =>
   const compact = size === 'bar';
 
   return (
-    <div className="flex items-center gap-0.5 rounded-md border border-border p-0.5">
+    <div
+      // In a section it spans the width and spreads its three: it scopes everything below it, so it
+      // reads as a header for the group rather than a control sitting in a corner of one.
+      className={`flex items-center rounded-md border border-border p-0.5 ${
+        compact ? 'gap-0.5' : 'w-full justify-around'
+      }`}
+    >
       {OPTIONS.map(({ value, Icon }) => (
         <Button
           key={value}
           size="sm"
           variant={device === value ? 'secondary' : 'ghost'}
-          className={compact ? 'h-5 gap-1 px-2 text-xs' : 'h-6 gap-1 px-2 text-xs'}
+          className={compact ? 'h-5 gap-1 px-2 text-xs' : 'h-7 flex-1 text-xs'}
           onClick={() => setDevice(value)}
           aria-label={value}
           title={value}
diff --git a/web/sections/LayoutPanel.tsx b/web/sections/LayoutPanel.tsx
index b39cbb3..7df9121 100644
--- a/web/sections/LayoutPanel.tsx
+++ b/web/sections/LayoutPanel.tsx
@@ -360,19 +360,8 @@ export const LayoutPanel = () => {
         <AccordionItem value="padding" className="rounded-lg border border-border px-4">
           <AccordionTrigger className="text-xs">Spacing</AccordionTrigger>
           <AccordionContent>
-            {/*
-              The view this section's settings are FOR, at the top of it.
-
-              Spacing is per width, so the section has to say which width it is editing — and the answer
-              is the same one the preview is showing, not a second selector that could disagree with it.
-              The control reads `?device=`, so pressing it here moves the preview, the bar's toggle and
-              this section together because all three are reading one value.
-
-              At the top rather than beside the fields: it scopes everything below it, and a control that
-              scopes a group belongs above the group.
-            */}
-            <div className="mb-3 flex items-center gap-2">
-              <span className="text-xs text-muted-foreground">Editing</span>
+            {/* The width these settings are for. Reads `?device=`, so it moves the preview too. */}
+            <div className="mb-3">
               <DeviceToggle size="section" />
             </div>
                 {/*