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