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
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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user