feat: comprehensive responsive design implementation for mobile devices

This commit implements a complete responsive design overhaul making the Supervisor UI fully mobile-friendly and beautiful across all devices (320px phones to 4K displays).

## Phase 1: Mobile Navigation
- Add hamburger menu to Navbar with slide-out drawer
- Auto-close on navigation with body scroll lock
- Responsive logo sizing

## Phase 2: Touch-Friendly Buttons
- Increase touch targets to 44px on mobile (36px for small buttons)
- Add responsive button layouts in ProcessCard
- Flex-wrap prevents cramped button rows

## Phase 3: Responsive Spacing & Typography
- Add responsive padding to Card components (p-4 md:p-6)
- Scale typography across breakpoints (text-xl md:text-2xl)
- Responsive spacing in AppLayout and all pages

## Phase 4: Mobile-Friendly Tables
- Dual layout for ConfigTable: table on desktop, cards on mobile
- Preserve all data with proper formatting and wrapping
- Hide table on mobile, show card-based layout

## Phase 5: Modal Improvements
- Add horizontal padding (p-4) to all modals
- Prevent edge-touching on mobile devices
- Fixed SignalSender, KeyboardShortcutsHelp, StdinInput modals

## Phase 6: Page-Specific Layouts
- Processes page: responsive header, controls, and grid spacing
- BatchActions bar: full-width on mobile, centered on desktop
- Logs page: responsive controls and height calculations
- Config page: responsive header and error states

## Phase 7: Polish & Final Touches
- Add viewport meta tag to layout
- Responsive empty states and loading skeletons
- Consistent responsive sizing across all error messages
- Mobile-first typography scaling

🎉 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

components/process/ProcessCard.tsx

@@ -109,34 +109,37 @@ export function ProcessCard({ process, isSelected = false, isFocused = false, on
         )}
 
         {/* Actions */}
-        <div className="flex gap-2" onClick={(e) => e.stopPropagation()}>
+        <div className="flex flex-wrap gap-2" onClick={(e) => e.stopPropagation()}>
           <Button
             size="sm"
             variant="success"
             onClick={handleStart}
             disabled={!canStartProcess(process.state as ProcessStateCode) || isLoading}
-            className="flex-1"
+            className="flex-1 min-w-[100px]"
           >
             <Play className="h-4 w-4" />
-            Start
+            <span className="hidden sm:inline">Start</span>
           </Button>
           <Button
             size="sm"
             variant="warning"
             onClick={handleStop}
             disabled={!canStopProcess(process.state as ProcessStateCode) || isLoading}
-            className="flex-1"
+            className="flex-1 min-w-[100px]"
           >
             <Square className="h-4 w-4" />
-            Stop
+            <span className="hidden sm:inline">Stop</span>
           </Button>
           <Button
             size="sm"
             variant="outline"
             onClick={handleRestart}
             disabled={process.state === 0 || isLoading}
+            title="Restart"
+            className="flex-1 sm:flex-initial"
           >
             <RotateCw className={cn('h-4 w-4', isLoading && 'animate-spin-slow')} />
+            <span className="sm:hidden">Restart</span>
           </Button>
           <Button
             size="sm"
@@ -144,8 +147,10 @@ export function ProcessCard({ process, isSelected = false, isFocused = false, on
             onClick={() => setShowSignalModal(true)}
             disabled={process.state === 0}
             title="Send Signal"
+            className="flex-1 sm:flex-initial"
           >
             <Zap className="h-4 w-4" />
+            <span className="sm:hidden">Signal</span>
           </Button>
           <Button
             size="sm"
@@ -153,8 +158,10 @@ export function ProcessCard({ process, isSelected = false, isFocused = false, on
             onClick={() => setShowStdinModal(true)}
             disabled={process.state !== 20}
             title="Send Stdin"
+            className="flex-1 sm:flex-initial"
           >
             <Terminal className="h-4 w-4" />
+            <span className="sm:hidden">Stdin</span>
           </Button>
         </div>