diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx index e2b592eb0..7bf6fd2f9 100644 --- a/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx +++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx @@ -25,7 +25,7 @@ export function SessionsTable({ - + {(row: any) => ( {row.city ? `${row.city}, ` : ''} diff --git a/src/components/charts/Chart.tsx b/src/components/charts/Chart.tsx index 770792d24..6604a2d28 100644 --- a/src/components/charts/Chart.tsx +++ b/src/components/charts/Chart.tsx @@ -122,17 +122,6 @@ export function Chart({ return ( - {/* - Position the canvas absolutely inside a relative-positioned - wrapper. Chart.js writes inline pixel sizes onto the canvas, and - while it lives in the normal flow that pixel width propagates up - as min/max-content through every flex parent into the surrounding - CSS Grid track, pinning the chart's column at its widest measured - size and only resetting on a full page reload. Taking the canvas - out of flow with position: absolute breaks that propagation; the - wrapper sizes purely from its parent (width: 100%, height: 100%) - and Chart.js' ResizeObserver picks up viewport changes. - */}
diff --git a/src/components/common/DataGrid.tsx b/src/components/common/DataGrid.tsx index 50df48b5a..19f167da9 100644 --- a/src/components/common/DataGrid.tsx +++ b/src/components/common/DataGrid.tsx @@ -62,67 +62,6 @@ export function DataGrid({ const child = data ? (typeof children === 'function' ? children(data) : children) : null; return ( - - {allowSearch && ( - - - {renderActions?.()} - - )} - - {data && ( - <> - {/* - 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. - */} -
- {isValidElement(child) - ? cloneElement(child as ReactElement, { displayMode }) - : child} -
- {showPager && ( - - - - )} - - )} -
{allowSearch && ( @@ -145,11 +84,17 @@ export function DataGrid({ renderEmpty={renderEmpty} > {data && ( - +
{isValidElement(child) ? cloneElement(child as ReactElement, { displayMode }) : child} - +
)}