From 997b38d3336f23456be635d3be86ae7c43a756f7 Mon Sep 17 00:00:00 2001
From: kitos <kitos@aegis.local>
Date: Fri, 10 Jul 2026 14:08:29 +0200
Subject: [PATCH] fix(ui): fit all 9 test-state stat cards in a single row on
 Tests page

Shrinks padding, icon size, and font sizes, and bumps the grid to 9
columns at the lg breakpoint so Draft through Disputed no longer wrap
to a second row.
---
 frontend/src/pages/TestsPage.tsx | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/frontend/src/pages/TestsPage.tsx b/frontend/src/pages/TestsPage.tsx
index 78cdbb3..4d0dfea 100644
--- a/frontend/src/pages/TestsPage.tsx
+++ b/frontend/src/pages/TestsPage.tsx
@@ -442,18 +442,18 @@ export default function TestsPage() {
       </div>
 
       {/* ── State Counter Cards ───────────────────────────────────────── */}
-      <div className="grid gap-3 grid-cols-2 sm:grid-cols-3 lg:grid-cols-6">
+      <div className="grid gap-2 grid-cols-3 sm:grid-cols-5 lg:grid-cols-9">
         {ALL_STATES.map((state) => {
           const icons: Record<TestState, React.ReactNode> = {
-            draft: <Clock className="h-5 w-5 text-gray-400" />,
-            red_executing: <Play className="h-5 w-5 text-orange-400" />,
-            red_review: <Shield className="h-5 w-5 text-amber-400" />,
-            blue_evaluating: <Shield className="h-5 w-5 text-indigo-400" />,
-            blue_review: <Shield className="h-5 w-5 text-purple-400" />,
-            in_review: <Eye className="h-5 w-5 text-blue-400" />,
-            validated: <CheckCircle className="h-5 w-5 text-green-400" />,
-            rejected: <XCircle className="h-5 w-5 text-red-400" />,
-            disputed: <AlertTriangle className="h-5 w-5 text-amber-400" />,
+            draft: <Clock className="h-4 w-4 text-gray-400" />,
+            red_executing: <Play className="h-4 w-4 text-orange-400" />,
+            red_review: <Shield className="h-4 w-4 text-amber-400" />,
+            blue_evaluating: <Shield className="h-4 w-4 text-indigo-400" />,
+            blue_review: <Shield className="h-4 w-4 text-purple-400" />,
+            in_review: <Eye className="h-4 w-4 text-blue-400" />,
+            validated: <CheckCircle className="h-4 w-4 text-green-400" />,
+            rejected: <XCircle className="h-4 w-4 text-red-400" />,
+            disputed: <AlertTriangle className="h-4 w-4 text-amber-400" />,
           };
           const colorMap: Record<TestState, string> = {
             draft: "text-gray-400",
@@ -477,19 +477,19 @@ export default function TestsPage() {
                 setShowMyTasks(false);
                 setStateFilter(stateFilter === state ? "" : state);
               }}
-              className={`rounded-xl border p-4 text-left transition-colors ${
+              className={`rounded-xl border p-2.5 text-left transition-colors ${
                 stateFilter === state
                   ? "border-cyan-500/50 bg-cyan-500/10"
                   : "border-gray-800 bg-gray-900 hover:border-gray-700"
               }`}
             >
-              <div className="flex items-center gap-2">
+              <div className="flex items-center gap-1.5">
                 {icons[state]}
-                <span className="text-xs text-gray-400 truncate">
+                <span className="text-[11px] text-gray-400 truncate">
                   {testStateLabels[state]}
                 </span>
               </div>
-              <p className={`mt-2 text-2xl font-bold ${colorMap[state]}`}>
+              <p className={`mt-1.5 text-lg font-bold ${colorMap[state]}`}>
                 {globalCounts[state]}
               </p>
             </button>