fix(replay-vision): remove dead space under score distribution chart#67285
Merged
Conversation
The scorer overview puts the line chart and score-distribution histogram side by side, but the histogram was a fixed h-40 next to the h-80 line chart with items-start, stranding ~150px of empty space below it. Stretch the grid cells to equal height and let the histogram fill (flex-1), so it matches the line chart and the row has no dead space.
TueHaulund
requested review from
a team,
arnohillen,
fasyy612 and
ksvat
and removed request for
a team
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Contributor
|
Reviews (1): Last reviewed commit: "fix(replay-vision): remove dead space un..." | Re-trigger Greptile |
Contributor
|
Size Change: -436 kB (-0.62%) Total Size: 69.5 MB 📦 View Changed
ℹ️ View Unchanged
|
Contributor
❌ Eager graphHow much code each root forces the browser to download and decode through static imports — the regression class total bundle size can't see.
✅ Largest files eagerly reachable from
|
| Size | File |
|---|---|
| 927.9 KiB | src/styles/global.scss |
| 609.0 KiB | public/hedgehog/burning-money-hog.png |
| 541.9 KiB | public/hedgehog/waving-hog.png |
| 357.8 KiB | ../node_modules/.pnpm/@posthog+icons@0.37.4_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@posthog/icons/dist/posthog-icons.es.js |
| 343.5 KiB | src/taxonomy/core-filter-definitions-by-group.json |
| 301.5 KiB | src/lib/api.ts |
| 279.2 KiB | ../node_modules/.pnpm/posthog-js@1.396.3/node_modules/posthog-js/dist/rrweb.js |
| 268.2 KiB | ../common/tailwind/tailwind.css |
| 264.9 KiB | src/queries/schema/schema-general.ts |
| 228.3 KiB | src/types.ts |
Largest files eagerly reachable from src/scenes/AuthenticatedShell.tsx
| Size | File |
|---|---|
| 1.92 MiB | ../node_modules/.pnpm/@posthog+brand@0.3.0_react@18.3.1/node_modules/@posthog/brand/dist/generated/hoggies/svg/code-bubble.mjs |
| 1.25 MiB | ../node_modules/.pnpm/@posthog+brand@0.3.0_react@18.3.1/node_modules/@posthog/brand/dist/generated/hoggies/svg/einstein-group.mjs |
| 1.07 MiB | ../node_modules/.pnpm/@posthog+brand@0.3.0_react@18.3.1/node_modules/@posthog/brand/dist/generated/hoggies/svg/evel.mjs |
| 927.9 KiB | src/styles/global.scss |
| 919.6 KiB | ../node_modules/.pnpm/@posthog+brand@0.3.0_react@18.3.1/node_modules/@posthog/brand/dist/generated/hoggies/svg/driving-hogzilla.mjs |
| 787.8 KiB | src/queries/validators.js |
| 739.3 KiB | ../node_modules/.pnpm/@posthog+brand@0.3.0_react@18.3.1/node_modules/@posthog/brand/dist/generated/hoggies/svg/coding-group.mjs |
| 692.5 KiB | ../node_modules/.pnpm/@posthog+brand@0.3.0_react@18.3.1/node_modules/@posthog/brand/dist/generated/hoggies/svg/wizard-hog.mjs |
| 677.6 KiB | ../node_modules/.pnpm/@posthog+brand@0.3.0_react@18.3.1/node_modules/@posthog/brand/dist/generated/hoggies/svg/lemonade.mjs |
| 640.1 KiB | ../node_modules/.pnpm/@posthog+brand@0.3.0_react@18.3.1/node_modules/@posthog/brand/dist/generated/hoggies/svg/scott-pilgrim.mjs |
Posted automatically by check-eager-graph · sizes are input-source bytes from the esbuild metafile · part of #32479
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
On a scorer's Observations tab, the line chart and score-distribution histogram sit side by side. The histogram was a fixed
h-40(160px) next to theh-80(320px) line chart, with the griditems-start, so the shorter histogram panel stranded ~150px of empty space below it — an awkward gap on the page.Changes
ScannerOverview.tsx, scorer layout only:items-start).fillprop on the sharedOverviewPanel(h-full flex flex-col). Monitor and classifier panels are unaffected.h-40toflex-1 min-h-40, so it grows to match the line chart while keeping 160px as a floor.Net: the histogram fills its panel to the same height as the line chart, so the row has no dead space and the taller bars read better.
How did you test this code?
Agent-authored (Claude Code).
pnpm --filter=@posthog/frontend typescript:checkpasses. This is a CSS/layout-only change (Tailwind classes + one optional boolean prop) with no logic change, so it's not covered by automated tests — visual verification on the scorer Observations tab is the check.🤖 Agent context
Autonomy: Human-driven (agent-assisted) — reported from a screenshot of a live scorer.