fix: standardize table containment and container padding across pages

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

ui/src/pages/AppsTab/AppsTab.module.css

@@ -1,5 +1,5 @@
 .container {
-  padding: 16px;
+  padding: 20px 24px 40px;
   overflow-y: auto;
   flex: 1;
 }

ui/src/pages/Dashboard/Dashboard.module.css

@@ -9,23 +9,6 @@
   background: var(--bg-body);
 }
 
-.tableHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.tableTitle {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
 .clearSearch {
   display: inline-flex;
   align-items: center;
@@ -46,18 +29,6 @@
   color: var(--text-primary);
 }
 
-.tableRight {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.tableMeta {
-  font-size: 12px;
-  color: var(--text-muted);
-  font-family: var(--font-mono);
-}
-
 /* Status cell */
 .statusCell {
   display: flex;

ui/src/pages/Dashboard/Dashboard.tsx

@@ -17,6 +17,7 @@ import type { ExecutionSummary } from '../../api/types'
 import { attributeBadgeColor } from '../../utils/attribute-color'
 import { formatDuration, statusLabel } from '../../utils/format-utils'
 import styles from './Dashboard.module.css'
+import tableStyles from '../../styles/table-section.module.css'
 
 // Row type extends ExecutionSummary with an `id` field for DataTable
 interface Row extends ExecutionSummary {
@@ -234,52 +235,54 @@ export default function Dashboard({ onExchangeSelect, activeExchangeId }: Dashbo
 
   return (
     <div className={styles.content}>
-      <div className={styles.tableHeader}>
+      <div className={tableStyles.tableSection}>
-        <span className={styles.tableTitle}>
+        <div className={tableStyles.tableHeader}>
-          {textFilter ? (
+          <span className={tableStyles.tableTitle}>
-            <>
+            {textFilter ? (
-              <Search size={14} style={{ marginRight: 4, verticalAlign: -2 }} />
+              <>
-              Search: &ldquo;{textFilter}&rdquo;
+                <Search size={14} style={{ marginRight: 4, verticalAlign: -2 }} />
-              <button
+                Search: &ldquo;{textFilter}&rdquo;
-                className={styles.clearSearch}
+                <button
-                onClick={() => setSearchParams({})}
+                  className={styles.clearSearch}
-                title="Clear search"
+                  onClick={() => setSearchParams({})}
-              >
+                  title="Clear search"
-                <X size={12} />
+                >
-              </button>
+                  <X size={12} />
-            </>
+                </button>
-          ) : 'Recent Exchanges'}
+              </>
-        </span>
+            ) : 'Recent Exchanges'}
-        <div className={styles.tableRight}>
-          <span className={styles.tableMeta}>
-            {rows.length.toLocaleString()} of {(searchResult?.total ?? 0).toLocaleString()} exchanges
           </span>
-          {!textFilter && <Badge label="AUTO" color="success" />}
+          <div className={tableStyles.tableRight}>
+            <span className={tableStyles.tableMeta}>
+              {rows.length.toLocaleString()} of {(searchResult?.total ?? 0).toLocaleString()} exchanges
+            </span>
+            {!textFilter && <Badge label="AUTO" color="success" />}
+          </div>
         </div>
-      </div>
 
-      <DataTable
+        <DataTable
-        columns={columns}
+          columns={columns}
-        data={rows}
+          data={rows}
-        onRowClick={handleRowClick}
+          onRowClick={handleRowClick}
-        selectedId={selectedId}
+          selectedId={selectedId}
-        sortable
+          sortable
-        flush
+          flush
-        fillHeight
+          fillHeight
-        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>
-            </div>
+            ) : null
-          ) : null
+          }
-        }
+        />
-      />
+      </div>
     </div>
   )
 }

ui/src/pages/DashboardTab/DashboardTab.module.css

@@ -5,7 +5,7 @@
   flex: 1;
   min-height: 0;
   overflow-y: auto;
-  padding-bottom: 20px;
+  padding: 0 24px 20px;
 }