@cat-factory/app 0.116.3 → 0.116.4

package/app/assets/css/main.css

@@ -9,6 +9,37 @@
   user-select: text;
 }
 
+/* Keep the bottom-anchored toaster clear of the home indicator / rounded corner
+ * on phones. The toaster viewport is bottom-anchored (Nuxt UI positions it at
+ * `bottom-4`), so we add the safe-area inset to that OFFSET rather than to the
+ * padding: each toast is `position: absolute; bottom: 0` inside the viewport, so
+ * padding-bottom does not lift it (an abs child anchored to `bottom-0` tracks the
+ * padding-box edge and ignores the padding). `env(safe-area-inset-bottom)` is 0
+ * until the viewport meta carries `viewport-fit=cover` (see nuxt.config.ts), so
+ * this collapses to the stock `1rem` on desktop. Assumes the default bottom
+ * placement (the app does not configure a top-anchored toaster). */
+[data-slot='viewport'] {
+  bottom: calc(1rem + env(safe-area-inset-bottom));
+}
+
+/* Input font floor (P-3): iOS Safari auto-zooms the viewport whenever a focused
+ * field renders below 16px, which yanks the layout around on every tap into an
+ * input. Floor every editable control at 16px on coarse-pointer (touch) devices.
+ * This is the app-wide, fix-once guard: it reaches Nuxt UI's rendered
+ * `<input>`/`<textarea>` AND every hand-rolled raw field, and — unlike a
+ * component-default override — cannot be defeated by a per-instance `size="sm"`.
+ * `max(16px, 1em)` floors at 16px while leaving any deliberately larger field
+ * (1em resolves against the surrounding font size) untouched. Fine-pointer
+ * (desktop) keeps the denser typography. Checkbox/radio/range/color have no
+ * text baseline and never trigger the zoom, so they're excluded. */
+@media (pointer: coarse) {
+  input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']),
+  textarea,
+  select {
+    font-size: max(16px, 1em);
+  }
+}
+
 /* ---- Agent Architecture Board: shared visual language ---------------------- */
 
 :root {

package/app/components/layout/SideBar.vue

@@ -139,7 +139,7 @@ watch(
     :aria-modal="drawerOpen ? 'true' : undefined"
     :aria-label="isCompact ? t('nav.menu') : undefined"
     :inert="isCompact && !ui.mobileNavOpen"
-    class="fixed inset-y-0 start-0 z-40 flex h-full w-64 shrink-0 flex-col gap-4 overflow-y-auto border-e border-slate-800 bg-slate-900/95 p-3 backdrop-blur transition-transform duration-200 focus:outline-none lg:static lg:z-auto lg:translate-x-0 lg:bg-slate-900/80"
+    class="fixed inset-y-0 start-0 z-40 flex h-full w-64 shrink-0 flex-col gap-4 overflow-y-auto border-e border-slate-800 bg-slate-900/95 px-3 pt-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))] backdrop-blur transition-transform duration-200 focus:outline-none lg:static lg:z-auto lg:translate-x-0 lg:bg-slate-900/80"
     :class="
       ui.mobileNavOpen ? 'translate-x-0' : '-translate-x-full rtl:translate-x-full lg:translate-x-0'
     "

package/app/components/panels/AgentStepDetail.vue

@@ -572,7 +572,7 @@ async function copyOutput() {
             </p>
           </div>
 
-          <div class="flex-1 space-y-3 overflow-auto px-4 py-3">
+          <div class="flex-1 space-y-3 overflow-auto overscroll-contain px-4 py-3">
             <p
               v-if="editing"
               class="rounded-lg border border-amber-500/30 bg-amber-500/5 p-3 text-[12px] leading-relaxed text-amber-200/90"
@@ -659,7 +659,10 @@ async function copyOutput() {
           </div>
 
           <!-- edit-then-approve actions -->
-          <div v-if="editing" class="space-y-2 border-t border-slate-800 px-4 py-3">
+          <div
+            v-if="editing"
+            class="space-y-2 border-t border-slate-800 px-4 pt-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))]"
+          >
             <UButton
               color="primary"
               size="sm"
@@ -682,7 +685,10 @@ async function copyOutput() {
             </UButton>
           </div>
 
-          <div v-else class="space-y-2 border-t border-slate-800 px-4 py-3">
+          <div
+            v-else
+            class="space-y-2 border-t border-slate-800 px-4 pt-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))]"
+          >
             <UButton
               color="primary"
               data-testid="step-approve"

package/app/components/panels/InspectorPanel.vue

@@ -269,7 +269,9 @@ const showOriginalDescription = ref(false)
          (Run / Focus / Delete) stay reachable. The status bar above stays put.
          On compact viewports the panel is a bottom sheet capped to the visible
          height (dvh excludes mobile browser chrome). -->
-    <div class="max-h-[80dvh] space-y-4 overflow-y-auto p-4 lg:max-h-[calc(100vh-5rem)]">
+    <div
+      class="max-h-[80dvh] space-y-4 overflow-y-auto overscroll-contain px-4 pt-4 pb-[calc(1rem+env(safe-area-inset-bottom))] lg:max-h-[calc(100vh-5rem)]"
+    >
       <!-- header -->
       <div class="flex items-start justify-between gap-2">
         <div class="flex items-center gap-2">

package/nuxt.config.ts

@@ -115,7 +115,21 @@ export default defineNuxtConfig({
   app: {
     head: {
       title: 'Agent Architecture Board',
-      meta: [{ name: 'viewport', content: 'width=device-width, initial-scale=1' }],
+      meta: [
+        // `viewport-fit=cover` is what makes `env(safe-area-inset-*)` resolve to
+        // non-zero on notched/rounded phones — the safe-area padding on the
+        // bottom-anchored surfaces (inspector sheet, drawer, toaster) is inert
+        // without it, so the two ship together.
+        {
+          name: 'viewport',
+          content: 'width=device-width, initial-scale=1, viewport-fit=cover',
+        },
+        // Tint the mobile browser chrome / iOS Safari address bar to the board
+        // surface so the app doesn't sit under a mismatched white bar. Matches
+        // `--board-bg`. (Home-screen installability — manifest, standalone status
+        // bar, touch icons — is deferred to the initiative's E2/A5-icons follow-up.)
+        { name: 'theme-color', content: '#0b1020' },
+      ],
     },
   },
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.116.3",
+  "version": "0.116.4",
   "description": "Reusable Nuxt layer for the Agent Architecture Board SPA (components, stores, composables, pages). Consume it from a thin deployment app via `extends: ['@cat-factory/app']` and point it at your backend with NUXT_PUBLIC_API_BASE. See deploy/frontend for an example.",
   "repository": {
     "type": "git",