fix: resolve 7 critical UI issues - charts, layouts, and mobile responsiveness

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>

components/charts/GroupStatistics.tsx

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

components/charts/ProcessStateChart.tsx

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

components/charts/ProcessUptimeChart.tsx

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

components/groups/GroupCard.tsx

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

components/layout/Navbar.tsx

@@ -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) => (

components/logs/LogControls.tsx

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

components/logs/LogSearch.tsx

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

components/process/BatchActions.tsx

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

components/process/ProcessCard.tsx

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