fix(dashboard): 44px touch targets for interactive elements (#3393)

Closes #3376. min-h-[44px] on LiveAuditStream filter tabs, MessageBubble toggles, CalendarGrid Today button, ToastContainer actions. Fixed hover color bug in LiveAuditStream.

Author: OneStepAt4time

dashboard/src/components/LiveAuditStream.tsx

@@ -87,16 +87,16 @@ export default function LiveAuditStream({ maxItems = 20 }: LiveAuditStreamProps)
       {/* Header — filter tabs + live indicator */}
       <div className="flex items-center justify-between mb-4 gap-2">
         {/* Filter tabs */}
-        <div className="flex items-center gap-1 rounded-lg bg-white/5 p-1">
+        <div className="flex items-center gap-1 rounded-lg bg-[var(--color-void-light)] p-1">
           {(['all', 'errors', 'actions'] as FilterMode[]).map((mode) => (
             <button
               key={mode}
               type="button"
               onClick={() => setFilterMode(mode)}
-              className={`px-2.5 py-1 rounded-md text-[10px] font-bold uppercase tracking-widest transition-all ${
+              className={`min-h-[44px] px-3 py-1.5 rounded-md text-[11px] font-bold uppercase tracking-widest transition-all ${
                 filterMode === mode
-                  ? 'bg-slate-200 text-slate-900 shadow-inner dark:bg-white/10 dark:text-white'
-                  : 'text-slate-600 hover:text-slate-900 dark:text-slate-500 dark:hover:text-slate-300'
+                  ? 'bg-[var(--color-accent)] text-white shadow-sm'
+                  : 'text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]'
               }`}
             >
               {mode === 'errors' ? '⚠ Errors' : mode === 'actions' ? '⚡ Actions' : 'All'}

dashboard/src/components/ToastContainer.tsx

@@ -132,7 +132,7 @@ function ToastItem({
       {undoAction && (
         <button type="button"
           onClick={handleUndo}
-          className="shrink-0 flex items-center gap-1 rounded px-2 py-1 text-xs font-medium opacity-80 hover:opacity-100 transition-opacity bg-current/10"
+          className="shrink-0 flex min-h-[44px] items-center gap-1 rounded px-2 py-1 text-xs font-medium opacity-80 hover:opacity-100 transition-opacity bg-current/10"
           aria-label={t("aria.undo")}
         >
           <Undo className="h-3 w-3" />
@@ -167,7 +167,7 @@ export default function ToastContainer() {
         <div className="flex justify-end pointer-events-auto">
           <button type="button"
             onClick={() => toasts.forEach((t) => removeToast(t.id))}
-            className="flex items-center gap-1 rounded px-2 py-1 text-xs text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors"
+            className="flex min-h-[44px] items-center gap-1 rounded px-2 py-1 text-xs text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors"
             aria-label={t("aria.dismissAll")}
           >
             <Trash2 className="h-3 w-3" />

dashboard/src/components/routines/CalendarGrid.tsx

@@ -106,7 +106,7 @@ export default function CalendarGrid({
         <div className="flex items-center gap-1">
           <button type="button"
             onClick={handleToday}
-            className="px-2 py-1 text-xs text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors rounded"
+            className="min-h-[44px] px-2 py-1 text-xs text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors rounded"
             aria-label={t("aria.goToToday")}
           >
             Today

dashboard/src/components/session/MessageBubble.tsx

@@ -63,7 +63,7 @@ function ThinkingBlock({ entry }: { entry: ParsedEntry }) {
       <div className="max-w-[80%] w-full">
         <button type="button"
           onClick={() => setOpen(o => !o)}
-          className="flex items-center gap-2 text-xs text-[var(--color-text-muted)] hover:text-[var(--color-text-muted)] transition-colors py-1 group"
+          className="flex min-h-[44px] items-center gap-2 text-xs text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors py-1 group"
         >
           <span
             className="inline-block transition-transform duration-200"
@@ -111,7 +111,7 @@ function ToolUseCard({ entry }: { entry: ParsedEntry }) {
         {rawText.length > 100 && (
           <button type="button"
             onClick={() => setExpanded(e => !e)}
-            className="w-full text-[10px] text-[var(--color-text-muted)] hover:text-[var(--color-text-muted)] py-1 border-t border-[var(--color-void-lighter)] transition-colors"
+            className="w-full min-h-[44px] text-[10px] text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] py-1 border-t border-[var(--color-void-lighter)] transition-colors"
           >
             {expanded ? 'Collapse' : 'Expand'}
           </button>
@@ -157,7 +157,7 @@ function ToolResultCard({ entry }: { entry: ParsedEntry }) {
         {rawText.length > 100 && (
           <button type="button"
             onClick={() => setExpanded(e => !e)}
-            className="w-full text-[10px] text-[var(--color-text-muted)] hover:text-[var(--color-text-muted)] py-1 border-t border-[var(--color-void-lighter)] transition-colors"
+            className="w-full min-h-[44px] text-[10px] text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] py-1 border-t border-[var(--color-void-lighter)] transition-colors"
           >
             {expanded ? 'Collapse' : 'Expand'}
           </button>