From b863370511c7f410944f4e519a05ebef95281996 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 28 Mar 2026 14:56:23 +0100
Subject: [PATCH] fix(ui): pin DataTable pagination to bottom, table body
 scrolls independently

---
 ui/src/pages/Dashboard/Dashboard.module.css | 10 ++++-
 ui/src/pages/Dashboard/Dashboard.tsx        | 42 ++++++++++-----------
 2 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/ui/src/pages/Dashboard/Dashboard.module.css b/ui/src/pages/Dashboard/Dashboard.module.css
index 3b0b640c..626c20fd 100644
--- a/ui/src/pages/Dashboard/Dashboard.module.css
+++ b/ui/src/pages/Dashboard/Dashboard.module.css
@@ -25,7 +25,15 @@
   overflow: hidden;
 }
 
-.tableScroll {
+/* Make the DataTable wrapper fill height: scroll area grows, footer stays pinned */
+.tableSection > div {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+.tableSection > div > div:first-child {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
diff --git a/ui/src/pages/Dashboard/Dashboard.tsx b/ui/src/pages/Dashboard/Dashboard.tsx
index 0acc1b79..cd9986fa 100644
--- a/ui/src/pages/Dashboard/Dashboard.tsx
+++ b/ui/src/pages/Dashboard/Dashboard.tsx
@@ -267,29 +267,27 @@ export default function Dashboard() {
             </div>
           </div>
 
-          <div className={styles.tableScroll}>
-            <DataTable
-              columns={columns}
-              data={rows}
-              onRowClick={handleRowClick}
-              selectedId={selectedId}
-              sortable
-              flush
-              onSortChange={handleSortChange}
-              rowAccent={handleRowAccent}
-              expandedContent={(row: Row) =>
-                row.errorMessage ? (
-                  <div className={styles.inlineError}>
-                    <span className={styles.inlineErrorIcon}><AlertTriangle size={14} /></span>
-                    <div>
-                      <div className={styles.inlineErrorText}>{row.errorMessage}</div>
-                      <div className={styles.inlineErrorHint}>Click to view full stack trace</div>
-                    </div>
+          <DataTable
+            columns={columns}
+            data={rows}
+            onRowClick={handleRowClick}
+            selectedId={selectedId}
+            sortable
+            flush
+            onSortChange={handleSortChange}
+            rowAccent={handleRowAccent}
+            expandedContent={(row: Row) =>
+              row.errorMessage ? (
+                <div className={styles.inlineError}>
+                  <span className={styles.inlineErrorIcon}><AlertTriangle size={14} /></span>
+                  <div>
+                    <div className={styles.inlineErrorText}>{row.errorMessage}</div>
+                    <div className={styles.inlineErrorHint}>Click to view full stack trace</div>
                   </div>
-                ) : null
-              }
-            />
-          </div>
+                </div>
+              ) : null
+            }
+          />
         </div>
       </div>
     </>