Address Greptile P2 review on PR #4260. Before Chart.js' first
ResizeObserver callback fires the canvas keeps its HTML5 default
size of 300x150. With position: absolute that no longer pushes any
ancestor's intrinsic size, but on a wrapper narrower than 300px the
canvas can still poke past the wrapper for one frame before Chart.js
catches up. Adding overflow: hidden to the relative wrapper clips
that transient overflow and is the pattern Chart.js' own docs
recommend for responsive charts inside flex / grid layouts. No
steady-state behaviour change because the canvas is already sized to
the wrapper once Chart.js takes over; the React tooltip lives
outside this wrapper so it remains visible.
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.
The chart canvas in src/components/charts/Chart.tsx was rendered
directly inside the Box wrapper. Chart.js writes inline pixel sizes
onto the canvas, and while the canvas lives in the normal flow that
pixel width propagates up as min and max content through every flex
parent and into the surrounding CSS Grid track on the Tabs panel.
The track therefore stayed at whatever width the canvas had when the
page first loaded, and the chart could only grow on resize, never
shrink, until the user reloaded.
Wrap the canvas in a position-relative div and position the canvas
absolutely. Out-of-flow elements do not contribute to ancestor
intrinsic sizing, so the wrapper now takes its size purely from the
parent layout. Chart.js' ResizeObserver picks up the wrapper size and
resizes the canvas to fit, in both directions, without a reload.
Verified in playwright with resize 1280 to 800 (canvas 925 to 699)
and 800 to 1400 (canvas 699 to 1117), both without reload, and that
the click-to-toggle legend, the focusLabel hover behaviour, and the
website overview / revenue charts that share this component all
still render and update normally.
Address Greptile review on PR #4257: hex6(key) was parsed twice per
label, once in the sort comparator and once when deriving the
preferred palette slot. Cache the parsed integer in a local hashOf
map so the sort comparator and the slot lookup share one computation
per label, no behaviour change.
Mike CaoandGitHub
Francis Cao
dependabot[bot]andGitHub
Mike Cao
Yan