fix(funnels): fix infinite scroll caused by scrollbar (#18848)

frontend/src/scenes/funnels/FunnelBarChart/FunnelBarChart.scss

@@ -10,6 +10,8 @@
     table {
         --bar-width: 0.5rem; // This should be overriden from React
         --bar-row-height: 18rem;
+        --bar-padding-top: 1rem;
+        --bar-padding-bottom: 1.5rem;
 
         width: 100%;
         height: 100%;
@@ -20,8 +22,8 @@
                     border-bottom: 1px solid var(--border);
 
                     > td {
-                        padding: 1.5rem 0;
-                        padding-top: 1rem;
+                        padding-top: var(--bar-padding-top);
+                        padding-bottom: var(--bar-padding-bottom);
                     }
                 }
 
@@ -40,7 +42,7 @@
 }
 
 .StepBarLabels {
-    height: calc(var(--bar-row-height) - 3rem);
+    height: calc(var(--bar-row-height) - var(--bar-padding-top) - var(--bar-padding-bottom));
     display: flex;
     flex-direction: column-reverse;
     align-items: flex-end;
@@ -68,7 +70,7 @@
     align-items: flex-end;
     gap: 0.125rem;
     border-bottom: 1px solid var(--border);
-    height: calc(var(--bar-row-height) - 3rem);
+    height: calc(var(--bar-row-height) - var(--bar-padding-top) - var(--bar-padding-bottom));
     padding: 0 1rem;
 
     &:not(.StepBars--first) {

frontend/src/scenes/funnels/FunnelBarChart/FunnelBarChart.tsx

@@ -4,7 +4,7 @@ import clsx from 'clsx'
 import { useValues } from 'kea'
 import { useResizeObserver } from 'lib/hooks/useResizeObserver'
 import { useScrollable } from 'lib/hooks/useScrollable'
-import { useMemo } from 'react'
+import { useLayoutEffect, useState } from 'react'
 import { insightLogic } from 'scenes/insights/insightLogic'
 
 import { ChartParams } from '~/types'
@@ -29,7 +29,8 @@ export function FunnelBarChart({ showPersonsModal: showPersonsModalProp = true }
     const vizRef = useFunnelTooltip(showPersonsModal)
 
     const [scrollRef, [isScrollableLeft, isScrollableRight]] = useScrollable()
-    const { height } = useResizeObserver({ ref: vizRef })
+    const { height: availableHeight } = useResizeObserver({ ref: vizRef })
+    const [scrollbarHeightPx, setScrollbarHeightPx] = useState(0)
 
     const seriesCount = visibleStepsWithConversionMetrics[0]?.nested_breakdown?.length ?? 0
     const barWidthPx =
@@ -55,57 +56,24 @@ export function FunnelBarChart({ showPersonsModal: showPersonsModalProp = true }
             ? 96
             : 192
 
-    const table = useMemo(() => {
-        /** Average conversion time is only shown if it's known for at least one step. */
-        // != is intentional to catch undefined too
-        const showTime = visibleStepsWithConversionMetrics.some((step) => step.average_conversion_time != null)
-        const barRowHeight = `calc(${height}px - 17px - 3rem - (1.75rem * ${showTime ? 3 : 2}) - 1px)`
+    useLayoutEffect(() => {
+        if (scrollRef.current) {
+            setScrollbarHeightPx(scrollRef.current.offsetHeight - scrollRef.current.clientHeight)
+        }
+    }, [availableHeight])
 
-        return (
-            <table
-                /* eslint-disable-next-line react/forbid-dom-props */
-                style={
-                    {
-                        '--bar-width': `${barWidthPx}px`,
-                        '--bar-row-height': barRowHeight,
-                    } as FunnelBarChartCSSProperties
-                }
-            >
-                <colgroup>
-                    {visibleStepsWithConversionMetrics.map((_, i) => (
-                        <col key={i} width={0} />
-                    ))}
-                    <col width="100%" />
-                    {/* The last column is meant to fill up leftover space. */}
-                </colgroup>
-                <tbody>
-                    <tr>
-                        <td>
-                            <StepBarLabels />
-                        </td>
-                        {visibleStepsWithConversionMetrics.map((step, stepIndex) => (
-                            <td key={stepIndex}>
-                                <StepBars step={step} stepIndex={stepIndex} showPersonsModal={showPersonsModal} />
-                            </td>
-                        ))}
-                    </tr>
-                    <tr>
-                        <td />
-                        {visibleStepsWithConversionMetrics.map((step, stepIndex) => (
-                            <td key={stepIndex}>
-                                <StepLegend
-                                    step={step}
-                                    stepIndex={stepIndex}
-                                    showTime={showTime}
-                                    showPersonsModal={showPersonsModal}
-                                />
-                            </td>
-                        ))}
-                    </tr>
-                </tbody>
-            </table>
-        )
-    }, [visibleStepsWithConversionMetrics, height])
+    /** Average conversion time is only shown if it's known for at least one step. */
+    // != is intentional to catch undefined too
+    const showTime = visibleStepsWithConversionMetrics.some((step) => step.average_conversion_time != null)
+
+    const stepLegendRows = showTime ? 4 : 3
+
+    // rows * (row height + gap between rows) - no gap for first row + padding top and bottom
+    const stepLegendHeightRem = stepLegendRows * (1.5 + 0.25) - 0.25 + 2 * 0.75
+    const borderHeightPx = 1
+
+    // available height - border - legend - (maybe) scrollbar
+    const barRowHeight = `calc(${availableHeight}px - ${borderHeightPx}px - ${stepLegendHeightRem}rem  - ${scrollbarHeightPx}px)`
 
     return (
         <div
@@ -118,7 +86,48 @@ export function FunnelBarChart({ showPersonsModal: showPersonsModalProp = true }
             data-attr="funnel-bar-graph"
         >
             <div className="scrollable__inner" ref={scrollRef}>
-                {table}
+                <table
+                    /* eslint-disable-next-line react/forbid-dom-props */
+                    style={
+                        {
+                            '--bar-width': `${barWidthPx}px`,
+                            '--bar-row-height': barRowHeight,
+                        } as FunnelBarChartCSSProperties
+                    }
+                >
+                    <colgroup>
+                        {visibleStepsWithConversionMetrics.map((_, i) => (
+                            <col key={i} width={0} />
+                        ))}
+                        <col width="100%" />
+                        {/* The last column is meant to fill up leftover space. */}
+                    </colgroup>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <StepBarLabels />
+                            </td>
+                            {visibleStepsWithConversionMetrics.map((step, stepIndex) => (
+                                <td key={stepIndex}>
+                                    <StepBars step={step} stepIndex={stepIndex} showPersonsModal={showPersonsModal} />
+                                </td>
+                            ))}
+                        </tr>
+                        <tr>
+                            <td />
+                            {visibleStepsWithConversionMetrics.map((step, stepIndex) => (
+                                <td key={stepIndex}>
+                                    <StepLegend
+                                        step={step}
+                                        stepIndex={stepIndex}
+                                        showTime={showTime}
+                                        showPersonsModal={showPersonsModal}
+                                    />
+                                </td>
+                            ))}
+                        </tr>
+                    </tbody>
+                </table>
             </div>
         </div>
     )