From f39d922fffa123a170855bbce9d8015d028e0960 Mon Sep 17 00:00:00 2001
From: Chad Miller <chadtmiller15@gmail.com>
Date: Thu, 27 Aug 2026 21:04:09 -0700
Subject: [PATCH] feat(git-ui): the checks page reads in a column, not across
 the window

A wide window stranded each run's cost and time far to the right of the
workflow that spent them, and the shas sat mid-page. The list now holds a
centred column in a bordered card: the commit subject takes the width with
its sha and ref at the right, and each run's cost and time close its row.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RomHvaB4nyAckbRD7W36Ue
---
 .../src/components/molecules/check-group.jsx  | 12 +++--
 .../src/components/molecules/check-row.jsx    | 23 +++++-----
 packages/git-ui/src/pages/checks.jsx          | 44 +++++++++++--------
 3 files changed, 42 insertions(+), 37 deletions(-)

diff --git a/packages/git-ui/src/components/molecules/check-group.jsx b/packages/git-ui/src/components/molecules/check-group.jsx
index 30d3b07..6560220 100644
--- a/packages/git-ui/src/components/molecules/check-group.jsx
+++ b/packages/git-ui/src/components/molecules/check-group.jsx
@@ -26,20 +26,18 @@ export function CheckGroup({ repo, group, label }) {
 
   return (
     <li className="border-border border-t first:border-t-0">
-      <div className="flex items-center gap-3 bg-muted px-(--gutter) py-2.5">
+      <div className="flex items-center gap-3 bg-muted px-4 py-2.5">
         <look.Icon
           className={cn('size-4 shrink-0', look.className)}
           aria-hidden="true"
         />
-        {/* The subject takes what it needs up to a measure, and the commit
-            it names follows it. Every heading hits that measure on a wide
-            window, so the shas line up down the page. The ref closes the
-            heading at the right edge. */}
+        {/* The subject takes the width, and the sha and ref it ran against
+            close the heading at the right. */}
         <Link
           href={commitHref}
           title={summary ? summaryWords(summary, group.runs) : undefined}
           className={cn(
-            'min-w-0 max-w-[34rem] flex-1 truncate font-semibold text-[13px] text-foreground no-underline hover:underline',
+            'min-w-0 flex-1 truncate font-semibold text-[13px] text-foreground no-underline hover:underline',
             label ? '' : 'font-mono',
           )}
         >
@@ -51,7 +49,7 @@ export function CheckGroup({ repo, group, label }) {
           </code>
         )}
         {ref && (
-          <span className="ml-auto hidden shrink-0 pl-3 font-mono text-[12px] text-faint sm:inline">
+          <span className="hidden shrink-0 font-mono text-[12px] text-faint sm:inline">
             {shortRef(ref)}
           </span>
         )}
diff --git a/packages/git-ui/src/components/molecules/check-row.jsx b/packages/git-ui/src/components/molecules/check-row.jsx
index ec89fec..bbff15d 100644
--- a/packages/git-ui/src/components/molecules/check-row.jsx
+++ b/packages/git-ui/src/components/molecules/check-row.jsx
@@ -10,9 +10,10 @@ import { cn } from '#/lib/utils.js';
  * This holds no anchor and no button of its own. The caller decides whether
  * the line opens the run's page or expands in place.
  *
- * A caller that already names when the runs happened turns off showTime. Every
- * run of one commit started within a minute of the others, so the column reads
- * the same phrase down the whole list.
+ * The workflow name takes the width, and the cost and time close the row at
+ * the right, so the rows read as columns down the page however wide the
+ * window. A caller that already names when the runs happened turns off
+ * showTime. Every run of one commit started within a minute of the others.
  */
 export function CheckRow({ check, className, showTime = true }) {
   const look = checkLook(check.status);
@@ -26,18 +27,16 @@ export function CheckRow({ check, className, showTime = true }) {
       )}
     >
       <look.Icon className={cn('size-4 shrink-0', look.className)} />
-      {/* What ran and what it cost stand together. Each holds its width
-          whether or not the run fills it, so they read down the page as
-          columns. When it ran closes the row at the right edge, the way a
-          commit's status closes a row in the commit list. */}
-      <span className="w-28 shrink-0 truncate text-foreground sm:w-40">
+      <span className="min-w-0 flex-1 truncate text-foreground">
         {workflowOf(check)}
       </span>
-      <span className="w-14 shrink-0 text-right text-[12px] text-faint tabular-nums">
-        {took}
-      </span>
+      {took && (
+        <span className="shrink-0 text-[12px] text-faint tabular-nums">
+          {took}
+        </span>
+      )}
       {showTime && (
-        <span className="ml-auto shrink-0 pl-3 text-[12px] text-faint">
+        <span className="shrink-0 text-[12px] text-faint">
           {timeAgo(check.startedAt)}
         </span>
       )}
diff --git a/packages/git-ui/src/pages/checks.jsx b/packages/git-ui/src/pages/checks.jsx
index f020d10..f285608 100644
--- a/packages/git-ui/src/pages/checks.jsx
+++ b/packages/git-ui/src/pages/checks.jsx
@@ -74,26 +74,34 @@ export function ChecksPage({ repo }) {
 
   return (
     <div className="flex min-h-0 flex-1 flex-col">
-      <div className="shrink-0 px-(--gutter) py-2.5">
-        <CheckFilter
-          workflows={workflowNames(all)}
-          counts={counts}
-          total={all.length}
-          value={workflow}
-          onSelect={setWorkflow}
-        />
+      <div className="shrink-0 border-border border-b px-(--gutter) py-2.5">
+        <div className="mx-auto max-w-4xl">
+          <CheckFilter
+            workflows={workflowNames(all)}
+            counts={counts}
+            total={all.length}
+            value={workflow}
+            onSelect={setWorkflow}
+          />
+        </div>
       </div>
 
-      <ul className="min-h-0 flex-1 overflow-y-auto border-border border-t">
-        {groupBySha(runs).map((group) => (
-          <CheckGroup
-            key={group.sha}
-            repo={repo}
-            group={group}
-            label={labels?.get(group.sha)}
-          />
-        ))}
-      </ul>
+      {/* The runs read in a column of their own width, so a wide window does
+          not strand the time and cost far from the workflow that spent them. */}
+      <div className="min-h-0 flex-1 overflow-y-auto">
+        <div className="mx-auto max-w-4xl px-(--gutter) py-5">
+          <ul className="overflow-hidden rounded-lg border border-border">
+            {groupBySha(runs).map((group) => (
+              <CheckGroup
+                key={group.sha}
+                repo={repo}
+                group={group}
+                label={labels?.get(group.sha)}
+              />
+            ))}
+          </ul>
+        </div>
+      </div>
     </div>
   );
 }
-- 
2.51.2