From 815a3511396b761fc6e8719c8ff11e34ad59cdd8 Mon Sep 17 00:00:00 2001
From: collegeman <aaron@collegeman.net>
Date: Wed, 13 May 2026 10:47:14 -0400
Subject: [PATCH] Fix mobile chat: sticky header, hide dock switch, dvh
 viewport

Three changes to the chat-iframe Vue components plus a defensive
reorder in the widget controller, addressing what mobile users see
when the chat panel takes the full viewport.

ChatHeader: pinned with `sticky top-0 z-10` so the back-and-close
chrome stays anchored even when 100vh ends up larger than the visible
mobile viewport (iOS Safari's URL-bar collapse) and the iframe scrolls.
The header was already `shrink-0` in a flex layout, which works on
desktop but doesn't survive the visual-viewport quirk on mobile.

Dock / undock buttons: gated with `hidden sm:block` so they only show
on the sm breakpoint and up. The previous code referenced
`$store.state.config.isMobile`, but that flag is never populated in
the chat-iframe store (it's read from a PHP-side config object that
has no device awareness), so the rounded-corner and visibility checks
that depended on it were effectively constant. Tailwind responsive
classes handle this without an out-of-band signal.

Chat container: switched to `h-dvh` (dynamic viewport height) and
moved the rounded/border/overflow chrome to `sm:` prefixes so it only
applies on the popup-and-up sizes. `h-screen` (100vh) overflows the
visible viewport on mobile browsers with a collapsing URL bar, which
was the underlying cause of the header-scrolling-out-of-view bug.

widget.js initClient: reordered so `persistedState.open === false`
short-circuits before the docked check. dock() opens the panel as a
side effect, so if a stale `docked: true` flag survived alongside
`open: false` (a stale combination that has shown up on mobile, where
storage quotas and incognito states make persistence flakier), the
old order would override the user's explicit close. Closed-state-wins
now.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 resources/js/components/Chat.vue       |  7 +------
 resources/js/components/ChatHeader.vue | 10 ++++------
 resources/js/widget.js                 | 20 ++++++++++++--------
 3 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/resources/js/components/Chat.vue b/resources/js/components/Chat.vue
index 521c9b8..3eeb61a 100644
--- a/resources/js/components/Chat.vue
+++ b/resources/js/components/Chat.vue
@@ -1,11 +1,6 @@
 <template>
     <div
-        :class="[
-            'flex flex-col bg-gray-100 border-gray-200 p-0 h-screen',
-            {
-                'rounded-lg border overflow-hidden': !$store.state.config.isMobile
-            }
-        ]"
+        class="flex flex-col bg-gray-100 border-gray-200 p-0 h-dvh sm:rounded-lg sm:border sm:overflow-hidden"
     >
         <ChatHeader 
             @back="onBack"
diff --git a/resources/js/components/ChatHeader.vue b/resources/js/components/ChatHeader.vue
index 9c2cd82..c2361d2 100644
--- a/resources/js/components/ChatHeader.vue
+++ b/resources/js/components/ChatHeader.vue
@@ -1,10 +1,8 @@
 <template>
     <div
         :class="[
-            'shrink-0 p-2 relative',
-            {
-                'rounded-t-lg': !$store.state.config.isMobile && !$store.state.docked
-            }
+            'shrink-0 p-2 sticky top-0 z-10',
+            { 'sm:rounded-t-lg': !$store.state.docked }
         ]"
         :style="{
             backgroundColor: $store.state.config.mainColor
@@ -27,7 +25,7 @@
         </button>
         <button
             v-if="$store.state.docked"
-            class="absolute right-8 top-1/2 -translate-y-1/2 outline-none text-white text-sm"
+            class="hidden sm:block absolute right-8 top-1/2 -translate-y-1/2 outline-none text-white text-sm"
             @click.prevent="emitMessage('chat.undock')"
             title="Switch to windowed mode"
         >
@@ -39,7 +37,7 @@
         </button>
         <button
             v-if="!$store.state.docked"
-            class="absolute right-8 top-1/2 -translate-y-1/2 outline-none text-white text-sm"
+            class="hidden sm:block absolute right-8 top-1/2 -translate-y-1/2 outline-none text-white text-sm"
             @click.prevent="emitMessage('chat.dock')"
             title="Dock as sidebar"
         >
diff --git a/resources/js/widget.js b/resources/js/widget.js
index 1ca3b3e..aaa8c5c 100644
--- a/resources/js/widget.js
+++ b/resources/js/widget.js
@@ -239,18 +239,22 @@
     const initClient = () => {
         window.superbotmanChatWidget = superbotmanChatWidget
 
-        // Restoring docked from a prior session takes priority over
-        // openByDefault — dock() opens the panel as part of its work.
-        if (persistedState.docked) {
+        // Honor an explicit close from a prior session before anything
+        // else. dock() opens the panel as a side effect of its work, so
+        // if persistedState.docked got stuck at true while open is false
+        // (a stale combination that shouldn't happen but has in practice
+        // on mobile), the docked branch would overrule the user's choice
+        // to close. Closed-state-wins guarantees that doesn't happen.
+        if (persistedState.open === false) {
+            // intentionally closed — leave the beacon visible and the
+            // chat panel hidden, regardless of any other persisted flag.
+        } else if (persistedState.docked) {
             superbotmanChatWidget.dock()
         } else if (persistedState.open === true) {
-            // If the user explicitly opened or closed the widget in a
-            // prior session, honor that. openByDefault is a first-visit
-            // fallback, not an every-reload override.
             superbotmanChatWidget.open()
-        } else if (persistedState.open === false) {
-            // intentionally closed — leave as-is
         } else if (config.openByDefault) {
+            // openByDefault is a first-visit fallback only — once the
+            // user interacts, the branches above take over.
             superbotmanChatWidget.open()
         }