From 62b1b9e75818ef12ef8e62533856f173b0b52f54 Mon Sep 17 00:00:00 2001
From: Yan <75355375+yancat160@users.noreply.github.com>
Date: Fri, 8 May 2026 10:51:52 -0400
Subject: [PATCH] let overflowing tables scroll horizontally instead of
 stretching the card

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.
---
 src/components/common/DataGrid.tsx | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/components/common/DataGrid.tsx b/src/components/common/DataGrid.tsx
index 993929fd2..fa6ec376d 100644
--- a/src/components/common/DataGrid.tsx
+++ b/src/components/common/DataGrid.tsx
@@ -84,11 +84,32 @@ export function DataGrid({
       >
         {data && (
           <>
-            <Column>
+            {/*
+              Wrap the table in a horizontally scrollable container. 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 and propagates up through the surrounding
+              flex chain into the Tabs grid track, pinning every ancestor
+              wider than the viewport on small screens. overflow-x: auto on
+              its own does not break that chain because the wrapper still
+              stretches to its parent's width. Setting display: grid with
+              grid-template-columns: minmax(0, 1fr) gives the wrapper an
+              explicit 1fr column that resolves to the available space,
+              caps its own intrinsic width, and lets overflow-x: auto
+              kick in so the user can scroll the columns horizontally
+              instead of having the card overflow off screen.
+            */}
+            <div
+              style={{
+                display: 'grid',
+                gridTemplateColumns: 'minmax(0, 1fr)',
+                overflowX: 'auto',
+              }}
+            >
               {isValidElement(child)
                 ? cloneElement(child as ReactElement<any>, { displayMode })
                 : child}
-            </Column>
+            </div>
             {showPager && (
               <Row marginTop="6">
                 <Pager