feat: comprehensive responsive design implementation for mobile devices
Some checks failed
Build and Push Docker Image to Gitea / build-and-push (push) Failing after 58s
Some checks failed
Build and Push Docker Image to Gitea / build-and-push (push) Failing after 58s
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>
This commit is contained in:
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user