From 4c2c447a2e998d6ba81b7cec9ae0c8f68e2dbdae Mon Sep 17 00:00:00 2001
From: Oliver Kieselbach <oliver.kieselbach@outlook.com>
Date: Fri, 24 Jul 2026 23:46:03 +0200
Subject: [PATCH] fix(web): dark-mode slate/hover-tint overrides + mobile wrap
 for script executions

Dark mode: globals.css was missing the entire slate family (the
"Incomplete" status filter chip rendered white-on-white) and all light
hover tints outside gray/indigo/cyan (hover:bg-purple-50 in the tenant
suggestion dropdown flashed near-white under light text). Added slate
bg/text/border mappings mirroring gray, plus dark equivalents for every
hover:bg-*-50/100/200 class in use (blue, purple, red, amber, yellow,
green, orange, sky, teal, emerald, slate, gray-200/300).

Mobile: ScriptExecutions rows were single-line flex with flex-shrink-0
right clusters, so badges and status text overlapped/overflowed on
narrow screens. Header counters, cycle card headers and item rows now
flex-wrap with gap spacing instead of space-x.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/Web/autopilot-monitor-web/app/globals.css | 89 +++++++++++++++++++
 .../components/ScriptExecutions.tsx           | 12 +--
 2 files changed, 95 insertions(+), 6 deletions(-)

