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/layout/AppLayout.tsx

@@ -7,7 +7,9 @@ export function AppLayout({ children }: { children: ReactNode }) {
   return (
     <div className="flex flex-col min-h-screen">
       <Navbar />
-      <main className="flex-1 container mx-auto px-4 py-8">{children}</main>
+      <main className="flex-1 container mx-auto px-4 md:px-6 lg:px-8 py-4 md:py-6 lg:py-8">
+        {children}
+      </main>
     </div>
   );
 }

components/layout/Navbar.tsx

@@ -3,7 +3,7 @@
 import { useState, useEffect } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { Moon, Sun, Activity } from 'lucide-react';
+import { Moon, Sun, Activity, Menu, X } from 'lucide-react';
 import { useTheme } from '@/components/providers/ThemeProvider';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils/cn';
@@ -19,12 +19,30 @@ const navItems = [
 export function Navbar() {
   const pathname = usePathname();
   const [mounted, setMounted] = useState(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const themeContext = useTheme();
 
   useEffect(() => {
     setMounted(true);
   }, []);
 
+  useEffect(() => {
+    // Close mobile menu when route changes
+    setMobileMenuOpen(false);
+  }, [pathname]);
+
+  useEffect(() => {
+    // Prevent scroll when mobile menu is open
+    if (mobileMenuOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'unset';
+    }
+    return () => {
+      document.body.style.overflow = 'unset';
+    };
+  }, [mobileMenuOpen]);
+
   const toggleTheme = () => {
     if (themeContext) {
       themeContext.setTheme(themeContext.resolvedTheme === 'dark' ? 'light' : 'dark');
@@ -33,17 +51,17 @@ export function Navbar() {
 
   return (
     <nav className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-      <div className="container flex h-16 items-center px-4">
+      <div className="container flex h-16 items-center px-4 md:px-6">
         {/* Logo */}
-        <Link href="/" className="flex items-center gap-2 mr-8">
+        <Link href="/" className="flex items-center gap-2 mr-4 md:mr-8">
           <Activity className="h-6 w-6 text-primary" />
-          <span className="font-bold text-xl bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
+          <span className="font-bold text-lg md:text-xl bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
             Supervisor
           </span>
         </Link>
 
-        {/* Navigation Links */}
-        <div className="flex gap-1 flex-1">
+        {/* Desktop Navigation Links */}
+        <div className="hidden md:flex gap-1 flex-1">
           {navItems.map((item) => (
             <Link key={item.href} href={item.href}>
               <Button
@@ -60,22 +78,65 @@ export function Navbar() {
           ))}
         </div>
 
-        {/* Theme Toggle */}
-        {mounted && themeContext && (
+        {/* Right side buttons */}
+        <div className="flex items-center gap-2 ml-auto">
+          {/* Theme Toggle */}
+          {mounted && themeContext && (
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={toggleTheme}
+              aria-label="Toggle theme"
+              className="h-10 w-10"
+            >
+              {themeContext.resolvedTheme === 'dark' ? (
+                <Sun className="h-5 w-5" />
+              ) : (
+                <Moon className="h-5 w-5" />
+              )}
+            </Button>
+          )}
+
+          {/* Mobile Menu Button */}
           <Button
             variant="ghost"
             size="icon"
-            onClick={toggleTheme}
-            aria-label="Toggle theme"
+            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+            aria-label="Toggle menu"
+            className="md:hidden h-10 w-10"
           >
-            {themeContext.resolvedTheme === 'dark' ? (
-              <Sun className="h-5 w-5" />
+            {mobileMenuOpen ? (
+              <X className="h-6 w-6" />
             ) : (
-              <Moon className="h-5 w-5" />
+              <Menu className="h-6 w-6" />
             )}
           </Button>
-        )}
+        </div>
       </div>
+
+      {/* Mobile Menu Drawer */}
+      {mobileMenuOpen && (
+        <div className="md:hidden fixed inset-0 top-16 z-50 bg-background/95 backdrop-blur-sm">
+          <div className="container px-4 py-6">
+            <nav className="flex flex-col gap-2">
+              {navItems.map((item) => (
+                <Link key={item.href} href={item.href}>
+                  <Button
+                    variant="ghost"
+                    size="lg"
+                    className={cn(
+                      'w-full justify-start text-lg transition-colors',
+                      pathname === item.href && 'bg-accent text-accent-foreground'
+                    )}
+                  >
+                    {item.label}
+                  </Button>
+                </Link>
+              ))}
+            </nav>
+          </div>
+        </div>
+      )}
     </nav>
   );
 }