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,8 +235,9 @@ 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}>
+          <span className={tableStyles.tableTitle}>
             {textFilter ? (
               <>
                 <Search size={14} style={{ marginRight: 4, verticalAlign: -2 }} />
@@ -250,8 +252,8 @@ export default function Dashboard({ onExchangeSelect, activeExchangeId }: Dashbo
               </>
             ) : 'Recent Exchanges'}
           </span>
-        <div className={styles.tableRight}>
+          <div className={tableStyles.tableRight}>
-          <span className={styles.tableMeta}>
+            <span className={tableStyles.tableMeta}>
               {rows.length.toLocaleString()} of {(searchResult?.total ?? 0).toLocaleString()} exchanges
             </span>
             {!textFilter && <Badge label="AUTO" color="success" />}
@@ -281,5 +283,6 @@ export default function Dashboard({ onExchangeSelect, activeExchangeId }: Dashbo
           }
         />
       </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;
 }