valknar/supervisor-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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
Details

Browse Source 
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:
Sebastian Krüger
2025-11-23 21:21:22 +01:00
parent 54eb14bf20
commit 06dd1c20d0
15 changed files with 314 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/config/page.tsx
View File

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

6
app/layout.tsx
View File

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

30
app/logs/page.tsx
View File

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

6
app/page.tsx
View File

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

51
app/processes/page.tsx
View File

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

183
components/config/ConfigTable.tsx
View File

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

4
components/layout/AppLayout.tsx
View File

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

89
components/layout/Navbar.tsx
View File

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

50
components/process/BatchActions.tsx
View File

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

17
components/process/ProcessCard.tsx
View File

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

2
components/process/SignalSender.tsx
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">

2
components/process/StdinInput.tsx
View File

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

2
components/ui/KeyboardShortcutsHelp.tsx
View File

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

6
components/ui/button.tsx
View File

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

8
components/ui/card.tsx
View File

@@ -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}
/>
)