Description
Wide tables on the invoice detail and split builder pages currently escape their parent containers on narrow screens, breaking the page layout and hiding content under the browser edge. All data tables must be wrapped in individually scrollable overflow containers.
Technical Context
src/components/ui/DataTable.tsx (new) wraps its <table> in a div with overflow-x: auto and WebkitOverflowScrolling: 'touch' via a Tailwind class overflow-x-auto. src/components/invoice/InvoiceTable.tsx and src/components/invoice/SplitSummaryTable.tsx both extend DataTable. The <table> itself uses min-w-full to prevent column squishing, while each <th> has a minimum width set via inline style to preserve readability.
Acceptance Criteria
Description
Wide tables on the invoice detail and split builder pages currently escape their parent containers on narrow screens, breaking the page layout and hiding content under the browser edge. All data tables must be wrapped in individually scrollable overflow containers.
Technical Context
src/components/ui/DataTable.tsx(new) wraps its<table>in adivwithoverflow-x: autoandWebkitOverflowScrolling: 'touch'via a Tailwind classoverflow-x-auto.src/components/invoice/InvoiceTable.tsxandsrc/components/invoice/SplitSummaryTable.tsxboth extendDataTable. The<table>itself usesmin-w-fullto prevent column squishing, while each<th>has a minimum width set via inline style to preserve readability.Acceptance Criteria
<body>element at any viewport widthmin-w-full