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

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:
2025-11-23 21:21:22 +01:00
parent 54eb14bf20
commit 06dd1c20d0
15 changed files with 314 additions and 166 deletions

View File

@@ -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">