From 51431832d825a8de366955f41ba8eb11555cb1f0 Mon Sep 17 00:00:00 2001
From: simos <simosmik@gmail.com>
Date: Fri, 7 Nov 2025 03:39:15 +0000
Subject: [PATCH] style(ui): improve mobile responsiveness of status and
 navigation components

Refactor component spacing, typography, and layout to better support mobile
devices while maintaining desktop experience. Changes include:

- Reduce bottom margins and padding on mobile (mb-3 vs mb-6, px-2.5 vs px-4)
- Use responsive text sizes (text-xs sm:text-sm, text-base sm:text-xl)
- Add truncation and min-w-0 to prevent text overflow on small screens
- Hide non-essential info on mobile (token counts, keyboard shortcuts)
- Adjust gap spacing for tighter mobile layouts (gap-1.5 vs gap-3)
- Improve button touch targets with refined padding
- Update background colors for better contrast (gray-800 vs gray-900)
- Add border styling for enhanced component definition

Affects ClaudeStatus, CodeEditor, GitPanel, MainContent, MobileNav,
QuickSettingsPanel components and global styles. Ensures consistent
mobile-first design across the application.
---
 src/components/ClaudeStatus.jsx       | 39 +++++++++------------
 src/components/CodeEditor.jsx         | 10 +++---
 src/components/GitPanel.jsx           |  2 +-
 src/components/MainContent.jsx        | 50 +++++++++++++--------------
 src/components/MobileNav.jsx          | 24 +++----------
 src/components/QuickSettingsPanel.jsx |  4 +--
 src/index.css                         | 46 ++++++++++++++----------
 7 files changed, 82 insertions(+), 93 deletions(-)

