From 61c8243a39551d622a812ddcfbe16b094fbff82f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B8=85=E5=87=A4?= <qingf622@outlook.com>
Date: Tue, 4 Aug 2026 08:52:20 -0700
Subject: [PATCH 1/4] feat(settings): mobile gutter step and wrapping page
 header

PageShell's page variant gains a <md gutter step (px-4/pt-6/pb-8, desktop
px-6/pt-10/pb-12 unchanged at >=md), matching the SettingsShell/DetailPane
step so phones keep a 16px margin.

PageHeader's framed title row now wraps (flex-wrap) instead of crushing the
title into truncation when actions can't fit; wrapped actions go full-width
below md so a search field stays usable. The wrap is content-driven, not a
breakpoint, so narrow desktop split panes benefit too.
---
 src/components/settings/PageHeader.vue |  8 ++++++--
 src/components/settings/PageShell.vue  | 11 +++++++----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/settings/PageHeader.vue b/src/components/settings/PageHeader.vue
index ce74b28..a2dbb40 100644
--- a/src/components/settings/PageHeader.vue
+++ b/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>
diff --git a/src/components/settings/PageShell.vue b/src/components/settings/PageShell.vue
index 890c21e..4c754f6 100644
--- a/src/components/settings/PageShell.vue
+++ b/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>
 

From db315921e78d2cd6412246bf074934cb67c2dc7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B8=85=E5=87=A4?= <qingf622@outlook.com>
Date: Tue, 4 Aug 2026 09:28:00 -0700
Subject: [PATCH 2/4] fix(menu): 16px menu search input below md to stop iOS
 focus zoom

iOS Safari auto-zooms the page when a focused field renders under 16px, and
the zoom strands the user in a shifted viewport after the keyboard closes.
text-base below md, text-control (14px) rhythm unchanged on desktop.
---
 src/lib/menu.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/lib/menu.ts b/src/lib/menu.ts
index d23c37a..5c7b8db 100644
--- a/src/lib/menu.ts
+++ b/src/lib/menu.ts
@@ -65,7 +65,10 @@ 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'
+// The input is 16px below md on purpose: iOS Safari auto-zooms the page when
+// a focused field is under 16px, and that zoom strands the user in a shifted
+// viewport after the keyboard closes. Desktop keeps the 14px menu rhythm.
+export const menuSearchInputClass = 'flex h-full w-full bg-transparent text-base md:text-control 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

From 7ea8251046b430cc9560b0531b49d4cdc40d140c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B8=85=E5=87=A4?= <qingf622@outlook.com>
Date: Tue, 4 Aug 2026 23:52:48 -0700
Subject: [PATCH 3/4] fix(button): gate ghost hover chip behind @media (hover:
 hover)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On touch, a tap leaves the button in a sticky :hover state, so the ghost
chip stayed painted after the finger lifted — a menu trigger kept reading
active after its menu closed. The open-state selectors (data-state=open /
aria-expanded) are deliberately NOT gated: an open trigger must stay lit on
every platform. Touch press feedback continues to come from :active.
---
 src/style.css | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/style.css b/src/style.css
index b7e9924..97ff2b8 100644
--- a/src/style.css
+++ b/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);

From adf194622832da31fa8d0ef65fbee0fea04afa3d Mon Sep 17 00:00:00 2001
From: qqqqqf <104579013+qqqqqf-q@users.noreply.github.com>
Date: Thu, 6 Aug 2026 02:24:17 +0800
Subject: [PATCH 4/4] fix(menu): prevent iOS focus zoom in landscape

---
 src/lib/menu.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/lib/menu.ts b/src/lib/menu.ts
index 5c7b8db..6f572f5 100644
--- a/src/lib/menu.ts
+++ b/src/lib/menu.ts
@@ -65,10 +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'
-// The input is 16px below md on purpose: iOS Safari auto-zooms the page when
-// a focused field is under 16px, and that zoom strands the user in a shifted
-// viewport after the keyboard closes. Desktop keeps the 14px menu rhythm.
-export const menuSearchInputClass = 'flex h-full w-full bg-transparent text-base md: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