From d218d3c7a8d5ed10c386567621055380bf12c95a 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:41:09 +0100
Subject: [PATCH] the device toggle is three labelled tabs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Icons alone told three things apart by proportion at 12 pixels. Full width, one
of three filled, and the word from DEVICES.

The `size` prop is gone with the bar that needed the small one, and so is the
second copy inside Spacing — the panel header scopes the whole editor now.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 web/DeviceToggle.tsx         | 40 ++++++++++++++++++++----------------
 web/EditorPanel.tsx          |  4 ++--
 web/sections/LayoutPanel.tsx |  5 -----
 3 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/web/DeviceToggle.tsx b/web/DeviceToggle.tsx
index fe4fdef..24bc0e7 100644
--- a/web/DeviceToggle.tsx
+++ b/web/DeviceToggle.tsx
@@ -2,7 +2,7 @@ import { Monitor, Smartphone, Tablet } from 'lucide-react';
 import { useCallback } from 'react';
 import { useSearchParams } from 'react-router';
 import { Button } from '@/components/ui/button';
-import type { DeviceName } from './ViewMode';
+import { DEVICES, type DeviceName } from './ViewMode';
 
 /**
  * Which width everything is showing, and the control for changing it.
@@ -44,35 +44,39 @@ const OPTIONS: { value: DeviceName; Icon: typeof Monitor }[] = [
 ];
 
 /**
- * The control itself, for an editor section that has per-view settings.
+ * The control itself: three tabs across the width of whatever holds it.
  *
- * `size` because the one in the panel's bar is chrome and these are part of a form: the bar's is as
- * small as a bar allows, and a section's sits above its own fields and should read as belonging to
- * them.
+ * ── One shape, not two ──
+ *
+ * There was a `size` prop. `bar` was a small icon-only cluster for the panel bar across the top of the
+ * detail panel, and that bar is gone — so what is left is the one shape, and a prop with a single
+ * value is a decision nobody makes.
+ *
+ * ── Labelled, and spread ──
+ *
+ * The icons alone were a rebus: a rectangle, a slightly narrower rectangle, and a narrower one still,
+ * telling three things apart by proportion at 12 pixels. They read as tabs now because they behave
+ * like tabs — one of three, the whole width, the chosen one filled — and the word is what makes the
+ * choice legible without hovering for a tooltip.
+ *
+ * The label comes from DEVICES, which is also what the preview names in its own caption. One list.
  */
-export const DeviceToggle = ({ size = 'bar' }: { size?: 'bar' | 'section' }) => {
+export const DeviceToggle = () => {
   const [device, setDevice] = useDevice();
-  const compact = size === 'bar';
 
   return (
-    <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'
-      }`}
-    >
+    <div className="flex w-full items-center rounded-md border border-border p-0.5">
       {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-7 flex-1 text-xs'}
+          className="h-7 flex-1 gap-1.5 text-xs"
           onClick={() => setDevice(value)}
-          aria-label={value}
-          title={value}
+          aria-label={DEVICES[value].label}
         >
-          <Icon className="size-3" />
+          <Icon className="size-3.5" />
+          {DEVICES[value].label}
         </Button>
       ))}
     </div>
diff --git a/web/EditorPanel.tsx b/web/EditorPanel.tsx
index 64877ca..2980c14 100644
--- a/web/EditorPanel.tsx
+++ b/web/EditorPanel.tsx
@@ -32,8 +32,8 @@ export const EditorPanel = () => {
   return (
     <div className="flex size-full flex-col overflow-hidden">
       {/* Outside the scroll area, so a long editor cannot carry it off the screen. */}
-      <div className="flex shrink-0 justify-center border-b border-border px-3 py-2">
-        <DeviceToggle size="bar" />
+      <div className="shrink-0 border-b border-border px-3 py-2">
+        <DeviceToggle />
       </div>
 
       {editor ? (
diff --git a/web/sections/LayoutPanel.tsx b/web/sections/LayoutPanel.tsx
index 12b80e5..3d5ce12 100644
--- a/web/sections/LayoutPanel.tsx
+++ b/web/sections/LayoutPanel.tsx
@@ -8,7 +8,6 @@ import { useAutosave } from '../useAutosave';
 import { usePreviewable, useViewMode } from '../ViewMode';
 import { applySpacing, paintMeasure, type SpacingDraft } from '../canvas';
 import { SitePreview, useDevPort } from '../SitePreview';
-import { DeviceToggle } from '../DeviceToggle';
 import { useEditorSlot } from '../useEditorSlot';
 import { type LayoutBand } from './PaddingTab';
 import { SpacingTab } from './SpacingTab';
@@ -348,10 +347,6 @@ 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. */}
-            <div className="mb-3">
-              <DeviceToggle size="section" />
-            </div>
                 {/* Three bands. PaddingTab is still the per-SECTION control, for the pages. */}
                 <SpacingTab
                   spacing={draft.spacing}