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

fix: resolve 7 critical UI issues - charts, layouts, and mobile responsiveness
All checks were successful
Build and Push Docker Image to Gitea / build-and-push (push) Successful in 1m8s
Details

Browse Source 
This commit fixes all reported UI issues across the dashboard:

## Issue 1: Chart Colors and Tooltips ✅
- Create chartColors utility with static hex colors for Recharts compatibility
- Replace CSS variable colors (hsl(var(--))) with hex colors in all charts
- Add custom tooltip styling with dark background and white text for readability
- Fixes: ProcessStateChart, ProcessUptimeChart, GroupStatistics

## Issue 2: Process Card Heights ✅
- Add h-full and flex flex-col to ProcessCard component
- Add auto-rows-fr to process grid layout
- Ensures all cards have consistent heights regardless of content

## Issue 3: Batch Actions Button Labels ✅
- Simplify button labels from "Start Selected" to "Start"
- Remove "Stop Selected" to "Stop", "Restart Selected" to "Restart"
- Labels now always visible on all screen sizes

## Issue 4: Mobile Menu Background ✅
- Change mobile menu from semi-transparent (bg-background/95) to solid (bg-background)
- Removes backdrop blur for better visibility

## Issue 5: Group Header Button Overflow ✅
- Add flex-wrap to button container in GroupCard
- Stack buttons vertically on mobile (flex-col md:flex-row)
- Buttons take full width on mobile, auto width on desktop

## Issue 6: Logs Search Input Overflow ✅
- Change LogSearch from max-w-md to w-full sm:flex-1 sm:max-w-md
- Search input now full width on mobile, constrained on desktop

## Issue 7: Logs Action Button Overflow ✅
- Add flex-wrap to LogControls button container
- Buttons wrap to new row when space is limited

🤖 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:52:35 +01:00
parent 791c99097c
commit dda335d501
11 changed files with 105 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/processes/page.tsx
View File

