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/config/ConfigTable.tsx

@@ -57,72 +57,123 @@ export function ConfigTable({ configs }: ConfigTableProps) {
   };
 
   return (
-    <Card>
-      <CardContent className="p-0">
-        <div className="overflow-x-auto">
-          <table className="w-full">
-            <thead className="bg-muted/50 border-b">
-              <tr>
-                <th
-                  className="text-left p-3 cursor-pointer hover:bg-muted transition-colors"
-                  onClick={() => handleSort('group')}
-                >
-                  Group <SortIcon field="group" />
-                </th>
-                <th
-                  className="text-left p-3 cursor-pointer hover:bg-muted transition-colors"
-                  onClick={() => handleSort('name')}
-                >
-                  Name <SortIcon field="name" />
-                </th>
-                <th
-                  className="text-left p-3 cursor-pointer hover:bg-muted transition-colors"
-                  onClick={() => handleSort('command')}
-                >
-                  Command <SortIcon field="command" />
-                </th>
-                <th className="text-left p-3">Directory</th>
-                <th
-                  className="text-center p-3 cursor-pointer hover:bg-muted transition-colors"
-                  onClick={() => handleSort('autostart')}
-                >
-                  Autostart <SortIcon field="autostart" />
-                </th>
-                <th className="text-center p-3">Priority</th>
-                <th className="text-center p-3">Processes</th>
-              </tr>
-            </thead>
-            <tbody>
-              {sortedConfigs.map((config, index) => (
-                <tr
-                  key={`${config.group}:${config.name}`}
-                  className={cn(
-                    'border-b hover:bg-muted/20 transition-colors',
-                    index % 2 === 0 && 'bg-muted/5'
-                  )}
-                >
-                  <td className="p-3 font-medium">{config.group}</td>
-                  <td className="p-3">{config.name}</td>
-                  <td className="p-3">
-                    <code className="text-xs bg-muted px-2 py-1 rounded">{config.command}</code>
-                  </td>
-                  <td className="p-3 text-sm text-muted-foreground">{config.directory}</td>
-                  <td className="p-3 text-center">
-                    <span
-                      className={cn(
-                        'inline-block w-3 h-3 rounded-full',
-                        config.autostart ? 'bg-success' : 'bg-muted'
-                      )}
-                    />
-                  </td>
-                  <td className="p-3 text-center text-sm">{config.priority}</td>
-                  <td className="p-3 text-center text-sm">{config.numprocs}</td>
+    <>
+      {/* Desktop Table View - hidden on mobile */}
+      <Card className="hidden md:block">
+        <CardContent className="p-0">
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead className="bg-muted/50 border-b">
+                <tr>
+                  <th
+                    className="text-left p-3 cursor-pointer hover:bg-muted transition-colors"
+                    onClick={() => handleSort('group')}
+                  >
+                    Group <SortIcon field="group" />
+                  </th>
+                  <th
+                    className="text-left p-3 cursor-pointer hover:bg-muted transition-colors"
+                    onClick={() => handleSort('name')}
+                  >
+                    Name <SortIcon field="name" />
+                  </th>
+                  <th
+                    className="text-left p-3 cursor-pointer hover:bg-muted transition-colors"
+                    onClick={() => handleSort('command')}
+                  >
+                    Command <SortIcon field="command" />
+                  </th>
+                  <th className="text-left p-3">Directory</th>
+                  <th
+                    className="text-center p-3 cursor-pointer hover:bg-muted transition-colors"
+                    onClick={() => handleSort('autostart')}
+                  >
+                    Autostart <SortIcon field="autostart" />
+                  </th>
+                  <th className="text-center p-3">Priority</th>
+                  <th className="text-center p-3">Processes</th>
                 </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </CardContent>
-    </Card>
+              </thead>
+              <tbody>
+                {sortedConfigs.map((config, index) => (
+                  <tr
+                    key={`${config.group}:${config.name}`}
+                    className={cn(
+                      'border-b hover:bg-muted/20 transition-colors',
+                      index % 2 === 0 && 'bg-muted/5'
+                    )}
+                  >
+                    <td className="p-3 font-medium">{config.group}</td>
+                    <td className="p-3">{config.name}</td>
+                    <td className="p-3">
+                      <code className="text-xs bg-muted px-2 py-1 rounded">{config.command}</code>
+                    </td>
+                    <td className="p-3 text-sm text-muted-foreground">{config.directory}</td>
+                    <td className="p-3 text-center">
+                      <span
+                        className={cn(
+                          'inline-block w-3 h-3 rounded-full',
+                          config.autostart ? 'bg-success' : 'bg-muted'
+                        )}
+                      />
+                    </td>
+                    <td className="p-3 text-center text-sm">{config.priority}</td>
+                    <td className="p-3 text-center text-sm">{config.numprocs}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Mobile Card View - visible on mobile only */}
+      <div className="md:hidden space-y-4">
+        {sortedConfigs.map((config) => (
+          <Card key={`${config.group}:${config.name}`}>
+            <CardContent className="space-y-3">
+              <div className="flex items-start justify-between">
+                <div>
+                  <div className="font-medium text-lg">{config.name}</div>
+                  <div className="text-sm text-muted-foreground">{config.group}</div>
+                </div>
+                <span
+                  className={cn(
+                    'inline-block w-3 h-3 rounded-full mt-1',
+                    config.autostart ? 'bg-success' : 'bg-muted'
+                  )}
+                  title={config.autostart ? 'Autostart enabled' : 'Autostart disabled'}
+                />
+              </div>
+
+              <div className="space-y-2 text-sm">
+                <div>
+                  <span className="text-muted-foreground">Command:</span>
+                  <code className="block mt-1 text-xs bg-muted px-2 py-1 rounded break-all">
+                    {config.command}
+                  </code>
+                </div>
+
+                <div>
+                  <span className="text-muted-foreground">Directory:</span>
+                  <div className="mt-1 text-xs break-all">{config.directory}</div>
+                </div>
+
+                <div className="flex gap-4 pt-2">
+                  <div>
+                    <span className="text-muted-foreground">Priority:</span>
+                    <span className="ml-2 font-mono">{config.priority}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground">Processes:</span>
+                    <span className="ml-2 font-mono">{config.numprocs}</span>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </>
   );
 }

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>
   );
 }

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>

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>
 

components/process/SignalSender.tsx

@@ -54,7 +54,7 @@ export function SignalSender({ processName, onClose }: SignalSenderProps) {
   const isDangerous = signal && ['TERM', 'KILL', 'QUIT'].includes(signal.toUpperCase());
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm p-4">
       <Card className="w-full max-w-lg shadow-2xl">
         <CardHeader>
           <div className="flex items-center justify-between">

components/process/StdinInput.tsx

@@ -42,7 +42,7 @@ export function StdinInput({ processName, onClose }: StdinInputProps) {
   };
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm p-4">
       <Card className="w-full max-w-2xl shadow-2xl">
         <CardHeader>
           <div className="flex items-center justify-between">

components/ui/KeyboardShortcutsHelp.tsx

@@ -47,7 +47,7 @@ const SHORTCUT_GROUPS: ShortcutGroup[] = [
 
 export function KeyboardShortcutsHelp({ onClose }: KeyboardShortcutsHelpProps) {
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm p-4">
       <Card className="w-full max-w-2xl shadow-2xl max-h-[80vh] overflow-y-auto">
         <CardHeader>
           <div className="flex items-center justify-between">

components/ui/button.tsx

@@ -26,10 +26,10 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
               variant === 'outline',
           },
           {
-            'h-8 px-3 text-sm': size === 'sm',
-            'h-10 px-4': size === 'md',
+            'h-9 md:h-8 px-3 text-sm': size === 'sm',
+            'h-11 md:h-10 px-4': size === 'md',
             'h-12 px-6 text-lg': size === 'lg',
-            'h-10 w-10': size === 'icon',
+            'h-11 w-11 md:h-10 md:w-10': size === 'icon',
           },
           className
         )}

components/ui/card.tsx

@@ -19,7 +19,7 @@ const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn('flex flex-col space-y-1.5 p-6', className)}
+      className={cn('flex flex-col space-y-1.5 p-4 md:p-6', className)}
       {...props}
     />
   )
@@ -30,7 +30,7 @@ const CardTitle = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLHeadingEle
   ({ className, ...props }, ref) => (
     <h3
       ref={ref}
-      className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
+      className={cn('text-xl md:text-2xl font-semibold leading-none tracking-tight', className)}
       {...props}
     />
   )
@@ -50,7 +50,7 @@ CardDescription.displayName = 'CardDescription';
 
 const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+    <div ref={ref} className={cn('p-4 md:p-6 pt-0', className)} {...props} />
   )
 );
 CardContent.displayName = 'CardContent';
@@ -59,7 +59,7 @@ const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn('flex items-center p-6 pt-0', className)}
+      className={cn('flex items-center p-4 md:p-6 pt-0', className)}
       {...props}
     />
   )