From 4bfa1c75ea1dce0c15640a23285e44e61b9e5316 Mon Sep 17 00:00:00 2001
From: PeterChrz <pc@stampedepress.org>
Date: Wed, 30 Sep 2026 09:54:45 -0400
Subject: [PATCH] Align summary columns via shared grid layout for header and
 rows

---
 .../views/livewire/summary/index.blade.php    | 45 ++++++++++---------
 1 file changed, 25 insertions(+), 20 deletions(-)

diff --git a/resources/views/livewire/summary/index.blade.php b/resources/views/livewire/summary/index.blade.php
index d64a69f..50078b2 100644
--- a/resources/views/livewire/summary/index.blade.php
+++ b/resources/views/livewire/summary/index.blade.php
@@ -168,12 +168,13 @@ class="w-64"
                         <span class="text-xs text-zinc-400">{{ optional($session->band->ran_at)->format('M j Y') }}</span>
                     </div>
                     {{-- Column titles aligned over the suite rows (md+ only) --}}
-                    <div class="hidden px-4 pt-2 md:flex flex-wrap items-center gap-x-4 gap-y-1">
-                        <span class="w-24 text-[10px] font-semibold uppercase tracking-wider text-zinc-400">{{ __('Benchmark') }}</span>
-                        <span class="w-14 text-[10px] font-semibold uppercase tracking-wider text-zinc-400">{{ __('Thinking') }}</span>
-                        <span class="w-24 text-[10px] font-semibold uppercase tracking-wider text-zinc-400">{{ __('Result') }}</span>
-                        <span class="w-40 text-[10px] font-semibold uppercase tracking-wider text-zinc-400">{{ __('Speed (tok/s)') }} <span class="font-normal normal-case">avg · wtd</span></span>
-                        <span class="w-20 text-[10px] font-semibold uppercase tracking-wider text-zinc-400">{{ __('Tokens') }}</span>
+                    <div class="hidden px-4 pt-2 md:grid md:grid-cols-[7.5rem_4.5rem_7rem_15rem_6rem_1fr] md:gap-x-4 md:items-center">
+                        <span class="text-[10px] font-semibold uppercase tracking-wider text-zinc-400">{{ __('Benchmark') }}</span>
+                        <span class="text-[10px] font-semibold uppercase tracking-wider text-zinc-400">{{ __('Thinking') }}</span>
+                        <span class="text-[10px] font-semibold uppercase tracking-wider text-zinc-400">{{ __('Result') }}</span>
+                        <span class="text-[10px] font-semibold uppercase tracking-wider text-zinc-400">{{ __('Speed (tok/s)') }} <span class="font-normal normal-case">avg · wtd</span></span>
+                        <span class="text-[10px] font-semibold uppercase tracking-wider text-zinc-400">{{ __('Tokens') }}</span>
+                        <span></span>
                     </div>
                     <div class="divide-y divide-zinc-100 dark:divide-zinc-800">
                         @foreach ($session->suites as $row)
@@ -183,24 +184,28 @@ class="w-64"
                                     : route('runs.show', $row->run_id) . ($row->level && $row->suite === 'depthsweep' ? '?level=' . $row->level : '');
                             @endphp
                             <a href="{{ $detailUrl }}" wire:navigate
-                               class="flex flex-wrap items-center gap-x-4 gap-y-1 px-4 py-2.5 hover:bg-zinc-50 dark:hover:bg-zinc-800/60">
-                                <flux:badge size="xs">{{ $row->suite }}</flux:badge>
-                                @if ($row->level)
-                                    <flux:badge size="xs" color="sky">{{ $row->level }}</flux:badge>
-                                @endif
+                               class="flex flex-wrap items-center gap-x-4 gap-y-1 px-4 py-2.5 hover:bg-zinc-50 dark:hover:bg-zinc-800/60 md:grid md:grid-cols-[7.5rem_4.5rem_7rem_15rem_6rem_1fr] md:gap-x-4 md:items-center">
+                                <span><flux:badge size="xs">{{ $row->suite }}</flux:badge></span>
+                                <span>
+                                    @if ($row->level)
+                                        <flux:badge size="xs" color="sky">{{ $row->level }}</flux:badge>
+                                    @endif
+                                </span>
                                 <span class="flex items-center gap-1.5">
                                     <flux:badge size="xs" color="emerald">✔ {{ $row->passed }}</flux:badge>
                                     <flux:badge size="xs" color="{{ $row->failed > 0 ? 'rose' : 'zinc' }}">✘ {{ $row->failed }}</flux:badge>
                                 </span>
-                                @if ($row->avg_user_tps !== null)
-                                    <span class="font-mono text-sm">{{ number_format($row->avg_user_tps, 1) }} <span class="text-xs text-zinc-400">avg</span></span>
-                                    <span class="font-mono text-sm">{{ number_format($row->weighted_user_tps, 1) }} <span class="text-xs text-zinc-400">wtd tok/s</span></span>
-                                @elseif ($row->gen_tps !== null)
-                                    <span class="font-mono text-sm">{{ number_format($row->gen_tps, 1) }} <span class="text-xs text-zinc-400">gen tok/s</span></span>
-                                    <span class="font-mono text-sm text-zinc-400">—</span>
-                                @endif
-                                <span class="font-mono text-sm">{{ number_format($row->total_tokens) }} <span class="text-xs text-zinc-400">tokens</span></span>
-                                <span class="ms-auto text-xs text-zinc-400">{{ __('per-task detail') }} →</span>
+                                <span>
+                                    @if ($row->avg_user_tps !== null)
+                                        <span class="font-mono text-sm">{{ number_format($row->avg_user_tps, 1) }} <span class="text-xs text-zinc-400">avg</span></span>
+                                        <span class="font-mono text-sm">{{ number_format($row->weighted_user_tps, 1) }} <span class="text-xs text-zinc-400">wtd</span></span>
+                                    @elseif ($row->gen_tps !== null)
+                                        <span class="font-mono text-sm">{{ number_format($row->gen_tps, 1) }} <span class="text-xs text-zinc-400">gen</span></span>
+                                        <span class="font-mono text-sm text-zinc-400">—</span>
+                                    @endif
+                                </span>
+                                <span class="font-mono text-sm">{{ number_format($row->total_tokens) }}</span>
+                                <span class="text-xs text-zinc-400 md:justify-self-end">{{ __('per-task detail') }} →</span>
                             </a>
                         @endforeach
                     </div>