kitos/Aegis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): fit all 9 test-state stat cards in a single row on Tests page
Aegis CI / lint-and-test (push) Has been cancelled
Details
Snyk Security Scan / Python vulnerabilities (backend) (push) Has been cancelled
Details
Snyk Security Scan / npm vulnerabilities (frontend) (push) Has been cancelled
Details
Snyk Security Scan / Docker image vulnerabilities (backend) (push) Has been cancelled
Details

Browse Source 
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.
This commit is contained in:
kitos
2026-07-10 14:08:29 +02:00
parent 1535ddaa5d
commit 997b38d333
1 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/TestsPage.tsx
+14 -14
View File
@@ -442,18 +442,18 @@ export default function TestsPage() {
</div> </div>
{/* ── State Counter Cards ───────────────────────────────────────── */} {/* ── 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) => { {ALL_STATES.map((state) => {
const icons: Record<TestState, React.ReactNode> = { const icons: Record<TestState, React.ReactNode> = {
draft: <Clock className="h-5 w-5 text-gray-400" />, draft: <Clock className="h-4 w-4 text-gray-400" />,
red_executing: <Play className="h-5 w-5 text-orange-400" />, red_executing: <Play className="h-4 w-4 text-orange-400" />,
red_review: <Shield className="h-5 w-5 text-amber-400" />, red_review: <Shield className="h-4 w-4 text-amber-400" />,
blue_evaluating: <Shield className="h-5 w-5 text-indigo-400" />, blue_evaluating: <Shield className="h-4 w-4 text-indigo-400" />,
blue_review: <Shield className="h-5 w-5 text-purple-400" />, blue_review: <Shield className="h-4 w-4 text-purple-400" />,
in_review: <Eye className="h-5 w-5 text-blue-400" />, in_review: <Eye className="h-4 w-4 text-blue-400" />,
validated: <CheckCircle className="h-5 w-5 text-green-400" />, validated: <CheckCircle className="h-4 w-4 text-green-400" />,
rejected: <XCircle className="h-5 w-5 text-red-400" />, rejected: <XCircle className="h-4 w-4 text-red-400" />,
disputed: <AlertTriangle className="h-5 w-5 text-amber-400" />, disputed: <AlertTriangle className="h-4 w-4 text-amber-400" />,
}; };
const colorMap: Record<TestState, string> = { const colorMap: Record<TestState, string> = {
draft: "text-gray-400", draft: "text-gray-400",
@@ -477,19 +477,19 @@ export default function TestsPage() {
setShowMyTasks(false); setShowMyTasks(false);
setStateFilter(stateFilter === state ? "" : state); 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 stateFilter === state
? "border-cyan-500/50 bg-cyan-500/10" ? "border-cyan-500/50 bg-cyan-500/10"
: "border-gray-800 bg-gray-900 hover:border-gray-700" : "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]} {icons[state]}
<span className="text-xs text-gray-400 truncate"> <span className="text-[11px] text-gray-400 truncate">
{testStateLabels[state]} {testStateLabels[state]}
</span> </span>
</div> </div>
<p className={`mt-2 text-2xl font-bold ${colorMap[state]}`}> <p className={`mt-1.5 text-lg font-bold ${colorMap[state]}`}>
{globalCounts[state]} {globalCounts[state]}
</p> </p>
</button> </button>