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

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:
2025-11-23 21:52:35 +01:00
parent 791c99097c
commit dda335d501
11 changed files with 105 additions and 26 deletions

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>