diff --git a/src/components/ClaudeStatus.jsx b/src/components/ClaudeStatus.jsx
index 2fb54ad..eaeac95 100644
--- a/src/components/ClaudeStatus.jsx
+++ b/src/components/ClaudeStatus.jsx
@@ -57,46 +57,41 @@ function ClaudeStatus({ status, onAbort, isLoading, provider = 'claude' }) {
   const currentSpinner = spinners[animationPhase];
   
   return (
-    <div className="w-full mb-6 animate-in slide-in-from-bottom duration-300">
-      <div className="flex items-center justify-between max-w-4xl mx-auto bg-gray-900 dark:bg-gray-950 text-white rounded-lg shadow-lg px-4 py-3">
-        <div className="flex-1">
-          <div className="flex items-center gap-3">
+    <div className="w-full mb-3 sm:mb-6 animate-in slide-in-from-bottom duration-300">
+      <div className="flex items-center justify-between max-w-4xl mx-auto bg-gray-800 dark:bg-gray-900 text-white rounded-lg shadow-lg px-2.5 py-2 sm:px-4 sm:py-3 border border-gray-700 dark:border-gray-800">
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 sm:gap-3">
             {/* Animated spinner */}
             <span className={cn(
-              "text-xl transition-all duration-500",
+              "text-base sm:text-xl transition-all duration-500 flex-shrink-0",
               animationPhase % 2 === 0 ? "text-blue-400 scale-110" : "text-blue-300"
             )}>
               {currentSpinner}
             </span>
-            
-            {/* Status text - first line */}
-            <div className="flex-1">
-              <div className="flex items-center gap-2">
-                <span className="font-medium text-sm">{statusText}...</span>
-                <span className="text-gray-400 text-sm">({elapsedTime}s)</span>
+
+            {/* Status text - compact for mobile */}
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-1.5 sm:gap-2">
+                <span className="font-medium text-xs sm:text-sm truncate">{statusText}...</span>
+                <span className="text-gray-400 text-xs sm:text-sm flex-shrink-0">({elapsedTime}s)</span>
                 {tokens > 0 && (
                   <>
-                    <span className="text-gray-400">·</span>
-                    <span className="text-gray-300 text-sm hidden sm:inline">⚒ {tokens.toLocaleString()} tokens</span>
-                    <span className="text-gray-300 text-sm sm:hidden">⚒ {tokens.toLocaleString()}</span>
+                    <span className="text-gray-500 hidden sm:inline">·</span>
+                    <span className="text-gray-300 text-xs sm:text-sm hidden sm:inline flex-shrink-0">⚒ {tokens.toLocaleString()}</span>
                   </>
                 )}
-                <span className="text-gray-400 hidden sm:inline">·</span>
-                <span className="text-gray-300 text-sm hidden sm:inline">esc to interrupt</span>
-              </div>
-              {/* Second line for mobile */}
-              <div className="text-xs text-gray-400 sm:hidden mt-1">
-                esc to interrupt
+                <span className="text-gray-500 hidden sm:inline">·</span>
+                <span className="text-gray-400 text-xs sm:text-sm hidden sm:inline">esc to stop</span>
               </div>
             </div>
           </div>
         </div>
-        
+
         {/* Interrupt button */}
         {canInterrupt && onAbort && (
           <button
             onClick={onAbort}
-            className="ml-3 text-xs bg-red-600 hover:bg-red-700 text-white px-2.5 py-1 sm:px-3 sm:py-1.5 rounded-md transition-colors flex items-center gap-1.5 flex-shrink-0"
+            className="ml-2 sm:ml-3 text-xs bg-red-600 hover:bg-red-700 active:bg-red-800 text-white px-2 py-1 sm:px-3 sm:py-1.5 rounded-md transition-colors flex items-center gap-1 sm:gap-1.5 flex-shrink-0 font-medium"
           >
             <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
diff --git a/src/components/CodeEditor.jsx b/src/components/CodeEditor.jsx
index 172242d..e998d86 100644
--- a/src/components/CodeEditor.jsx
+++ b/src/components/CodeEditor.jsx
@@ -460,7 +460,7 @@ function CodeEditor({ file, onClose, projectPath, isSidebar = false, isExpanded
           `}
         </style>
         {isSidebar ? (
-          <div className="w-full h-full flex items-center justify-center bg-white dark:bg-gray-900">
+          <div className="w-full h-full flex items-center justify-center bg-background">
             <div className="flex items-center gap-3">
               <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
               <span className="text-gray-900 dark:text-white">Loading {file.name}...</span>
@@ -560,14 +560,14 @@ function CodeEditor({ file, onClose, projectPath, isSidebar = false, isExpanded
           'md:bg-black/50 md:flex md:items-center md:justify-center md:p-4'
         } ${isFullscreen ? 'md:p-0' : ''}`}>
         <div className={isSidebar ?
-          'bg-white dark:bg-gray-900 flex flex-col w-full h-full' :
-          `bg-white shadow-2xl flex flex-col ${
+          'bg-background flex flex-col w-full h-full' :
+          `bg-background shadow-2xl flex flex-col ${
           // Mobile: always fullscreen, Desktop: modal sizing
           'w-full h-full md:rounded-lg md:shadow-2xl' +
           (isFullscreen ? ' md:w-full md:h-full md:rounded-none' : ' md:w-full md:max-w-6xl md:h-[80vh] md:max-h-[80vh]')
         }`}>
         {/* Header */}
-        <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700 flex-shrink-0 min-w-0">
+        <div className="flex items-center justify-between p-4 border-b border-border flex-shrink-0 min-w-0">
           <div className="flex items-center gap-3 min-w-0 flex-1">
             <div className="min-w-0 flex-1">
               <div className="flex items-center gap-2 min-w-0">
@@ -684,7 +684,7 @@ function CodeEditor({ file, onClose, projectPath, isSidebar = false, isExpanded
         </div>
 
         {/* Footer */}
-        <div className="flex items-center justify-between p-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 flex-shrink-0">
+        <div className="flex items-center justify-between p-3 border-t border-border bg-muted flex-shrink-0">
           <div className="flex items-center gap-4 text-sm text-gray-600 dark:text-gray-400">
             <span>Lines: {content.split('\n').length}</span>
             <span>Characters: {content.length}</span>
diff --git a/src/components/GitPanel.jsx b/src/components/GitPanel.jsx
index e232025..3941091 100644
--- a/src/components/GitPanel.jsx
+++ b/src/components/GitPanel.jsx
@@ -769,7 +769,7 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
   }
 
   return (
-    <div className="h-full flex flex-col bg-white dark:bg-gray-900">
+    <div className="h-full flex flex-col bg-background">
       {/* Header */}
       <div className={`flex items-center justify-between border-b border-gray-200 dark:border-gray-700 ${isMobile ? 'px-3 py-2' : 'px-4 py-3'}`}>
         <div className="relative" ref={dropdownRef}>
diff --git a/src/components/MainContent.jsx b/src/components/MainContent.jsx
index d8c34df..522f99f 100644
--- a/src/components/MainContent.jsx
+++ b/src/components/MainContent.jsx
@@ -213,12 +213,12 @@ function MainContent({
       <div className="h-full flex flex-col">
         {/* Header with menu button for mobile */}
         {isMobile && (
-          <div 
-            className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 p-3 sm:p-4 pwa-header-safe flex-shrink-0"
+          <div
+            className="bg-background border-b border-border p-2 sm:p-3 pwa-header-safe flex-shrink-0"
           >
             <button
               onClick={onMenuClick}
-              className="p-1.5 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 pwa-menu-button"
+              className="p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 pwa-menu-button"
             >
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
@@ -251,12 +251,12 @@ function MainContent({
       <div className="h-full flex flex-col">
         {/* Header with menu button for mobile */}
         {isMobile && (
-          <div 
-            className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 p-3 sm:p-4 pwa-header-safe flex-shrink-0"
+          <div
+            className="bg-background border-b border-border p-2 sm:p-3 pwa-header-safe flex-shrink-0"
           >
             <button
               onClick={onMenuClick}
-              className="p-1.5 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 pwa-menu-button"
+              className="p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 pwa-menu-button"
             >
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
@@ -290,10 +290,10 @@ function MainContent({
     <div className="h-full flex flex-col">
       {/* Header with tabs */}
       <div
-        className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 p-3 sm:p-4 pwa-header-safe flex-shrink-0"
+        className="bg-background border-b border-border p-2 sm:p-3 pwa-header-safe flex-shrink-0"
       >
         <div className="flex items-center justify-between relative">
-          <div className="flex items-center space-x-2 sm:space-x-3">
+          <div className="flex items-center space-x-2 min-w-0 flex-1">
             {isMobile && (
               <button
                 onClick={onMenuClick}
@@ -301,36 +301,36 @@ function MainContent({
                   e.preventDefault();
                   onMenuClick();
                 }}
-                className="p-2.5 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 touch-manipulation active:scale-95 pwa-menu-button"
+                className="p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 touch-manipulation active:scale-95 pwa-menu-button flex-shrink-0"
               >
-                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
                 </svg>
               </button>
             )}
-            <div className="min-w-0 flex items-center gap-2">
+            <div className="min-w-0 flex items-center gap-2 flex-1 overflow-x-auto scrollbar-hide">
               {activeTab === 'chat' && selectedSession && (
-                <div className="w-6 h-6 flex-shrink-0 flex items-center justify-center">
+                <div className="w-5 h-5 flex-shrink-0 flex items-center justify-center">
                   {selectedSession.__provider === 'cursor' ? (
-                    <CursorLogo className="w-5 h-5" />
+                    <CursorLogo className="w-4 h-4" />
                   ) : (
-                    <ClaudeLogo className="w-5 h-5" />
+                    <ClaudeLogo className="w-4 h-4" />
                   )}
                 </div>
               )}
-              <div className="flex-1 min-w-0">
+              <div className="min-w-0 flex-1">
                 {activeTab === 'chat' && selectedSession ? (
-                  <div>
-                    <h2 className="text-base sm:text-lg font-semibold text-gray-900 dark:text-white truncate">
+                  <div className="min-w-0">
+                    <h2 className="text-sm sm:text-base font-semibold text-gray-900 dark:text-white whitespace-nowrap overflow-x-auto scrollbar-hide">
                       {selectedSession.__provider === 'cursor' ? (selectedSession.name || 'Untitled Session') : (selectedSession.summary || 'New Session')}
                     </h2>
                     <div className="text-xs text-gray-500 dark:text-gray-400 truncate">
-                      {selectedProject.displayName} <span className="hidden sm:inline">• {selectedSession.id}</span>
+                      {selectedProject.displayName}
                     </div>
                   </div>
                 ) : activeTab === 'chat' && !selectedSession ? (
-                  <div>
-                    <h2 className="text-base sm:text-lg font-semibold text-gray-900 dark:text-white">
+                  <div className="min-w-0">
+                    <h2 className="text-sm sm:text-base font-semibold text-gray-900 dark:text-white">
                       New Session
                     </h2>
                     <div className="text-xs text-gray-500 dark:text-gray-400 truncate">
@@ -338,11 +338,11 @@ function MainContent({
                     </div>
                   </div>
                 ) : (
-                  <div>
-                    <h2 className="text-base sm:text-lg font-semibold text-gray-900 dark:text-white">
-                      {activeTab === 'files' ? 'Project Files' : 
-                       activeTab === 'git' ? 'Source Control' : 
-                       (activeTab === 'tasks' && shouldShowTasksTab) ? 'TaskMaster' : 
+                  <div className="min-w-0">
+                    <h2 className="text-sm sm:text-base font-semibold text-gray-900 dark:text-white">
+                      {activeTab === 'files' ? 'Project Files' :
+                       activeTab === 'git' ? 'Source Control' :
+                       (activeTab === 'tasks' && shouldShowTasksTab) ? 'TaskMaster' :
                        'Project'}
                     </h2>
                     <div className="text-xs text-gray-500 dark:text-gray-400 truncate">
diff --git a/src/components/MobileNav.jsx b/src/components/MobileNav.jsx
index b985142..9940b42 100644
--- a/src/components/MobileNav.jsx
+++ b/src/components/MobileNav.jsx
@@ -4,8 +4,6 @@ import { useTasksSettings } from '../contexts/TasksSettingsContext';
 
 function MobileNav({ activeTab, setActiveTab, isInputFocused }) {
   const { tasksEnabled } = useTasksSettings();
-  // Detect dark mode
-  const isDarkMode = document.documentElement.classList.contains('dark');
   const navItems = [
     {
       id: 'chat',
@@ -36,22 +34,11 @@ function MobileNav({ activeTab, setActiveTab, isInputFocused }) {
   ];
 
   return (
-    <>
-      <style>
-        {`
-          .mobile-nav-container {
-            background-color: ${isDarkMode ? '#1f2937' : '#ffffff'} !important;
-          }
-          .mobile-nav-container:hover {
-            background-color: ${isDarkMode ? '#1f2937' : '#ffffff'} !important;
-          }
-        `}
-      </style>
-      <div 
-        className={`mobile-nav-container fixed bottom-0 left-0 right-0 border-t border-gray-200 dark:border-gray-700 z-50 ios-bottom-safe transform transition-transform duration-300 ease-in-out shadow-lg ${
-          isInputFocused ? 'translate-y-full' : 'translate-y-0'
-        }`}
-      >
+    <div
+      className={`fixed bottom-0 left-0 right-0 bg-background border-t border-border z-50 ios-bottom-safe transform transition-transform duration-300 ease-in-out shadow-lg ${
+        isInputFocused ? 'translate-y-full' : 'translate-y-0'
+      }`}
+    >
       <div className="flex items-center justify-around py-1">
         {navItems.map((item) => {
           const Icon = item.icon;
@@ -81,7 +68,6 @@ function MobileNav({ activeTab, setActiveTab, isInputFocused }) {
         })}
       </div>
     </div>
-    </>
   );
 }
 
diff --git a/src/components/QuickSettingsPanel.jsx b/src/components/QuickSettingsPanel.jsx
index ab4442b..17dce05 100644
--- a/src/components/QuickSettingsPanel.jsx
+++ b/src/components/QuickSettingsPanel.jsx
@@ -71,7 +71,7 @@ const QuickSettingsPanel = ({
 
       {/* Panel */}
       <div
-        className={`fixed top-0 right-0 h-full w-64 bg-white dark:bg-gray-900 border-l border-gray-200 dark:border-gray-700 shadow-xl transform transition-transform duration-150 ease-out z-40 ${
+        className={`fixed top-0 right-0 h-full w-64 bg-background border-l border-border shadow-xl transform transition-transform duration-150 ease-out z-40 ${
           localIsOpen ? 'translate-x-0' : 'translate-x-full'
         } ${isMobile ? 'h-screen' : ''}`}
       >
@@ -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-mobile-nav' : ''}`}>
+          <div className={`flex-1 overflow-y-auto overflow-x-hidden p-4 space-y-6 bg-background ${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/index.css b/src/index.css
index a51ecb0..858c424 100644
--- a/src/index.css
+++ b/src/index.css
@@ -54,6 +54,11 @@
     --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)));
+
+    /* Header safe area dimensions */
+    --header-safe-area-top: env(safe-area-inset-top, 0px);
+    --header-base-padding: 8px;
+    --header-total-padding: calc(var(--header-safe-area-top) + var(--header-base-padding));
   }
   
   /* Fallback for older iOS versions */
@@ -127,35 +132,29 @@
       }
     }
   }
-  
+
   /* PWA mode detected by JavaScript - more reliable */
   html.pwa-mode,
   body.pwa-mode {
     height: 100%;
     overflow: hidden;
-    background-color: rgb(255 255 255); /* white - same as bg-white for safe area */
   }
 
   body.pwa-mode #root {
-    padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
-    padding-left: env(safe-area-inset-left);
-    padding-right: env(safe-area-inset-right);
+    padding-top: var(--header-total-padding);
+    padding-left: var(--safe-area-inset-left);
+    padding-right: var(--safe-area-inset-right);
     height: 100vh;
     overflow: hidden;
   }
 
   /* Adjust fixed inset positioning in PWA mode */
   body.pwa-mode .fixed.inset-0 {
-    top: calc(env(safe-area-inset-top, 0px) + 8px);
-    left: env(safe-area-inset-left);
-    right: env(safe-area-inset-right);
+    top: var(--header-total-padding);
+    left: var(--safe-area-inset-left);
+    right: var(--safe-area-inset-right);
     bottom: 0;
   }
-
-  /* Dark mode safe area background */
-  html.dark body.pwa-mode {
-    background-color: rgb(31 41 55); /* gray-800 - matches header color */
-  }
   
   /* Global transition defaults */
   button, 
@@ -646,22 +645,21 @@
     padding-bottom: max(env(safe-area-inset-bottom), 12px);
   }
   
-  /* PWA specific header adjustments for iOS */
+  /* PWA specific header adjustments - uses CSS variables for consistency */
   .pwa-header-safe {
-    padding-top: 16px;
+    padding-top: var(--header-base-padding);
   }
-  
+
   /* When PWA mode is detected by JavaScript */
   body.pwa-mode .pwa-header-safe {
     /* Reset padding since #root already handles safe area */
     padding-top: 0px !important;
   }
 
-  /* For mobile PWA, ensure proper header spacing */
+  /* For mobile PWA, add bottom padding for better spacing */
   @media screen and (max-width: 768px) {
     body.pwa-mode .pwa-header-safe {
-      padding-top: 4px !important;
-      padding-bottom: 12px;
+      padding-bottom: 8px;
     }
   }
   
@@ -691,6 +689,16 @@
     max-width: 100%;
     box-sizing: border-box;
   }
+
+  /* Hide scrollbar utility for horizontal scroll */
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 /* Hide markdown backticks in prose content */