From 048f6566a91f17a078b887eabb517de7873c1399 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 28 Mar 2026 14:54:29 +0100
Subject: [PATCH] fix(ui): make exchange table fill page height with vertical
 scroll

---
 ui/src/components/LayoutShell.tsx           |  2 +-
 ui/src/pages/Dashboard/Dashboard.module.css | 21 +++++++++--
 ui/src/pages/Dashboard/Dashboard.tsx        | 42 +++++++++++----------
 3 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/ui/src/components/LayoutShell.tsx b/ui/src/components/LayoutShell.tsx
index 6b1f7d28..f0e331bf 100644
--- a/ui/src/components/LayoutShell.tsx
+++ b/ui/src/components/LayoutShell.tsx
@@ -268,7 +268,7 @@ function LayoutContent() {
         <ContentTabs active={scope.tab} onChange={setTab} scope={scope} />
       )}
 
-      <main style={{ flex: 1, overflow: 'auto', padding: isAdminPage ? '1.5rem' : 0 }}>
+      <main style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', padding: isAdminPage ? '1.5rem' : 0 }}>
         <Outlet />
       </main>
     </AppShell>
diff --git a/ui/src/pages/Dashboard/Dashboard.module.css b/ui/src/pages/Dashboard/Dashboard.module.css
index b7e8ecab..3b0b640c 100644
--- a/ui/src/pages/Dashboard/Dashboard.module.css
+++ b/ui/src/pages/Dashboard/Dashboard.module.css
@@ -1,23 +1,36 @@
-/* Scrollable content area */
+/* Scrollable content area — fills remaining height */
 .content {
+  display: flex;
+  flex-direction: column;
   flex: 1;
-  overflow-y: auto;
+  min-height: 0;
   min-width: 0;
   background: var(--bg-body);
 }
 
+/* Table section — stretches to fill and scrolls internally */
+
+
 /* Filter bar spacing */
 .filterBar {
   margin-bottom: 16px;
 }
 
-/* Table section */
 .tableSection {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
   background: var(--bg-surface);
-  border-bottom: 1px solid var(--border-subtle);
   overflow: hidden;
 }
 
+.tableScroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
 .tableHeader {
   display: flex;
   align-items: center;
diff --git a/ui/src/pages/Dashboard/Dashboard.tsx b/ui/src/pages/Dashboard/Dashboard.tsx
index cd9986fa..0acc1b79 100644
--- a/ui/src/pages/Dashboard/Dashboard.tsx
+++ b/ui/src/pages/Dashboard/Dashboard.tsx
@@ -267,27 +267,29 @@ export default function Dashboard() {
             </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 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>
                   </div>
-                </div>
-              ) : null
-            }
-          />
+                ) : null
+              }
+            />
+          </div>
         </div>
       </div>
     </>