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>

app/config/page.tsx

@@ -12,13 +12,13 @@ export default function ConfigPage() {
 
   if (isError) {
     return (
-      <div className="space-y-6">
+      <div className="space-y-4 md:space-y-6">
-        <h1 className="text-3xl font-bold">Configuration</h1>
+        <h1 className="text-2xl sm:text-3xl font-bold">Configuration</h1>
         <Card className="border-destructive/50">
-          <CardContent className="p-12 text-center">
+          <CardContent className="p-8 md:p-12 text-center">
-            <AlertCircle className="h-12 w-12 text-destructive mx-auto mb-4" />
+            <AlertCircle className="h-10 w-10 md:h-12 md:w-12 text-destructive mx-auto mb-4" />
-            <h2 className="text-xl font-semibold mb-2">Failed to load configuration</h2>
+            <h2 className="text-lg md:text-xl font-semibold mb-2">Failed to load configuration</h2>
-            <p className="text-muted-foreground">
+            <p className="text-sm md:text-base text-muted-foreground">
               Could not connect to Supervisor. Please check your configuration.
             </p>
           </CardContent>
@@ -28,11 +28,11 @@ export default function ConfigPage() {
   }
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-4 md:space-y-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
         <div>
-          <h1 className="text-3xl font-bold">Configuration</h1>
+          <h1 className="text-2xl sm:text-3xl font-bold">Configuration</h1>
-          <p className="text-muted-foreground mt-1">
+          <p className="text-sm md:text-base text-muted-foreground mt-1">
             Manage process configurations and supervisor settings
           </p>
         </div>
@@ -65,8 +65,8 @@ export default function ConfigPage() {
           <ConfigTable configs={configs} />
         ) : (
           <Card>
-            <CardContent className="p-12 text-center">
+            <CardContent className="p-8 md:p-12 text-center">
-              <p className="text-muted-foreground">No process configurations found</p>
+              <p className="text-sm md:text-base text-muted-foreground">No process configurations found</p>
             </CardContent>
           </Card>
         )}

app/layout.tsx

@@ -12,6 +12,12 @@ const inter = Inter({
 export const metadata: Metadata = {
   title: 'Supervisor UI',
   description: 'Modern web interface for Supervisor process management',
+  viewport: {
+    width: 'device-width',
+    initialScale: 1,
+    maximumScale: 5,
+    userScalable: true,
+  },
 };
 
 // Force dynamic rendering

app/logs/page.tsx

@@ -76,13 +76,13 @@ export default function LogsPage() {
 
   if (processesError) {
     return (
-      <div className="space-y-6">
+      <div className="space-y-4 md:space-y-6">
-        <h1 className="text-3xl font-bold">Process Logs</h1>
+        <h1 className="text-2xl sm:text-3xl font-bold">Process Logs</h1>
         <Card className="border-destructive/50">
-          <CardContent className="p-12 text-center">
+          <CardContent className="p-8 md:p-12 text-center">
-            <AlertCircle className="h-12 w-12 text-destructive mx-auto mb-4" />
+            <AlertCircle className="h-10 w-10 md:h-12 md:w-12 text-destructive mx-auto mb-4" />
-            <h2 className="text-xl font-semibold mb-2">Failed to load processes</h2>
+            <h2 className="text-lg md:text-xl font-semibold mb-2">Failed to load processes</h2>
-            <p className="text-muted-foreground">
+            <p className="text-sm md:text-base text-muted-foreground">
               Could not connect to Supervisor. Please check your configuration.
             </p>
           </CardContent>
@@ -92,20 +92,20 @@ export default function LogsPage() {
   }
 
   return (
-    <div className="space-y-6 h-[calc(100vh-12rem)] flex flex-col">
+    <div className="space-y-4 md:space-y-6 h-[calc(100vh-10rem)] md:h-[calc(100vh-12rem)] flex flex-col">
       <div className="flex-shrink-0">
-        <h1 className="text-3xl font-bold">Process Logs</h1>
+        <h1 className="text-2xl sm:text-3xl font-bold">Process Logs</h1>
-        <p className="text-muted-foreground mt-1">Real-time log viewing and management</p>
+        <p className="text-sm md:text-base text-muted-foreground mt-1">Real-time log viewing and management</p>
       </div>
 
       {/* Controls */}
       <Card className="flex-shrink-0">
-        <CardHeader className="pb-4">
+        <CardHeader className="pb-3 md:pb-4">
-          <CardTitle className="text-lg">Log Controls</CardTitle>
+          <CardTitle className="text-base md:text-lg">Log Controls</CardTitle>
         </CardHeader>
-        <CardContent className="space-y-4">
+        <CardContent className="space-y-3 md:space-y-4">
           {/* Process Selector */}
-          <div className="flex flex-wrap gap-4">
+          <div className="flex flex-col sm:flex-row gap-3 sm:gap-4">
             <div className="flex-1 min-w-[200px]">
               <label className="block text-sm font-medium mb-2">Select Process</label>
               <select
@@ -131,6 +131,7 @@ export default function LogsPage() {
                     variant={logType === 'stdout' ? 'default' : 'outline'}
                     size="sm"
                     onClick={() => setLogType('stdout')}
+                    className="flex-1 sm:flex-initial"
                   >
                     Stdout
                   </Button>
@@ -138,6 +139,7 @@ export default function LogsPage() {
                     variant={logType === 'stderr' ? 'default' : 'outline'}
                     size="sm"
                     onClick={() => setLogType('stderr')}
+                    className="flex-1 sm:flex-initial"
                   >
                     Stderr
                   </Button>
@@ -147,7 +149,7 @@ export default function LogsPage() {
           </div>
 
           {/* Search and Controls */}
-          <div className="flex flex-wrap gap-4 items-end">
+          <div className="flex flex-col sm:flex-row flex-wrap gap-3 sm:gap-4 items-stretch sm:items-end">
             <LogSearch value={searchTerm} onChange={setSearchTerm} />
             <LogControls
               isPlaying={isPlaying}

app/page.tsx

@@ -39,12 +39,12 @@ export default function HomePage() {
   return (
     <div className="space-y-8 animate-fade-in">
       {/* Header */}
-      <div className="flex items-start justify-between">
+      <div className="flex flex-col sm:flex-row items-start justify-between gap-4">
         <div>
-          <h1 className="text-4xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
+          <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
             Supervisor Dashboard
           </h1>
-          <p className="text-muted-foreground mt-2">
+          <p className="text-sm md:text-base text-muted-foreground mt-2">
             Monitor and manage your processes in real-time
           </p>
         </div>

app/processes/page.tsx

@@ -183,9 +183,9 @@ export default function ProcessesPage() {
 
   if (isLoading) {
     return (
-      <div className="space-y-6">
+      <div className="space-y-4 md:space-y-6">
-        <h1 className="text-3xl font-bold">Processes</h1>
+        <h1 className="text-2xl sm:text-3xl font-bold">Processes</h1>
-        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        <div className="grid gap-4 md:gap-6 md:grid-cols-2 lg:grid-cols-3">
           {[1, 2, 3, 4, 5, 6].map((i) => (
             <div key={i} className="h-64 bg-muted rounded-lg animate-pulse" />
           ))}
@@ -196,12 +196,12 @@ export default function ProcessesPage() {
 
   if (isError) {
     return (
-      <div className="space-y-6">
+      <div className="space-y-4 md:space-y-6">
-        <h1 className="text-3xl font-bold">Processes</h1>
+        <h1 className="text-2xl sm:text-3xl font-bold">Processes</h1>
-        <div className="flex flex-col items-center justify-center p-12 text-center">
+        <div className="flex flex-col items-center justify-center p-8 md:p-12 text-center">
-          <AlertCircle className="h-12 w-12 text-destructive mb-4" />
+          <AlertCircle className="h-10 w-10 md:h-12 md:w-12 text-destructive mb-4" />
-          <h2 className="text-xl font-semibold mb-2">Failed to load processes</h2>
+          <h2 className="text-lg md:text-xl font-semibold mb-2">Failed to load processes</h2>
-          <p className="text-muted-foreground mb-4">
+          <p className="text-sm md:text-base text-muted-foreground mb-4">
             Could not connect to Supervisor. Please check your configuration.
           </p>
           <Button onClick={() => refetch()}>
@@ -215,11 +215,12 @@ export default function ProcessesPage() {
 
   return (
     <div className="space-y-6 animate-fade-in">
-      <div className="flex items-center justify-between">
+      {/* Header - responsive layout */}
-        <div className="flex items-center gap-4">
+      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+        <div className="flex items-start gap-4 flex-wrap">
           <div>
-            <h1 className="text-3xl font-bold">Processes</h1>
+            <h1 className="text-2xl sm:text-3xl font-bold">Processes</h1>
-            <p className="text-muted-foreground mt-1">
+            <p className="text-sm md:text-base text-muted-foreground mt-1">
               {displayedProcesses.length} of {processes?.length ?? 0} processes
               {displayedProcesses.length !== (processes?.length ?? 0) && ' (filtered)'}
             </p>
@@ -230,7 +231,9 @@ export default function ProcessesPage() {
             onReconnect={reconnect}
           />
         </div>
-        <div className="flex items-center gap-4">
+
+        {/* Controls - stack on mobile, row on desktop */}
+        <div className="flex flex-wrap items-center gap-2">
           {viewMode === 'flat' && displayedProcesses.length > 0 && (
             <Button
               variant="outline"
@@ -239,13 +242,15 @@ export default function ProcessesPage() {
               className="gap-2"
             >
               <CheckSquare className="h-4 w-4" />
-              {selectedProcesses.size === displayedProcesses.length ? 'Deselect All' : 'Select All'}
+              <span className="hidden sm:inline">
+                {selectedProcesses.size === displayedProcesses.length ? 'Deselect All' : 'Select All'}
+              </span>
             </Button>
           )}
           <GroupSelector viewMode={viewMode} onViewModeChange={setViewMode} />
-          <Button variant="outline" onClick={() => refetch()}>
+          <Button variant="outline" size="sm" onClick={() => refetch()}>
-            <RefreshCw className="h-4 w-4 mr-2" />
+            <RefreshCw className="h-4 w-4" />
-            Refresh
+            <span className="hidden sm:inline ml-2">Refresh</span>
           </Button>
           <Button
             variant="outline"
@@ -265,17 +270,17 @@ export default function ProcessesPage() {
 
       {/* Process Display */}
       {processes && processes.length === 0 ? (
-        <div className="flex flex-col items-center justify-center p-12 text-center border-2 border-dashed rounded-lg">
+        <div className="flex flex-col items-center justify-center p-8 md:p-12 text-center border-2 border-dashed rounded-lg">
-          <p className="text-muted-foreground">No processes configured</p>
+          <p className="text-sm md:text-base text-muted-foreground">No processes configured</p>
         </div>
       ) : displayedProcesses.length === 0 ? (
-        <div className="flex flex-col items-center justify-center p-12 text-center border-2 border-dashed rounded-lg">
+        <div className="flex flex-col items-center justify-center p-8 md:p-12 text-center border-2 border-dashed rounded-lg">
-          <p className="text-muted-foreground">No processes match the current filters</p>
+          <p className="text-sm md:text-base text-muted-foreground">No processes match the current filters</p>
         </div>
       ) : viewMode === 'grouped' ? (
         <GroupView processes={displayedProcesses} />
       ) : (
-        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        <div className="grid gap-4 md:gap-6 md:grid-cols-2 lg:grid-cols-3">
           {displayedProcesses.map((process, index) => {
             const fullName = `${process.group}:${process.name}`;
             const isFocused = index === focusedIndex;

components/config/ConfigTable.tsx

@@ -57,72 +57,123 @@ export function ConfigTable({ configs }: ConfigTableProps) {
   };
 
   return (
-    <Card>
+    <>
-      <CardContent className="p-0">
+      {/* Desktop Table View - hidden on mobile */}
-        <div className="overflow-x-auto">
+      <Card className="hidden md:block">
-          <table className="w-full">
+        <CardContent className="p-0">
-            <thead className="bg-muted/50 border-b">
+          <div className="overflow-x-auto">
-              <tr>
+            <table className="w-full">
-                <th
+              <thead className="bg-muted/50 border-b">
-                  className="text-left p-3 cursor-pointer hover:bg-muted transition-colors"
+                <tr>
-                  onClick={() => handleSort('group')}
+                  <th
-                >
+                    className="text-left p-3 cursor-pointer hover:bg-muted transition-colors"
-                  Group <SortIcon field="group" />
+                    onClick={() => handleSort('group')}
-                </th>
+                  >
-                <th
+                    Group <SortIcon field="group" />
-                  className="text-left p-3 cursor-pointer hover:bg-muted transition-colors"
+                  </th>
-                  onClick={() => handleSort('name')}
+                  <th
-                >
+                    className="text-left p-3 cursor-pointer hover:bg-muted transition-colors"
-                  Name <SortIcon field="name" />
+                    onClick={() => handleSort('name')}
-                </th>
+                  >
-                <th
+                    Name <SortIcon field="name" />
-                  className="text-left p-3 cursor-pointer hover:bg-muted transition-colors"
+                  </th>
-                  onClick={() => handleSort('command')}
+                  <th
-                >
+                    className="text-left p-3 cursor-pointer hover:bg-muted transition-colors"
-                  Command <SortIcon field="command" />
+                    onClick={() => handleSort('command')}
-                </th>
+                  >
-                <th className="text-left p-3">Directory</th>
+                    Command <SortIcon field="command" />
-                <th
+                  </th>
-                  className="text-center p-3 cursor-pointer hover:bg-muted transition-colors"
+                  <th className="text-left p-3">Directory</th>
-                  onClick={() => handleSort('autostart')}
+                  <th
-                >
+                    className="text-center p-3 cursor-pointer hover:bg-muted transition-colors"
-                  Autostart <SortIcon field="autostart" />
+                    onClick={() => handleSort('autostart')}
-                </th>
+                  >
-                <th className="text-center p-3">Priority</th>
+                    Autostart <SortIcon field="autostart" />
-                <th className="text-center p-3">Processes</th>
+                  </th>
-              </tr>
+                  <th className="text-center p-3">Priority</th>
-            </thead>
+                  <th className="text-center p-3">Processes</th>
-            <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>
-              ))}
+              </thead>
-            </tbody>
+              <tbody>
-          </table>
+                {sortedConfigs.map((config, index) => (
-        </div>
+                  <tr
-      </CardContent>
+                    key={`${config.group}:${config.name}`}
-    </Card>
+                    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 */}
+        {/* Desktop Navigation Links */}
-        <div className="flex gap-1 flex-1">
+        <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 */}
+        {/* Right side buttons */}
-        {mounted && themeContext && (
+        <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}
+            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-            aria-label="Toggle theme"
+            aria-label="Toggle menu"
+            className="md:hidden h-10 w-10"
           >
-            {themeContext.resolvedTheme === 'dark' ? (
+            {mobileMenuOpen ? (
-              <Sun className="h-5 w-5" />
+              <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 flex-col sm:flex-row items-stretch sm:items-center gap-3 sm:gap-4 p-4">
-          <div className="flex items-center gap-2">
+          {/* Selection count */}
-            <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center">
+          <div className="flex items-center justify-between sm:justify-start gap-2">
-              <span className="text-sm font-bold text-primary">{selectedCount}</span>
+            <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">
+            {/* Close button on mobile - inline with count */}
-              {selectedCount} {selectedCount === 1 ? 'process' : 'processes'} selected
+            <Button
-            </span>
+              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-9 md:h-8 px-3 text-sm': size === 'sm',
-            'h-10 px-4': size === 'md',
+            '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}
     />
   )