diff --git a/frontend/__snapshots__/components-cards-insight-card--insight-card.png b/frontend/__snapshots__/components-cards-insight-card--insight-card.png
index febbc6faf33b6..0a38b26952afc 100644
Binary files a/frontend/__snapshots__/components-cards-insight-card--insight-card.png and b/frontend/__snapshots__/components-cards-insight-card--insight-card.png differ
diff --git a/frontend/__snapshots__/exporter-exporter--funnel-left-to-right-breakdown-insight.png b/frontend/__snapshots__/exporter-exporter--funnel-left-to-right-breakdown-insight.png
index e7268e9e53d57..310cd26b65415 100644
Binary files a/frontend/__snapshots__/exporter-exporter--funnel-left-to-right-breakdown-insight.png and b/frontend/__snapshots__/exporter-exporter--funnel-left-to-right-breakdown-insight.png differ
diff --git a/frontend/__snapshots__/exporter-exporter--funnel-left-to-right-insight.png b/frontend/__snapshots__/exporter-exporter--funnel-left-to-right-insight.png
index dd65298c2ff8f..d4c096567c39b 100644
Binary files a/frontend/__snapshots__/exporter-exporter--funnel-left-to-right-insight.png and b/frontend/__snapshots__/exporter-exporter--funnel-left-to-right-insight.png differ
diff --git a/frontend/__snapshots__/scenes-app-dashboards--edit.png b/frontend/__snapshots__/scenes-app-dashboards--edit.png
index b7fe0d4edb8c0..89cb4fa56f224 100644
Binary files a/frontend/__snapshots__/scenes-app-dashboards--edit.png and b/frontend/__snapshots__/scenes-app-dashboards--edit.png differ
diff --git a/frontend/__snapshots__/scenes-app-dashboards--show.png b/frontend/__snapshots__/scenes-app-dashboards--show.png
index 432321bdd4a81..11b82f1a6edce 100644
Binary files a/frontend/__snapshots__/scenes-app-dashboards--show.png and b/frontend/__snapshots__/scenes-app-dashboards--show.png differ
diff --git a/frontend/__snapshots__/scenes-app-experiments--complete-funnel-experiment.png b/frontend/__snapshots__/scenes-app-experiments--complete-funnel-experiment.png
index 5f7c428ad21dd..3831be858dd60 100644
Binary files a/frontend/__snapshots__/scenes-app-experiments--complete-funnel-experiment.png and b/frontend/__snapshots__/scenes-app-experiments--complete-funnel-experiment.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right--webkit.png
index f62fd32d947ea..336a737d983af 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right--webkit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right--webkit.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown--webkit.png
index 9dd59f171f782..b22467c95b46c 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown--webkit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown--webkit.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit--webkit.png
index a290aabaf2c89..8bcadaeddb713 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit--webkit.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit.png
index 61758c0e5908a..48c95635cae74 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown.png
index f0f18dad2910e..3f300c2fb4964 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit--webkit.png
index 0e7909e11f451..9a4387639a76b 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit--webkit.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit.png
index 9e9adda1263cd..ad2443cc98efa 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right.png
index 74c7c60a50e11..f437b0531a705 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right.png differ
diff --git a/frontend/__snapshots__/scenes-app-project-homepage--project-homepage.png b/frontend/__snapshots__/scenes-app-project-homepage--project-homepage.png
index 774aa3c97a3e1..e68bb4406ab67 100644
Binary files a/frontend/__snapshots__/scenes-app-project-homepage--project-homepage.png and b/frontend/__snapshots__/scenes-app-project-homepage--project-homepage.png differ
diff --git a/frontend/src/scenes/funnels/FunnelBarChart/FunnelBarChart.scss b/frontend/src/scenes/funnels/FunnelBarChart/FunnelBarChart.scss
index b4a3090c12a25..6b1aea45485cc 100644
--- a/frontend/src/scenes/funnels/FunnelBarChart/FunnelBarChart.scss
+++ b/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) {
diff --git a/frontend/src/scenes/funnels/FunnelBarChart/FunnelBarChart.tsx b/frontend/src/scenes/funnels/FunnelBarChart/FunnelBarChart.tsx
index db04937511c85..bd18eb7fdcbad 100644
--- a/frontend/src/scenes/funnels/FunnelBarChart/FunnelBarChart.tsx
+++ b/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 (
-
-
- {visibleStepsWithConversionMetrics.map((_, i) => (
-
- ))}
-
- {/* The last column is meant to fill up leftover space. */}
-
-
-
-
-
- |
- {visibleStepsWithConversionMetrics.map((step, stepIndex) => (
-
-
- |
- ))}
-
-
- |
- {visibleStepsWithConversionMetrics.map((step, stepIndex) => (
-
-
- |
- ))}
-
-
-
- )
- }, [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 (
- {table}
+
+
+ {visibleStepsWithConversionMetrics.map((_, i) => (
+
+ ))}
+
+ {/* The last column is meant to fill up leftover space. */}
+
+
+
+
+
+ |
+ {visibleStepsWithConversionMetrics.map((step, stepIndex) => (
+
+
+ |
+ ))}
+
+
+ |
+ {visibleStepsWithConversionMetrics.map((step, stepIndex) => (
+
+
+ |
+ ))}
+
+
+
)