feat(settings): mobile gutter, wrapping header, touch-safe ghost hover

src/components/settings/PageHeader.vue

@@ -36,7 +36,11 @@ const tag = computed(() => `h${props.level}` as 'h1' | 'h2')
 
 <template>
   <div :class="framed ? 'mb-6' : ''">
-    <div :class="[framed || $slots.actions ? 'flex items-center justify-between gap-4' : '', framed ? 'min-h-9' : '']">
+    <!-- flex-wrap, not a breakpoint: the actions wrap under the title only
+         when the row genuinely can't fit them (a 390px phone, a narrow split
+         pane). When wrapped, the actions go full-width below md so a search
+         field stays usable; ≥md keeps the historical shrink-0 desktop row. -->
+    <div :class="[framed || $slots.actions ? 'flex flex-wrap items-center justify-between gap-x-4 gap-y-3' : '', framed ? 'min-h-9' : '']">
       <component
         :is="tag"
         class="min-w-0 truncate text-heading font-semibold text-foreground"
@@ -46,7 +50,7 @@ const tag = computed(() => `h${props.level}` as 'h1' | 'h2')
       </component>
       <div
         v-if="$slots.actions"
-        class="flex shrink-0 items-center gap-2"
+        class="flex items-center gap-2 max-md:w-full md:shrink-0"
       >
         <slot name="actions" />
       </div>

src/components/settings/PageShell.vue

@@ -10,9 +10,9 @@ const props = withDefaults(defineProps<{
   title?: string
   description?: string
   // 'page' is a standalone surface that owns the full gutter. 'tab' lives
-  // inside the bot-detail tab container (which already adds px-6 pt-4 pb-4),
-  // so it only adds the remainder to reach the same pt-10/pb-12 vertical
-  // rhythm.
+  // inside the bot-detail tab container (which already adds the horizontal
+  // gutter — px-4, stepping to px-6 at md — plus pt-4 pb-4), so it only adds
+  // the remainder to reach the same vertical rhythm.
   variant?: 'page' | 'tab'
   // The measure (content column width). 'md' is the reading column every host
   // page uses (max-w-3xl). 'lg'/'xl' exist for board-style pages whose content
@@ -32,7 +32,10 @@ const MAX_W = { md: 'max-w-3xl', lg: 'max-w-4xl', xl: 'max-w-5xl' } as const
 const rootClass = computed(() =>
   props.variant === 'tab'
     ? `mx-auto ${MAX_W[props.width]} pt-6 pb-8`
-    : `mx-auto ${MAX_W[props.width]} px-6 pt-10 pb-12`,
+    // The <md gutter step mirrors SettingsShell/DetailPane (px-4 md:px-6):
+    // a phone keeps a 16px margin instead of the desktop 24px, and the
+    // airier vertical rhythm only starts where the width can afford it.
+    : `mx-auto ${MAX_W[props.width]} px-4 pt-6 pb-8 md:px-6 md:pt-10 md:pb-12`,
 )
 </script>
 

src/lib/menu.ts

@@ -65,7 +65,11 @@ export const menuAlignOffset = -5
 // the chrome border the search row sits inside, so both land at 17 from the panel
 // edge). Shared so the two searchable surfaces don't each hand-write the header.
 export const menuSearchHeaderClass = 'flex h-10 shrink-0 items-center gap-2 border-b border-border/40 px-4'
-export const menuSearchInputClass = 'flex h-full w-full bg-transparent text-control outline-hidden placeholder:text-muted-foreground'
+// Coarse-pointer devices use the tokenized 16px title size: iOS Safari
+// auto-zooms a focused field below 16px in portrait or landscape, and that zoom
+// can strand the viewport after the keyboard closes. Fine-pointer desktop keeps
+// the 14px menu rhythm regardless of viewport width.
+export const menuSearchInputClass = 'flex h-full w-full bg-transparent text-control [@media(pointer:coarse)]:text-title outline-hidden placeholder:text-muted-foreground'
 
 // One menu row: layout + roving-focus highlight. Geometry is pinned to the
 // shared row contract: px-2.5 / py-1.5 / text-control (14px) / rounded-menu

src/style.css

@@ -367,7 +367,16 @@
       scale 0.255s linear(0, 0.3505, 0.7432, 0.9336, 0.9951, 1.0062, 1.0045, 1.0019, 1.0005, 1),
       background-color 0.15s ease;
   }
-  [data-button][data-variant="ghost"]:hover::before,
+  /* hover chip only where hover is real: on touch the tap leaves a STICKY
+     :hover that would keep the chip painted after the finger lifts (e.g. a
+     closed menu trigger still reading active). Touch feedback comes from
+     :active below; an open trigger keeps its chip via the state selectors,
+     which are not hover-gated. */
+  @media (hover: hover) {
+    [data-button][data-variant="ghost"]:hover::before {
+      background-color: var(--btn-ghost-hover);
+    }
+  }
   [data-button][data-variant="ghost"][data-state="open"]::before,
   [data-button][data-variant="ghost"][aria-expanded="true"]::before {
     background-color: var(--btn-ghost-hover);