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">
-        <h1 className="text-3xl font-bold">Configuration</h1>
+      <div className="space-y-4 md:space-y-6">
+        <h1 className="text-2xl sm:text-3xl font-bold">Configuration</h1>
         <Card className="border-destructive/50">
-          <CardContent className="p-12 text-center">
-            <AlertCircle className="h-12 w-12 text-destructive mx-auto mb-4" />
-            <h2 className="text-xl font-semibold mb-2">Failed to load configuration</h2>
-            <p className="text-muted-foreground">
+          <CardContent className="p-8 md:p-12 text-center">
+            <AlertCircle className="h-10 w-10 md:h-12 md:w-12 text-destructive mx-auto mb-4" />
+            <h2 className="text-lg md:text-xl font-semibold mb-2">Failed to load configuration</h2>
+            <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="flex items-center justify-between">
+    <div className="space-y-4 md:space-y-6">
+      <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>
-          <p className="text-muted-foreground mt-1">
+          <h1 className="text-2xl sm:text-3xl font-bold">Configuration</h1>
+          <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">
-              <p className="text-muted-foreground">No process configurations found</p>
+            <CardContent className="p-8 md:p-12 text-center">
+              <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">
-        <h1 className="text-3xl font-bold">Process Logs</h1>
+      <div className="space-y-4 md:space-y-6">
+        <h1 className="text-2xl sm:text-3xl font-bold">Process Logs</h1>
         <Card className="border-destructive/50">
-          <CardContent className="p-12 text-center">
-            <AlertCircle className="h-12 w-12 text-destructive mx-auto mb-4" />
-            <h2 className="text-xl font-semibold mb-2">Failed to load processes</h2>
-            <p className="text-muted-foreground">
+          <CardContent className="p-8 md:p-12 text-center">
+            <AlertCircle className="h-10 w-10 md:h-12 md:w-12 text-destructive mx-auto mb-4" />
+            <h2 className="text-lg md:text-xl font-semibold mb-2">Failed to load processes</h2>
+            <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>
-        <p className="text-muted-foreground mt-1">Real-time log viewing and management</p>
+        <h1 className="text-2xl sm:text-3xl font-bold">Process Logs</h1>
+        <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">
-          <CardTitle className="text-lg">Log Controls</CardTitle>
+        <CardHeader className="pb-3 md:pb-4">
+          <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">
-        <h1 className="text-3xl font-bold">Processes</h1>
-        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+      <div className="space-y-4 md:space-y-6">
+        <h1 className="text-2xl sm:text-3xl font-bold">Processes</h1>
+        <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">
-        <h1 className="text-3xl font-bold">Processes</h1>
-        <div className="flex flex-col items-center justify-center p-12 text-center">
-          <AlertCircle className="h-12 w-12 text-destructive mb-4" />
-          <h2 className="text-xl font-semibold mb-2">Failed to load processes</h2>
-          <p className="text-muted-foreground mb-4">
+      <div className="space-y-4 md:space-y-6">
+        <h1 className="text-2xl sm:text-3xl font-bold">Processes</h1>
+        <div className="flex flex-col items-center justify-center p-8 md:p-12 text-center">
+          <AlertCircle className="h-10 w-10 md:h-12 md:w-12 text-destructive mb-4" />
+          <h2 className="text-lg md:text-xl font-semibold mb-2">Failed to load processes</h2>
+          <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">
-        <div className="flex items-center gap-4">
+      {/* Header - responsive layout */}
+      <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>
-            <p className="text-muted-foreground mt-1">
+            <h1 className="text-2xl sm:text-3xl font-bold">Processes</h1>
+            <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()}>
-            <RefreshCw className="h-4 w-4 mr-2" />
-            Refresh
+          <Button variant="outline" size="sm" onClick={() => refetch()}>
+            <RefreshCw className="h-4 w-4" />
+            <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">
-          <p className="text-muted-foreground">No processes configured</p>
+        <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-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">
-          <p className="text-muted-foreground">No processes match the current filters</p>
+        <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-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;