From 255b52eb6d379de5e7f95b59acbf1f270a367ceb Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Thu, 5 Mar 2026 08:56:23 +0000
Subject: [PATCH] fix: teleport mobile close button to body to escape CSS
 transform

The mobile close button uses position: fixed, which breaks inside
a CSS transform containing block. Wrapping in <Teleport to="body">
ensures correct fixed positioning relative to the viewport.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 neode-ui/src/views/Chat.vue | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/neode-ui/src/views/Chat.vue b/neode-ui/src/views/Chat.vue
index 37378470..e8c4d90b 100644
--- a/neode-ui/src/views/Chat.vue
+++ b/neode-ui/src/views/Chat.vue
@@ -54,19 +54,21 @@
       </div>
     </div>
 
-    <!-- Mobile close bar: sits above the tab bar, below the AIUI content -->
-    <div class="md:hidden mobile-back-btn flex items-center justify-center">
-      <button
-        class="w-full glass-button px-6 py-2.5 rounded-lg font-medium flex items-center justify-center gap-2 text-sm"
-        style="background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);"
-        @click="closeChat"
-      >
-        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-        </svg>
-        Close Chat
-      </button>
-    </div>
+    <!-- Mobile close bar (teleported to escape CSS transform containing block) -->
+    <Teleport to="body">
+      <div class="md:hidden mobile-back-btn flex items-center justify-center">
+        <button
+          class="w-full glass-button px-6 py-2.5 rounded-lg font-medium flex items-center justify-center gap-2 text-sm"
+          style="background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);"
+          @click="closeChat"
+        >
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+          Close Chat
+        </button>
+      </div>
+    </Teleport>
   </div>
 </template>