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}