The react-zen DataTable lays its columns out on a CSS Grid with
fixed pixel widths, so the sum of column widths becomes the table's
max-content. Without an overflow boundary that width propagates up
through the surrounding flex chain into the Tabs panel grid track,
forcing every ancestor wider than the viewport. Dropping in
overflow-x: auto alone is not enough because the wrapper still
stretches to its parent's width, and the parent's width is still
driven by max-content from the table.
Wrap the rendered DataTable in DataGrid in a single-column CSS Grid
sized as minmax(0, 1fr) with overflow-x: auto. The minmax explicitly
caps the wrapper's track at the available 1fr space (instead of
following content's max-content), so the wrapper takes its size from
the layout and overflow-x: auto produces a horizontal scrollbar when
the table is wider than the viewport. No prop changes; every
DataGrid consumer (sessions, websites, links, pixels, boards, team
admin, etc.) gets the behaviour without any caller-side change.
Verified in playwright on the sessions table at 1024 viewport: the
table stays inside the card and exposes a horizontal scrollbar so
all 9 columns are reachable. At 1600 viewport the table fits
naturally and no scrollbar appears.
Yan
62b1b9e758