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