From 7e33f7a01a240b26eafbf94ea6ca14cb08d3c1e3 Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <bryan@brynary.com>
Date: Fri, 29 May 2026 01:01:45 -0400
Subject: [PATCH] fix(web): center Size column in run list

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 apps/fabro-web/app/components/runs-list/run-table-row.tsx  | 2 +-
 apps/fabro-web/app/components/runs-list/runs-list-view.tsx | 2 +-
 apps/fabro-web/app/components/runs-list/sort-header.tsx    | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/fabro-web/app/components/runs-list/run-table-row.tsx b/apps/fabro-web/app/components/runs-list/run-table-row.tsx
index ca521fb92..4fdb82777 100644
--- a/apps/fabro-web/app/components/runs-list/run-table-row.tsx
+++ b/apps/fabro-web/app/components/runs-list/run-table-row.tsx
@@ -117,7 +117,7 @@ export function RunTableRow({
         </td>
       )}
       {show("size") && (
-        <td className="whitespace-nowrap px-3 py-2.5 text-right">
+        <td className="whitespace-nowrap px-3 py-2.5 text-center">
           {run.size != null && <SizeChip size={run.size} />}
         </td>
       )}
diff --git a/apps/fabro-web/app/components/runs-list/runs-list-view.tsx b/apps/fabro-web/app/components/runs-list/runs-list-view.tsx
index 8c6fe1428..ec5d449a8 100644
--- a/apps/fabro-web/app/components/runs-list/runs-list-view.tsx
+++ b/apps/fabro-web/app/components/runs-list/runs-list-view.tsx
@@ -174,7 +174,7 @@ export function RunsListView({
                   <SortHeader label="Elapsed" sortKey="elapsed" activeSort={sort} direction={direction} align="right" onClick={onSortClick} />
                 )}
                 {show("size") && (
-                  <SortHeader label="Size" sortKey="size" activeSort={sort} direction={direction} align="right" onClick={onSortClick} />
+                  <SortHeader label="Size" sortKey="size" activeSort={sort} direction={direction} align="center" onClick={onSortClick} />
                 )}
                 {show("changes") && (
                   <SortHeader label="Changes" sortKey="changes" activeSort={sort} direction={direction} align="right" onClick={onSortClick} />
diff --git a/apps/fabro-web/app/components/runs-list/sort-header.tsx b/apps/fabro-web/app/components/runs-list/sort-header.tsx
index ec5290bc7..142598950 100644
--- a/apps/fabro-web/app/components/runs-list/sort-header.tsx
+++ b/apps/fabro-web/app/components/runs-list/sort-header.tsx
@@ -14,7 +14,7 @@ export function SortHeader<TKey extends string>({
   sortKey:    TKey;
   activeSort: TKey;
   direction:  SortDirection;
-  align?:     "left" | "right";
+  align?:     "left" | "center" | "right";
   onClick:    (key: TKey) => void;
 }) {
   const isActive = activeSort === sortKey;
@@ -27,12 +27,12 @@ export function SortHeader<TKey extends string>({
     <th
       scope="col"
       aria-sort={ariaSort}
-      className={`whitespace-nowrap px-3 py-2.5 font-medium ${align === "right" ? "text-right" : "text-left"}`}
+      className={`whitespace-nowrap px-3 py-2.5 font-medium ${align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left"}`}
     >
       <button
         type="button"
         onClick={() => onClick(sortKey)}
-        className={`inline-flex items-center gap-1 transition-colors hover:text-fg-2 ${isActive ? "text-fg-2" : "text-fg-3"} ${align === "right" ? "ml-auto" : ""}`}
+        className={`inline-flex items-center gap-1 transition-colors hover:text-fg-2 ${isActive ? "text-fg-2" : "text-fg-3"} ${align === "right" ? "ml-auto" : align === "center" ? "mx-auto" : ""}`}
       >
         <span>{label}</span>
         {isActive ? (