fix(ui): pin DataTable pagination to bottom, table body scrolls independently

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;

ui/src/pages/Dashboard/Dashboard.tsx

@@ -267,29 +267,27 @@ export default function Dashboard() {
             </div>
           </div>
 
-          <div className={styles.tableScroll}>
+          <DataTable
-            <DataTable
+            columns={columns}
-              columns={columns}
+            data={rows}
-              data={rows}
+            onRowClick={handleRowClick}
-              onRowClick={handleRowClick}
+            selectedId={selectedId}
-              selectedId={selectedId}
+            sortable
-              sortable
+            flush
-              flush
+            onSortChange={handleSortChange}
-              onSortChange={handleSortChange}
+            rowAccent={handleRowAccent}
-              rowAccent={handleRowAccent}
+            expandedContent={(row: Row) =>
-              expandedContent={(row: Row) =>
+              row.errorMessage ? (
-                row.errorMessage ? (
+                <div className={styles.inlineError}>
-                  <div className={styles.inlineError}>
+                  <span className={styles.inlineErrorIcon}><AlertTriangle size={14} /></span>
-                    <span className={styles.inlineErrorIcon}><AlertTriangle size={14} /></span>
+                  <div>
-                    <div>
+                    <div className={styles.inlineErrorText}>{row.errorMessage}</div>
-                      <div className={styles.inlineErrorText}>{row.errorMessage}</div>
+                    <div className={styles.inlineErrorHint}>Click to view full stack trace</div>
-                      <div className={styles.inlineErrorHint}>Click to view full stack trace</div>
-                    </div>
                   </div>
-                ) : null
+                </div>
-              }
+              ) : null
-            />
+            }
-          </div>
+          />
         </div>
       </div>
     </>