@@ -280,7 +280,7 @@ export default function ProcessesPage() {
) : viewMode === 'grouped' ? (
<GroupView processes={displayedProcesses} />
) : (
<div className="grid gap-4 md: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 auto-rows-fr">
{displayedProcesses.map((process, index) => {
const fullName = `${process.group}:${process.name}`;
const isFocused = index === focusedIndex;

17
components/charts/GroupStatistics.tsx
View File

@@ -3,6 +3,7 @@
import { ProcessInfo, ProcessState } from '@/lib/supervisor/types';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
import { chartColors } from '@/lib/utils/chartColors';
interface GroupStatisticsProps {
processes: ProcessInfo[];
@@ -50,11 +51,19 @@ export function GroupStatistics({ processes }: GroupStatisticsProps) {
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Tooltip
contentStyle={{
backgroundColor: 'rgba(0, 0, 0, 0.9)',
border: 'none',
borderRadius: '8px',
color: '#ffffff',
}}
itemStyle={{ color: '#ffffff' }}
/>
<Legend />
<Bar dataKey="running" stackId="a" fill="hsl(var(--success))" name="Running" />
<Bar dataKey="stopped" stackId="a" fill="hsl(var(--muted-foreground))" name="Stopped" />
<Bar dataKey="fatal" stackId="a" fill="hsl(var(--destructive))" name="Fatal" />
<Bar dataKey="running" stackId="a" fill={chartColors.running} name="Running" />
<Bar dataKey="stopped" stackId="a" fill={chartColors.stopped} name="Stopped" />
<Bar dataKey="fatal" stackId="a" fill={chartColors.fatal} name="Fatal" />
</BarChart>
</ResponsiveContainer>
</CardContent>

23
components/charts/ProcessStateChart.tsx
View File

@@ -3,6 +3,7 @@
import { ProcessInfo, ProcessState } from '@/lib/supervisor/types';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from 'recharts';
import { chartColors } from '@/lib/utils/chartColors';
interface ProcessStateChartProps {
processes: ProcessInfo[];
@@ -23,12 +24,12 @@ export function ProcessStateChart({ processes }: ProcessStateChartProps) {
);
const data = [
{ name: 'Running', value: stateCounts.running, color: 'hsl(var(--success))' },
{ name: 'Stopped', value: stateCounts.stopped, color: 'hsl(var(--muted-foreground))' },
{ name: 'Fatal', value: stateCounts.fatal, color: 'hsl(var(--destructive))' },
{ name: 'Starting', value: stateCounts.starting, color: 'hsl(var(--warning))' },
{ name: 'Stopping', value: stateCounts.stopping, color: 'hsl(var(--accent))' },
{ name: 'Other', value: stateCounts.other, color: 'hsl(var(--muted))' },
{ name: 'Running', value: stateCounts.running, color: chartColors.running },
{ name: 'Stopped', value: stateCounts.stopped, color: chartColors.stopped },
{ name: 'Fatal', value: stateCounts.fatal, color: chartColors.fatal },
{ name: 'Starting', value: stateCounts.starting, color: chartColors.starting },
{ name: 'Stopping', value: stateCounts.stopping, color: chartColors.stopping },
{ name: 'Other', value: stateCounts.other, color: chartColors.muted },
].filter((item) => item.value > 0);
return (
@@ -53,7 +54,15 @@ export function ProcessStateChart({ processes }: ProcessStateChartProps) {
<Cell key={`cell-${index}`} fill={entry.color} />
))}
</Pie>
<Tooltip />
<Tooltip
contentStyle={{
backgroundColor: 'rgba(0, 0, 0, 0.9)',
border: 'none',
borderRadius: '8px',
color: '#ffffff',
}}
itemStyle={{ color: '#ffffff' }}
/>
<Legend />
</PieChart>
</ResponsiveContainer>

10
components/charts/ProcessUptimeChart.tsx
View File

@@ -3,6 +3,7 @@
import { ProcessInfo, ProcessState } from '@/lib/supervisor/types';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
import { chartColors } from '@/lib/utils/chartColors';
interface ProcessUptimeChartProps {
processes: ProcessInfo[];
@@ -56,9 +57,16 @@ export function ProcessUptimeChart({ processes }: ProcessUptimeChartProps) {
const minutes = Math.floor((value - hours) * 60);
return `${hours}h ${minutes}m`;
}}
contentStyle={{
backgroundColor: 'rgba(0, 0, 0, 0.9)',
border: 'none',
borderRadius: '8px',
color: '#ffffff',
}}
itemStyle={{ color: '#ffffff' }}
/>
<Legend />
<Bar dataKey="uptime" fill="hsl(var(--success))" name="Uptime (hours)" />
<Bar dataKey="uptime" fill={chartColors.success} name="Uptime (hours)" />
</BarChart>
</ResponsiveContainer>
</CardContent>

10
components/groups/GroupCard.tsx
View File

@@ -49,7 +49,7 @@ export function GroupCard({ groupName, processes }: GroupCardProps) {
return (
<Card className="overflow-hidden">
<CardHeader className="pb-3">
<div className="flex items-center justify-between">
<div className="flex flex-col md:flex-row items-start md:items-center gap-3 md:justify-between">
<div className="flex items-center gap-3 flex-1">
<Button
variant="ghost"
@@ -80,13 +80,13 @@ export function GroupCard({ groupName, processes }: GroupCardProps) {
</div>
</div>
<div className="flex gap-2">
<div className="flex flex-wrap gap-2 w-full md:w-auto">
<Button
variant="success"
size="sm"
onClick={handleStart}
disabled={isLoading || stats.stopped === 0}
className="gap-2"
className="gap-2 flex-1 sm:flex-initial"
>
<Play className="h-4 w-4" />
Start All
@@ -96,7 +96,7 @@ export function GroupCard({ groupName, processes }: GroupCardProps) {
size="sm"
onClick={handleStop}
disabled={isLoading || stats.running === 0}
className="gap-2"
className="gap-2 flex-1 sm:flex-initial"
>
<Square className="h-4 w-4" />
Stop All
@@ -106,7 +106,7 @@ export function GroupCard({ groupName, processes }: GroupCardProps) {
size="sm"
onClick={handleRestart}
disabled={isLoading}
className="gap-2"
className="gap-2 flex-1 sm:flex-initial"
>
<RotateCw className={cn('h-4 w-4', isLoading && 'animate-spin')} />
Restart All

2
components/layout/Navbar.tsx
View File

@@ -116,7 +116,7 @@ export function Navbar() {
{/* Mobile Menu Drawer */}
{mobileMenuOpen && (
<div className="md:hidden fixed inset-0 top-16 z-50 bg-background/95 backdrop-blur-sm">
<div className="md:hidden fixed inset-0 top-16 z-50 bg-background">
<div className="container px-4 py-6">
<nav className="flex flex-col gap-2">
{navItems.map((item) => (

2
components/logs/LogControls.tsx
View File

@@ -26,7 +26,7 @@ export function LogControls({
isClearing = false,
}: LogControlsProps) {
return (
<div className="flex items-center gap-2">
<div className="flex flex-wrap items-center gap-2">
<Button
variant={isPlaying ? 'destructive' : 'success'}
size="sm"

2
components/logs/LogSearch.tsx
View File

@@ -12,7 +12,7 @@ interface LogSearchProps {
export function LogSearch({ value, onChange, placeholder = 'Search logs...' }: LogSearchProps) {
return (
<div className="relative flex-1 max-w-md">
<div className="relative w-full sm:flex-1 sm:max-w-md">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input
type="text"

6
components/process/BatchActions.tsx
View File

@@ -82,7 +82,7 @@ export function BatchActions({ selectedProcesses, processes, onClearSelection }:
className="gap-2 flex-1 sm:flex-initial"
>
<Play className="h-4 w-4" />
<span className="hidden sm:inline">Start Selected</span>
<span>Start</span>
</Button>
<Button
variant="destructive"
@@ -92,7 +92,7 @@ export function BatchActions({ selectedProcesses, processes, onClearSelection }:
className="gap-2 flex-1 sm:flex-initial"
>
<Square className="h-4 w-4" />
<span className="hidden sm:inline">Stop Selected</span>
<span>Stop</span>
</Button>
<Button
variant="outline"
@@ -102,7 +102,7 @@ export function BatchActions({ selectedProcesses, processes, onClearSelection }:
className="gap-2 flex-1 sm:flex-initial"
>
<RotateCw className={cn('h-4 w-4', isLoading && 'animate-spin')} />
<span className="hidden sm:inline">Restart Selected</span>
<span>Restart</span>
</Button>
</div>

4
components/process/ProcessCard.tsx
View File

@@ -42,7 +42,7 @@ export function ProcessCard({ process, isSelected = false, isFocused = false, on
return (
<Card
className={cn(
'transition-all hover:shadow-lg animate-fade-in',
'transition-all hover:shadow-lg animate-fade-in h-full flex flex-col',
onSelectionChange && 'cursor-pointer',
isSelected && 'ring-2 ring-primary ring-offset-2',
isFocused && 'ring-2 ring-accent ring-offset-2 shadow-xl'
@@ -82,7 +82,7 @@ export function ProcessCard({ process, isSelected = false, isFocused = false, on
</div>
</CardHeader>
<CardContent className="space-y-4">
<CardContent className="space-y-4 flex-1 flex flex-col justify-between">
{/* Metrics */}
<div className="grid grid-cols-2 gap-3 text-sm">
<div>

53
lib/utils/chartColors.ts Normal file
View File

@@ -0,0 +1,53 @@
/**
* Chart color utilities for Recharts compatibility
*
* Recharts doesn't properly parse CSS custom properties or OKLCH colors,
* so we provide static hex colors that work reliably across themes.
*/
export const chartColors = {
primary: '#3b82f6', // Blue
success: '#22c55e', // Green
warning: '#eab308', // Yellow
destructive: '#ef4444', // Red
accent: '#06b6d4', // Cyan
muted: '#9ca3af', // Gray
running: '#22c55e', // Same as success
stopped: '#6b7280', // Darker gray
fatal: '#ef4444', // Same as destructive
starting: '#eab308', // Same as warning
backoff: '#f97316', // Orange
stopping: '#fb923c', // Light orange
exited: '#9ca3af', // Same as muted
unknown: '#64748b', // Slate
};
/**
* Get color for process state
*/
export function getStateColor(state: string): string {
const stateMap: Record<string, string> = {
running: chartColors.running,
stopped: chartColors.stopped,
fatal: chartColors.fatal,
starting: chartColors.starting,
backoff: chartColors.backoff,
stopping: chartColors.stopping,
exited: chartColors.exited,
unknown: chartColors.unknown,
};
return stateMap[state.toLowerCase()] || chartColors.muted;
}
/**
* Color palette for multiple data series
*/
export const colorPalette = [
chartColors.primary,
chartColors.success,
chartColors.warning,
chartColors.accent,
chartColors.destructive,
chartColors.muted,
];