From 082616cb1ccdac9e0b3ae9a41461983883fa94f8 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sat, 14 Feb 2026 03:56:25 -0600
Subject: [PATCH] fix: Keep FABs visible above mobile bottom sheets

- Increase FAB z-index on touch devices
- Move FABs up when terminal or voice sheet is open
---
 frontend/src/App.vue | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 8464faa..18c3bdc 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -299,7 +299,8 @@ watch(() => route.name, (newPage) => {
         permission: awaitingPermission,
         'session-start': showSessionStart,
         notification: showNotification,
-        'tool-flash': showToolFlash
+        'tool-flash': showToolFlash,
+        'sheet-open': showTerminal || showVoice
       }"
       @click="showTerminal = !showTerminal"
       :title="awaitingPermission ? `Permiso requerido: ${claudeTool || 'herramienta'}` : isProcessing ? `Claude: ${claudeTool || 'processing'}` : 'Toggle Terminal'"
@@ -372,7 +373,7 @@ watch(() => route.name, (newPage) => {
     <!-- Voice FAB Button -->
     <button
       class="voice-fab"
-      :class="{ active: showVoice }"
+      :class="{ active: showVoice, 'sheet-open': showTerminal || showVoice }"
       @click="showVoice = !showVoice"
       title="Voice Input"
     >
@@ -900,4 +901,18 @@ watch(() => route.name, (newPage) => {
     height: 44px;
   }
 }
+
+/* Mobile: FABs above bottom sheets */
+@media (max-width: 1024px) and (pointer: coarse) {
+  .terminal-fab,
+  .voice-fab {
+    z-index: 10001;
+    transition: bottom 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s ease;
+  }
+
+  .terminal-fab.sheet-open,
+  .voice-fab.sheet-open {
+    bottom: calc(10vh + 16px);
+  }
+}
 </style>