From cca25c439ef2ababfb4b1d7a10730a6646166f67 Mon Sep 17 00:00:00 2001
From: Tue Haulund <tue@posthog.com>
Date: Wed, 1 Jul 2026 10:29:02 +0200
Subject: [PATCH] fix(replay-vision): remove dead space under score
 distribution chart

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.
---
 .../replay_scanners/components/ScannerOverview.tsx    | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/products/replay_vision/frontend/replay_scanners/components/ScannerOverview.tsx b/products/replay_vision/frontend/replay_scanners/components/ScannerOverview.tsx
index d4a246a08ef9..535db64d0bf3 100644
--- a/products/replay_vision/frontend/replay_scanners/components/ScannerOverview.tsx
+++ b/products/replay_vision/frontend/replay_scanners/components/ScannerOverview.tsx
@@ -15,16 +15,18 @@ function OverviewPanel({
     title,
     subtitle,
     disabled,
+    fill,
     children,
 }: {
     title: string
     subtitle?: React.ReactNode
     disabled?: boolean
+    fill?: boolean
     children: React.ReactNode
 }): JSX.Element {
     return (
         <div
-            className={`border rounded p-4 space-y-3 ${
+            className={`border rounded p-4 space-y-3 ${fill ? 'h-full flex flex-col' : ''} ${
                 disabled ? 'bg-surface-secondary opacity-60' : 'bg-surface-primary'
             }`}
         >
@@ -184,8 +186,8 @@ function ScorerOverview({ scannerId }: { scannerId: string }): JSX.Element {
         )
     }
     return (
-        <OverviewPanel title="Score distribution" subtitle={`${scorerSummary.count} scored`}>
-            <div className="h-40 flex flex-col">
+        <OverviewPanel title="Score distribution" subtitle={`${scorerSummary.count} scored`} fill>
+            <div className="flex-1 min-h-40 flex flex-col">
                 <BarChart
                     labels={scorerHistogram.labels}
                     series={[{ key: 'count', label: 'Sessions', color: theme.colors[0], data: scorerHistogram.counts }]}
@@ -225,11 +227,12 @@ export function ScannerOverview({ scannerId }: { scannerId: string }): JSX.Eleme
     // Scorer puts its line chart and score-distribution histogram side by side to reclaim vertical space.
     if (scannerType === 'scorer') {
         return (
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 items-start">
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                 {/* min-w-0 lets the canvas charts shrink inside their grid tracks instead of overflowing */}
                 <div className="min-w-0">
                     <ScannerInsightsChart scannerId={scannerId} scannerType={scannerType} />
                 </div>
+                {/* The histogram fills to match the taller line chart, so the row has no dead space (stretch is the grid default). */}
                 <div className="min-w-0">{typeOverview}</div>
             </div>
         )