From 2362383275cf28178090254a968b6ad1d7b35aa8 Mon Sep 17 00:00:00 2001
From: Amr Mohammed El-Sheraey <141947355+AmrMsCLL@users.noreply.github.com>
Date: Thu, 5 Nov 2026 13:22:15 +0200
Subject: [PATCH] fix: aligned Backups tables and a stable scrollbar gutter

Every project's archive table, and the requests table, use fixed column widths,
so columns line up from card to card; actions sit on the right and narrow
screens scroll the table instead of squeezing it. The page and every scrolling
container reserve the scrollbar's space, so nothing shifts when a scrollbar
appears; the body padding MUI adds when a dialog locks scrolling is cancelled
because that space is already reserved.
---
 app/src/web/pages/Backups.tsx | 56 ++++++++++++++++++++++-------------
 app/src/web/styles.css        | 15 ++++++++++
 2 files changed, 51 insertions(+), 20 deletions(-)

diff --git a/app/src/web/pages/Backups.tsx b/app/src/web/pages/Backups.tsx
index 5a84489..0af199e 100644
--- a/app/src/web/pages/Backups.tsx
+++ b/app/src/web/pages/Backups.tsx
@@ -31,7 +31,7 @@ function Archive({ archive, onRestore }: { archive: BackupSummary; onRestore: ()
       <td className="mono-sm whitespace-nowrap">{bytes(archive.bytes)}</td>
       <td className="whitespace-nowrap">
         {archive.bytes !== undefined && (
-          <span className="flex items-center gap-2">
+          <span className="flex items-center justify-end gap-2">
             <MuiLink className="mono-sm" href={`/api/backups/${archive.project}/${archive.stamp}.tar`} underline="always">
               download
             </MuiLink>
@@ -117,24 +117,33 @@ export function Backups() {
       {data.requests.length > 0 && (
         <section className="stat-card space-y-2">
           <h2 className="mono-sm text-muted">Recent requests</h2>
-          <table className="data-table">
-            <tbody>
-              {data.requests.map((entry) => (
-                <tr key={entry.id}>
-                  <td className="whitespace-nowrap">
-                    <TagChip color={requestColors[entry.state]} label={entry.state} />
-                  </td>
-                  <td className="mono-sm whitespace-nowrap">
-                    {entry.action} {entry.project}
-                    {entry.archive && <span className="text-faint"> {entry.archive}</span>}
-                  </td>
-                  <td className="mono-sm text-muted">{entry.by}</td>
-                  <td className="mono-sm break-all text-muted">{entry.output}</td>
-                  <td className="mono-sm whitespace-nowrap text-faint">{entry.at && timeAgo(entry.at)}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
+          <div className="overflow-x-auto">
+            <table className="data-table min-w-180 table-fixed">
+              <colgroup>
+                <col className="w-[12%]" />
+                <col className="w-[28%]" />
+                <col className="w-[14%]" />
+                <col className="w-[32%]" />
+                <col className="w-[14%]" />
+              </colgroup>
+              <tbody>
+                {data.requests.map((entry) => (
+                  <tr key={entry.id}>
+                    <td className="whitespace-nowrap">
+                      <TagChip color={requestColors[entry.state]} label={entry.state} />
+                    </td>
+                    <td className="mono-sm truncate">
+                      {entry.action} {entry.project}
+                      {entry.archive && <span className="text-faint"> {entry.archive}</span>}
+                    </td>
+                    <td className="mono-sm truncate text-muted">{entry.by}</td>
+                    <td className="mono-sm break-all text-muted">{entry.output}</td>
+                    <td className="mono-sm whitespace-nowrap text-right text-faint">{entry.at && timeAgo(entry.at)}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
         </section>
       )}
       {data.projects.map(({ project, archives }) => (
@@ -146,7 +155,14 @@ export function Backups() {
             </Button>
           </header>
           <div className="overflow-x-auto">
-            <table className="data-table">
+            <table className="data-table min-w-180 table-fixed">
+              <colgroup>
+                <col className="w-[26%]" />
+                <col className="w-[14%]" />
+                <col className="w-[30%]" />
+                <col className="w-[10%]" />
+                <col className="w-[20%]" />
+              </colgroup>
               <thead>
                 <tr>
                   <th>taken</th>
diff --git a/app/src/web/styles.css b/app/src/web/styles.css
index ead8ad8..0bae120 100644
--- a/app/src/web/styles.css
+++ b/app/src/web/styles.css
@@ -3,6 +3,21 @@
 @import '@xterm/xterm/css/xterm.css';
 @source '../../node_modules/@project-graphite/ui/dist';
 
+@layer base {
+  html,
+  .overflow-auto,
+  .overflow-y-auto,
+  .overflow-scroll,
+  .overflow-y-scroll,
+  .log-frame {
+    scrollbar-gutter: stable;
+  }
+
+  body {
+    padding-right: 0 !important;
+  }
+}
+
 @layer components {
   .stat-card {
     @apply rounded-xl border border-line bg-surface p-4;