fix: add flush prop to DataTable to remove rounded corners when embedded

The DataTable wrapper's border-radius created visible gaps when nested
inside a parent container (e.g. tableSection) that already provides its
own border and radius. The new flush prop strips border, radius, and
shadow so the table sits flush against its container.

Applied in Dashboard and RouteDetail "Recent Exchanges" tables.

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

src/design-system/composites/DataTable/DataTable.module.css

@@ -6,6 +6,12 @@
   overflow: hidden;
 }
 
+.flush {
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+
 .scroll {
   overflow-x: auto;
 }

src/design-system/composites/DataTable/DataTable.tsx

@@ -23,6 +23,7 @@ export function DataTable<T extends { id: string }>({
   pageSizeOptions = [10, 25, 50, 100],
   rowAccent,
   expandedContent,
+  flush = false,
 }: DataTableProps<T>) {
   const [sortKey, setSortKey] = useState<string | null>(null)
   const [sortDir, setSortDir] = useState<SortDir>('asc')
@@ -73,7 +74,7 @@ export function DataTable<T extends { id: string }>({
   }))
 
   return (
-    <div className={styles.wrapper}>
+    <div className={`${styles.wrapper} ${flush ? styles.flush : ''}`}>
       <div className={styles.scroll}>
         <table className={styles.table}>
           <thead>

src/design-system/composites/DataTable/types.ts

@@ -18,4 +18,6 @@ export interface DataTableProps<T extends { id: string }> {
   pageSizeOptions?: number[]
   rowAccent?: (row: T) => 'error' | 'warning' | undefined
   expandedContent?: (row: T) => ReactNode | null
+  /** Strip border, radius, and shadow so the table sits flush inside a parent container. */
+  flush?: boolean
 }

src/pages/Dashboard/Dashboard.tsx

@@ -346,6 +346,7 @@ export function Dashboard() {
             onRowClick={handleRowClick}
             selectedId={selectedId}
             sortable
+            flush
             rowAccent={handleRowAccent}
             expandedContent={(row) =>
               row.errorMessage ? (

src/pages/RouteDetail/RouteDetail.tsx

@@ -328,6 +328,7 @@ export function RouteDetail() {
             columns={EXCHANGE_COLUMNS}
             data={routeExchanges}
             sortable
+            flush
             rowAccent={(row) => {
               if (row.status === 'failed') return 'error'
               if (row.status === 'warning') return 'warning'