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/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 */