From c412b3fb63c92e7dc355ee2cb382e0aa1a1b6778 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Wed, 18 Mar 2026 22:24:27 +0100
Subject: [PATCH] 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 ++++++
 src/design-system/composites/DataTable/DataTable.tsx        | 3 ++-
 src/design-system/composites/DataTable/types.ts             | 2 ++
 src/pages/Dashboard/Dashboard.tsx                           | 1 +
 src/pages/RouteDetail/RouteDetail.tsx                       | 1 +
 5 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/design-system/composites/DataTable/DataTable.module.css b/src/design-system/composites/DataTable/DataTable.module.css
index d9ecae3..8182f97 100644
--- a/src/design-system/composites/DataTable/DataTable.module.css
+++ b/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;
 }
diff --git a/src/design-system/composites/DataTable/DataTable.tsx b/src/design-system/composites/DataTable/DataTable.tsx
index fcc2c22..3021bb6 100644
--- a/src/design-system/composites/DataTable/DataTable.tsx
+++ b/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>
diff --git a/src/design-system/composites/DataTable/types.ts b/src/design-system/composites/DataTable/types.ts
index e9de1b6..a358d89 100644
--- a/src/design-system/composites/DataTable/types.ts
+++ b/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
 }
diff --git a/src/pages/Dashboard/Dashboard.tsx b/src/pages/Dashboard/Dashboard.tsx
index 42e5847..c02c0b6 100644
--- a/src/pages/Dashboard/Dashboard.tsx
+++ b/src/pages/Dashboard/Dashboard.tsx
@@ -346,6 +346,7 @@ export function Dashboard() {
             onRowClick={handleRowClick}
             selectedId={selectedId}
             sortable
+            flush
             rowAccent={handleRowAccent}
             expandedContent={(row) =>
               row.errorMessage ? (
diff --git a/src/pages/RouteDetail/RouteDetail.tsx b/src/pages/RouteDetail/RouteDetail.tsx
index 5dda52d..e743568 100644
--- a/src/pages/RouteDetail/RouteDetail.tsx
+++ b/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'