the toggle drops its labels when the panel is narrow

A container query, not a screen one: this sits in a workspace panel whose width
is a divider somebody drags, so the window says nothing about the room. Below
240px the icons stand alone and the word is the tooltip.

Every editor section starts open. It opened on one, from ?tab=, which is what
tabs want — these are not tabs, and a collapsed column asks somebody to go
looking for the setting they came for. ?tab= is gone with it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

web/DeviceToggle.tsx

@@ -60,12 +60,20 @@ const OPTIONS: { value: DeviceName; Icon: typeof Monitor }[] = [
  * 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.
+ *
+ * ── Narrow, it goes back to icons ──
+ *
+ * A CONTAINER query, not a screen one: this sits in a workspace panel whose width is a divider the
+ * user drags, so the window's width says nothing about the room there is. `@container` on the row
+ * makes the row itself the thing measured.
+ *
+ * The word is then the `title`, so the answer is still one hover away rather than gone.
  */
 export const DeviceToggle = () => {
   const [device, setDevice] = useDevice();
 
   return (
-    <div className="flex w-full items-center rounded-md border border-border p-0.5">
+    <div className="@container flex w-full items-center rounded-md border border-border p-0.5">
       {OPTIONS.map(({ value, Icon }) => (
         <Button
           key={value}
@@ -74,9 +82,12 @@ export const DeviceToggle = () => {
           className="h-7 flex-1 gap-1.5 text-xs"
           onClick={() => setDevice(value)}
           aria-label={DEVICES[value].label}
+          title={DEVICES[value].label}
         >
           <Icon className="size-3.5" />
-          {DEVICES[value].label}
+          {/* Three labels need about 240px between them. Below that the icons stand alone and the
+              word is the tooltip. */}
+          <span className="hidden @[15rem]:inline">{DEVICES[value].label}</span>
         </Button>
       ))}
     </div>