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

@@ -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}

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 width these settings are for. Reads `?device=`, so it moves the preview too. */}
-              The view this section's settings are FOR, at the top of it.
+            <div className="mb-3">
-
-              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>
               <DeviceToggle size="section" />
             </div>
                 {/*