feat: upgrade design system to v0.1.19, use onNavigate/fillHeight, add SonarQube workflow

- Use Sidebar onNavigate callback instead of display:contents click interception
- Use DataTable fillHeight prop instead of manual scroll wrapper divs
- Fix DataTable scroll/pagination by adding overflow:hidden to content container
- Fix left panel in split view to use flex column instead of overflow:auto
- Make error tab stack trace scrollable for large traces
- Add nightly SonarQube workflow with manual trigger support

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/src/pages/Dashboard/Dashboard.tsx

@@ -236,60 +236,53 @@ export default function Dashboard({ onExchangeSelect }: DashboardProps = {}) {
   }
 
   return (
-    <>
-      {/* Scrollable content */}
-      <div className={styles.content}>
-        {/* Exchanges table */}
-        <div className={styles.tableSection}>
-          <div className={styles.tableHeader}>
-            <span className={styles.tableTitle}>
-              {textFilter ? (
-                <>
-                  <Search size={14} style={{ marginRight: 4, verticalAlign: -2 }} />
-                  Search: &ldquo;{textFilter}&rdquo;
-                  <button
-                    className={styles.clearSearch}
-                    onClick={() => setSearchParams({})}
-                    title="Clear search"
-                  >
-                    <X size={12} />
-                  </button>
-                </>
-              ) : 'Recent Exchanges'}
-            </span>
-            <div className={styles.tableRight}>
-              <span className={styles.tableMeta}>
-                {rows.length.toLocaleString()} of {(searchResult?.total ?? 0).toLocaleString()} exchanges
-              </span>
-              {!textFilter && <Badge label="LIVE" color="success" />}
-            </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>
-                  </div>
-                ) : null
-              }
-            />
-          </div>
+    <div className={styles.content}>
+      <div className={styles.tableHeader}>
+        <span className={styles.tableTitle}>
+          {textFilter ? (
+            <>
+              <Search size={14} style={{ marginRight: 4, verticalAlign: -2 }} />
+              Search: &ldquo;{textFilter}&rdquo;
+              <button
+                className={styles.clearSearch}
+                onClick={() => setSearchParams({})}
+                title="Clear search"
+              >
+                <X size={12} />
+              </button>
+            </>
+          ) : 'Recent Exchanges'}
+        </span>
+        <div className={styles.tableRight}>
+          <span className={styles.tableMeta}>
+            {rows.length.toLocaleString()} of {(searchResult?.total ?? 0).toLocaleString()} exchanges
+          </span>
+          {!textFilter && <Badge label="LIVE" color="success" />}
         </div>
       </div>
-    </>
+
+      <DataTable
+        columns={columns}
+        data={rows}
+        onRowClick={handleRowClick}
+        selectedId={selectedId}
+        sortable
+        flush
+        fillHeight
+        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>
+          ) : null
+        }
+      />
+    </div>
   )
 }