From 1e50cfdad6a5e2e63ee78d5acd4329b14ac3d7bf Mon Sep 17 00:00:00 2001
From: simos <simosmik@gmail.com>
Date: Thu, 6 Nov 2025 20:31:32 +0000
Subject: [PATCH] style: standardize mobile navigation spacing with Tailwind
 utility

---
 src/App.jsx                           | 2 +-
 src/components/ChatInterface.jsx      | 9 +--------
 src/components/GitPanel.jsx           | 4 ++--
 src/components/QuickSettingsPanel.jsx | 2 +-
 src/components/Sidebar.jsx            | 2 +-
 src/index.css                         | 5 +++++
 tailwind.config.js                    | 1 +
 7 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 4d10c9c..4f2ac43 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -871,7 +871,7 @@ function AppContent() {
       )}
 
       {/* Main Content Area - Flexible */}
-      <div className={`flex-1 flex flex-col min-w-0 ${isMobile && !isInputFocused ? 'pb-16' : ''}`}>
+      <div className={`flex-1 flex flex-col min-w-0 ${isMobile && !isInputFocused ? 'pb-mobile-nav' : ''}`}>
         <MainContent
           selectedProject={selectedProject}
           selectedSession={selectedSession}
diff --git a/src/components/ChatInterface.jsx b/src/components/ChatInterface.jsx
index e8b1302..a16e869 100644
--- a/src/components/ChatInterface.jsx
+++ b/src/components/ChatInterface.jsx
@@ -4743,7 +4743,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
               </svg>
             </button>
 
-            {/* Hint text inside input box at bottom */}
+            {/* Hint text inside input box at bottom - Desktop only */}
             <div className={`absolute bottom-1 left-12 right-14 sm:right-40 text-xs text-gray-400 dark:text-gray-500 pointer-events-none hidden sm:block transition-opacity duration-200 ${
               input.trim() ? 'opacity-0' : 'opacity-100'
             }`}>
@@ -4751,13 +4751,6 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
                 ? "Ctrl+Enter to send • Shift+Enter for new line • Tab to change modes • / for slash commands"
                 : "Enter to send • Shift+Enter for new line • Tab to change modes • / for slash commands"}
             </div>
-            <div className={`absolute bottom-1 left-12 right-14 text-xs text-gray-400 dark:text-gray-500 pointer-events-none sm:hidden transition-opacity duration-200 ${
-              isInputFocused && !input.trim() ? 'opacity-100' : 'opacity-0'
-            }`}>
-              {sendByCtrlEnter
-                ? "Ctrl+Enter to send • Tab for modes • / for commands"
-                : "Enter to send • Tab for modes • / for commands"}
-            </div>
           </div>
         </form>
       </div>
diff --git a/src/components/GitPanel.jsx b/src/components/GitPanel.jsx
index 5b97604..e232025 100644
--- a/src/components/GitPanel.jsx
+++ b/src/components/GitPanel.jsx
@@ -1156,7 +1156,7 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
 
       {/* File List - Changes View - Only show when git is available */}
       {activeView === 'changes' && !gitStatus?.error && (
-        <div className={`flex-1 overflow-y-auto ${isMobile ? 'pb-20' : ''}`}>
+        <div className={`flex-1 overflow-y-auto ${isMobile ? 'pb-mobile-nav' : ''}`}>
           {isLoading ? (
             <div className="flex items-center justify-center h-32">
               <RefreshCw className="w-6 h-6 animate-spin text-gray-400" />
@@ -1179,7 +1179,7 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
 
       {/* History View - Only show when git is available */}
       {activeView === 'history' && !gitStatus?.error && (
-        <div className={`flex-1 overflow-y-auto ${isMobile ? 'pb-20' : ''}`}>
+        <div className={`flex-1 overflow-y-auto ${isMobile ? 'pb-mobile-nav' : ''}`}>
           {isLoading ? (
             <div className="flex items-center justify-center h-32">
               <RefreshCw className="w-6 h-6 animate-spin text-gray-400" />
diff --git a/src/components/QuickSettingsPanel.jsx b/src/components/QuickSettingsPanel.jsx
index b4fb6db..ab4442b 100644
--- a/src/components/QuickSettingsPanel.jsx
+++ b/src/components/QuickSettingsPanel.jsx
@@ -85,7 +85,7 @@ const QuickSettingsPanel = ({
           </div>
 
           {/* Settings Content */}
-          <div className={`flex-1 overflow-y-auto overflow-x-hidden p-4 space-y-6 bg-white dark:bg-gray-900 ${isMobile ? 'pb-20' : ''}`}>
+          <div className={`flex-1 overflow-y-auto overflow-x-hidden p-4 space-y-6 bg-white dark:bg-gray-900 ${isMobile ? 'pb-mobile-nav' : ''}`}>
             {/* Appearance Settings */}
             <div className="space-y-2">
               <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">Appearance</h4>
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index f619e7f..b530b4e 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -1308,7 +1308,7 @@ function Sidebar({
       {/* Settings Section */}
       <div className="md:p-2 md:border-t md:border-border flex-shrink-0">
         {/* Mobile Settings */}
-        <div className="md:hidden p-4 pb-20 border-t border-border/50">
+        <div className="md:hidden p-4 pb-mobile-nav border-t border-border/50">
           <button
             className="w-full h-14 bg-muted/50 hover:bg-muted/70 rounded-2xl flex items-center justify-start gap-4 px-4 active:scale-[0.98] transition-all duration-150"
             onClick={onShowSettings}
diff --git a/src/index.css b/src/index.css
index 90abc99..a51ecb0 100644
--- a/src/index.css
+++ b/src/index.css
@@ -49,6 +49,11 @@
     --safe-area-inset-right: env(safe-area-inset-right);
     --safe-area-inset-bottom: env(safe-area-inset-bottom);
     --safe-area-inset-left: env(safe-area-inset-left);
+
+    /* Mobile navigation dimensions - Single source of truth */
+    --mobile-nav-height: 60px;
+    --mobile-nav-padding: 12px;
+    --mobile-nav-total: calc(var(--mobile-nav-height) + max(env(safe-area-inset-bottom, 0px), var(--mobile-nav-padding)));
   }
   
   /* Fallback for older iOS versions */
diff --git a/tailwind.config.js b/tailwind.config.js
index 074d4f8..9892326 100755
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -56,6 +56,7 @@ export default {
       },
       spacing: {
         'safe-area-inset-bottom': 'env(safe-area-inset-bottom)',
+        'mobile-nav': 'var(--mobile-nav-total)',
       },
     },
   },