From 31e050c4f3728f1d8d6f22e24fbcb57ed4022ab2 Mon Sep 17 00:00:00 2001
From: Ben Fornefeld <ben.fornefeld@gmail.com>
Date: Thu, 27 Nov 2025 18:38:29 +0100
Subject: [PATCH 1/3] Refine builds table layout and loading indicator

Move 'Loading' before the loader and switch to dots variant. Use
inline-flex spacing. Remove prose-table class from reason cell. Change
overflow-x-hidden breakpoint from md to lg and add a max-lg:min-w for
the unnamed column. Center the load-more row text
---
 src/features/dashboard/templates/builds/table-cells.tsx | 8 ++++----
 src/features/dashboard/templates/builds/table.tsx       | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/features/dashboard/templates/builds/table-cells.tsx b/src/features/dashboard/templates/builds/table-cells.tsx
index e6fa1a83..6a841b74 100644
--- a/src/features/dashboard/templates/builds/table-cells.tsx
+++ b/src/features/dashboard/templates/builds/table-cells.tsx
@@ -98,9 +98,9 @@ export function LoadMoreButton({
 }) {
   if (isLoading) {
     return (
-      <span className="flex items-center gap-2">
-        <Loader variant="slash" size="sm" />
-        Loading...
+      <span className="inline-flex items-center gap-1">
+        Loading
+        <Loader variant="dots" />
       </span>
     )
   }
@@ -234,7 +234,7 @@ export function Reason({
   return (
     <CopyableCell
       value={statusMessage}
-      className="prose-table truncate max-w-0 min-w-full text-left"
+      className="truncate max-w-0 min-w-full text-left"
     >
       {statusMessage}
     </CopyableCell>
diff --git a/src/features/dashboard/templates/builds/table.tsx b/src/features/dashboard/templates/builds/table.tsx
index db1e9604..023df421 100644
--- a/src/features/dashboard/templates/builds/table.tsx
+++ b/src/features/dashboard/templates/builds/table.tsx
@@ -158,7 +158,7 @@ const BuildsTable = () => {
     <div className="flex h-full min-h-0 flex-col overflow-hidden relative">
       <div
         ref={scrollContainerRef}
-        className="min-h-0 flex-1 overflow-y-auto overflow-x-auto md:overflow-x-hidden"
+        className="min-h-0 flex-1 overflow-y-auto overflow-x-auto lg:overflow-x-hidden"
       >
         <Table suppressHydrationWarning>
           <colgroup>
@@ -167,7 +167,7 @@ const BuildsTable = () => {
             <col style={colStyle(COLUMN_WIDTHS.template)} />
             <col style={colStyle(COLUMN_WIDTHS.started)} />
             <col style={colStyle(COLUMN_WIDTHS.duration)} />
-            <col />
+            <col className="max-lg:min-w-[500px]" />
           </colgroup>
 
           <TableHeader className="sticky top-0 z-10 bg-bg">
@@ -272,7 +272,7 @@ const BuildsTable = () => {
                   <TableRow>
                     <TableCell
                       colSpan={6}
-                      className="text-start text-fg-tertiary"
+                      className="text-center text-fg-tertiary"
                     >
                       <LoadMoreButton
                         isLoading={isFetchingNextPage}

From aa539ffcd4b443cf8ddd364941c42cc595935676 Mon Sep 17 00:00:00 2001
From: Ben Fornefeld <ben.fornefeld@gmail.com>
Date: Thu, 27 Nov 2025 18:45:11 +0100
Subject: [PATCH 2/3] Center BackToTop button in builds table

---
 src/features/dashboard/templates/builds/table.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/dashboard/templates/builds/table.tsx b/src/features/dashboard/templates/builds/table.tsx
index 023df421..0c66b0d3 100644
--- a/src/features/dashboard/templates/builds/table.tsx
+++ b/src/features/dashboard/templates/builds/table.tsx
@@ -215,7 +215,7 @@ const BuildsTable = () => {
                   <TableRow>
                     <TableCell
                       colSpan={6}
-                      className="text-start text-fg-tertiary"
+                      className="text-center text-fg-tertiary"
                     >
                       <BackToTopButton onBackToTop={handleBackToTop} />
                     </TableCell>

From f8d5fa6fc919a27ac8d5a3d81b1500f53130e2d1 Mon Sep 17 00:00:00 2001
From: Ben Fornefeld <ben.fornefeld@gmail.com>
Date: Thu, 27 Nov 2025 18:46:54 +0100
Subject: [PATCH 3/3] Left-align table controls on small screens

---
 src/features/dashboard/templates/builds/table.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/features/dashboard/templates/builds/table.tsx b/src/features/dashboard/templates/builds/table.tsx
index 0c66b0d3..37b9f013 100644
--- a/src/features/dashboard/templates/builds/table.tsx
+++ b/src/features/dashboard/templates/builds/table.tsx
@@ -215,7 +215,7 @@ const BuildsTable = () => {
                   <TableRow>
                     <TableCell
                       colSpan={6}
-                      className="text-center text-fg-tertiary"
+                      className="text-center max-lg:text-start text-fg-tertiary"
                     >
                       <BackToTopButton onBackToTop={handleBackToTop} />
                     </TableCell>
@@ -272,7 +272,7 @@ const BuildsTable = () => {
                   <TableRow>
                     <TableCell
                       colSpan={6}
-                      className="text-center text-fg-tertiary"
+                      className="text-center max-lg:text-start text-fg-tertiary"
                     >
                       <LoadMoreButton
                         isLoading={isFetchingNextPage}