fix: merge DataGrid layout + add min width to sessions location column

Author: mikecao

src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx

@@ -25,7 +25,7 @@ export function SessionsTable({
       <DataColumn id="visits" label={t(labels.visits)} width="80px" />
       <DataColumn id="views" label={t(labels.views)} width="80px" />
       <DataColumn id="events" label={t(labels.events)} width="80px" />
-      <DataColumn id="location" label={t(labels.location)}>
+      <DataColumn id="location" label={t(labels.location)} width="200px">
         {(row: any) => (
           <TypeIcon type="country" value={row.country}>
             {row.city ? `${row.city}, ` : ''}

src/components/charts/Chart.tsx

@@ -122,17 +122,6 @@ export function Chart({
   return (
     <Column gap="6">
       <Box {...props}>
-        {/*
-          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.
-        */}
         <div style={{ position: 'relative', width: '100%', height: '100%', overflow: 'hidden' }}>
           <canvas ref={canvas} style={{ position: 'absolute', top: 0, left: 0 }} />
         </div>

src/components/common/DataGrid.tsx

@@ -62,67 +62,6 @@ export function DataGrid({
   const child = data ? (typeof children === 'function' ? children(data) : children) : null;
 
   return (
-    <Column gap="4" minHeight="300px">
-      {allowSearch && (
-        <Row alignItems="center" justifyContent="space-between" wrap="wrap" gap>
-          <SearchField
-            value={search}
-            onSearch={handleSearch}
-            delay={searchDelay || DEFAULT_SEARCH_DELAY}
-            autoFocus={autoFocus}
-            placeholder={t(labels.search)}
-          />
-          {renderActions?.()}
-        </Row>
-      )}
-      <LoadingPanel
-        data={data?.data}
-        isLoading={isLoading}
-        isFetching={isFetching}
-        error={error}
-        renderEmpty={renderEmpty}
-      >
-        {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.
-            */}
-            <div
-              style={{
-                display: 'grid',
-                gridTemplateColumns: 'minmax(0, 1fr)',
-                overflowX: 'auto',
-              }}
-            >
-              {isValidElement(child)
-                ? cloneElement(child as ReactElement<any>, { displayMode })
-                : child}
-            </div>
-            {showPager && (
-              <Row marginTop="6">
-                <Pager
-                  page={data.page}
-                  pageSize={data.pageSize}
-                  count={data.count}
-                  onPageChange={handlePageChange}
-                />
-              </Row>
-            )}
-          </>
-        )}
-      </LoadingPanel>
     <Column gap="4" minHeight="300px" justifyContent="space-between">
       <Column gap="4">
         {allowSearch && (
@@ -145,11 +84,17 @@ export function DataGrid({
           renderEmpty={renderEmpty}
         >
           {data && (
-            <Column>
+            <div
+              style={{
+                display: 'grid',
+                gridTemplateColumns: 'minmax(0, 1fr)',
+                overflowX: 'auto',
+              }}
+            >
               {isValidElement(child)
                 ? cloneElement(child as ReactElement<any>, { displayMode })
                 : child}
-            </Column>
+            </div>
           )}
         </LoadingPanel>
       </Column>