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