diff --git a/src/Web/autopilot-monitor-web/app/globals.css b/src/Web/autopilot-monitor-web/app/globals.css
index 0fe54fe8..befcf678 100644
--- a/src/Web/autopilot-monitor-web/app/globals.css
+++ b/src/Web/autopilot-monitor-web/app/globals.css
@@ -124,6 +124,12 @@ body {
 .dark .hover\:bg-gray-100:hover {
   background-color: #334155 !important;
 }
+.dark .hover\:bg-gray-200:hover {
+  background-color: #334155 !important;
+}
+.dark .hover\:bg-gray-300:hover {
+  background-color: #475569 !important;
+}
 .dark .hover\:bg-indigo-100:hover {
   background-color: #312e81 !important;
 }
@@ -133,6 +139,60 @@ body {
 .dark .hover\:bg-cyan-50:hover {
   background-color: #0c2a3d !important;
 }
+/* Light hover tints (50/100/200) flash near-white in dark mode without an
+   override — map each family onto its dark -50 tone (one step lighter for
+   the 100/200 variants so hovering a -50 base still gives feedback). */
+.dark .hover\:bg-blue-50:hover {
+  background-color: #1e3a5f !important;
+}
+.dark .hover\:bg-blue-100:hover,
+.dark .hover\:bg-blue-200:hover {
+  background-color: #26497a !important;
+}
+.dark .hover\:bg-purple-50:hover {
+  background-color: #2d1b4e !important;
+}
+.dark .hover\:bg-purple-100:hover,
+.dark .hover\:bg-purple-200:hover {
+  background-color: #3b2565 !important;
+}
+.dark .hover\:bg-red-50:hover {
+  background-color: #3b1c1c !important;
+}
+.dark .hover\:bg-red-100:hover,
+.dark .hover\:bg-red-200:hover {
+  background-color: #4a2424 !important;
+}
+.dark .hover\:bg-amber-50:hover,
+.dark .hover\:bg-yellow-50:hover {
+  background-color: #3d2e0a !important;
+}
+.dark .hover\:bg-amber-100:hover,
+.dark .hover\:bg-amber-200:hover,
+.dark .hover\:bg-yellow-100:hover {
+  background-color: #4d3a0e !important;
+}
+.dark .hover\:bg-green-100:hover,
+.dark .hover\:bg-green-200:hover {
+  background-color: #1a4436 !important;
+}
+.dark .hover\:bg-orange-100:hover,
+.dark .hover\:bg-orange-200:hover {
+  background-color: #4d300d !important;
+}
+.dark .hover\:bg-sky-100:hover {
+  background-color: #10394f !important;
+}
+.dark .hover\:bg-teal-50:hover {
+  background-color: #0d2e2e !important;
+}
+.dark .hover\:bg-emerald-100:hover {
+  background-color: #124430 !important;
+}
+.dark .hover\:bg-slate-50:hover,
+.dark .hover\:bg-slate-100:hover {
+  background-color: #334155 !important;
+}
 
 /* -- Input fields -- */
 .dark input,
@@ -233,6 +293,35 @@ body {
   background-color: #3d2e0a !important;
 }
 
+/* -- Slate family (neutral chips like the "Incomplete" status filter) — mirrors gray -- */
+.dark .bg-slate-50 {
+  background-color: #0f172a !important;
+}
+.dark .bg-slate-100 {
+  background-color: #1e293b !important;
+}
+.dark .text-slate-900 {
+  color: #f1f5f9 !important;
+}
+.dark .text-slate-700 {
+  color: #cbd5e1 !important;
+}
+.dark .text-slate-600 {
+  color: #94a3b8 !important;
+}
+.dark .text-slate-500 {
+  color: #64748b !important;
+}
+.dark .text-slate-400 {
+  color: #64748b !important;
+}
+.dark .border-slate-200 {
+  border-color: #334155 !important;
+}
+.dark .border-slate-300 {
+  border-color: #475569 !important;
+}
+
 /* -- Gradient backgrounds (card headers) -- */
 .dark [class*="from-purple-50"],
 .dark [class*="from-indigo-50"],
diff --git a/src/Web/autopilot-monitor-web/components/ScriptExecutions.tsx b/src/Web/autopilot-monitor-web/components/ScriptExecutions.tsx
index 51a39608..4e694572 100644
--- a/src/Web/autopilot-monitor-web/components/ScriptExecutions.tsx
+++ b/src/Web/autopilot-monitor-web/components/ScriptExecutions.tsx
@@ -65,12 +65,12 @@ export default function ScriptExecutions({ events, showScriptOutput, latestBoots
         onClick={() => setExpanded(!expanded)}
         className="flex items-center justify-between w-full text-left"
       >
-        <div className="flex items-center space-x-2">
+        <div className="flex flex-wrap items-center gap-2 min-w-0">
           <svg className="w-5 h-5 text-violet-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
           </svg>
           <h2 className="text-lg font-semibold text-gray-900">Script Executions</h2>
-          <div className="flex items-center space-x-2 text-xs">
+          <div className="flex flex-wrap items-center gap-2 text-xs">
             {runningCount > 0 && (
               <span className="px-2 py-0.5 rounded-full bg-gray-100 text-gray-700 font-medium">
                 {runningCount} running
@@ -215,10 +215,10 @@ function ScriptCardView({ card, showScriptOutput, latestBootstrapVersion, displa
     <div className={`rounded-lg ${containerClass}`}>
       <button
         onClick={() => setPhasesOpen(!phasesOpen)}
-        className="flex items-center justify-between w-full text-left p-3 hover:bg-black/[.02]"
+        className="flex flex-wrap items-center justify-between gap-y-1 w-full text-left p-3 hover:bg-black/[.02]"
         aria-expanded={phasesOpen}
       >
-        <div className="flex items-center space-x-2 min-w-0">
+        <div className="flex flex-wrap items-center gap-x-2 gap-y-1 min-w-0">
           <CardIcon state={card.headerState} className={iconColor} />
           <span className="text-sm font-medium text-gray-900 truncate">Remediation</span>
           {cardDisplayName && (
@@ -369,8 +369,8 @@ function ScriptItemRow({ item, showScriptOutput, latestBootstrapVersion, nested,
 
   return (
     <div className={`rounded-lg p-3 ${containerClass}`}>
-      <div className="flex items-center justify-between">
-        <div className="flex items-center space-x-2 min-w-0">
+      <div className="flex flex-wrap items-center justify-between gap-y-1">
+        <div className="flex flex-wrap items-center gap-x-2 gap-y-1 min-w-0">
           {item.state === "Running" ? (
             <svg className={`w-4 h-4 text-gray-500 flex-shrink-0 ${isStale ? "" : "animate-spin"}`} fill="none" viewBox="0 0 24 24">
               <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>