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/BatchActions.tsx

@@ -46,60 +46,74 @@ export function BatchActions({ selectedProcesses, processes, onClearSelection }:
   };
 
   return (
-    <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 animate-slide-up">
+    <div className="fixed bottom-4 left-4 right-4 md:left-1/2 md:right-auto md:-translate-x-1/2 z-50 animate-slide-up">
       <Card className="shadow-2xl border-2">
-        <div className="flex items-center gap-4 px-6 py-4">
-          <div className="flex items-center gap-2">
-            <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center">
-              <span className="text-sm font-bold text-primary">{selectedCount}</span>
+        <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 sm:gap-4 p-4">
+          {/* Selection count */}
+          <div className="flex items-center justify-between sm:justify-start gap-2">
+            <div className="flex items-center gap-2">
+              <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center">
+                <span className="text-sm font-bold text-primary">{selectedCount}</span>
+              </div>
+              <span className="text-sm font-medium">
+                {selectedCount} {selectedCount === 1 ? 'process' : 'processes'} selected
+              </span>
             </div>
-            <span className="text-sm font-medium">
-              {selectedCount} {selectedCount === 1 ? 'process' : 'processes'} selected
-            </span>
+            {/* Close button on mobile - inline with count */}
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={onClearSelection}
+              className="h-8 w-8 sm:hidden"
+            >
+              <X className="h-4 w-4" />
+            </Button>
           </div>
 
-          <div className="h-6 w-px bg-border" />
+          <div className="hidden sm:block h-6 w-px bg-border" />
 
-          <div className="flex gap-2">
+          {/* Action buttons - full width on mobile */}
+          <div className="flex gap-2 flex-1">
             <Button
               variant="success"
               size="sm"
               onClick={handleStartSelected}
               disabled={isLoading}
-              className="gap-2"
+              className="gap-2 flex-1 sm:flex-initial"
             >
               <Play className="h-4 w-4" />
-              Start Selected
+              <span className="hidden sm:inline">Start Selected</span>
             </Button>
             <Button
               variant="destructive"
               size="sm"
               onClick={handleStopSelected}
               disabled={isLoading}
-              className="gap-2"
+              className="gap-2 flex-1 sm:flex-initial"
             >
               <Square className="h-4 w-4" />
-              Stop Selected
+              <span className="hidden sm:inline">Stop Selected</span>
             </Button>
             <Button
               variant="outline"
               size="sm"
               onClick={handleRestartSelected}
               disabled={isLoading}
-              className="gap-2"
+              className="gap-2 flex-1 sm:flex-initial"
             >
               <RotateCw className={cn('h-4 w-4', isLoading && 'animate-spin')} />
-              Restart Selected
+              <span className="hidden sm:inline">Restart Selected</span>
             </Button>
           </div>
 
-          <div className="h-6 w-px bg-border" />
+          <div className="hidden sm:block h-6 w-px bg-border" />
 
+          {/* Close button on desktop */}
           <Button
             variant="ghost"
             size="icon"
             onClick={onClearSelection}
-            className="h-8 w-8"
+            className="hidden sm:flex h-8 w-8"
           >
             <X className="h-4 w-4" />
           </Button>