fix: funnel visualization layout on wide screens#48211
Merged
pauldambra merged 5 commits intomasterfrom Feb 19, 2026
Merged
Conversation
Contributor
|
Size Change: +96 B (0%) Total Size: 100 MB ℹ️ View Unchanged
|
Contributor
Visual regression: Storybook UI snapshots updatedChanges: 6 snapshots (0 modified, 6 added, 0 deleted) What this means:
Next steps:
|
pauldambra
force-pushed
the
claude/slack-fix-funnel-gap-JYqvG
branch
from
341e053 to
efd9e7f
Compare
pauldambra
force-pushed
the
claude/slack-fix-funnel-gap-JYqvG
branch
from
efd9e7f to
4395ec1
Compare
pauldambra
commented
Feb 19, 2026
| setQuery(node) | ||
| }} | ||
| initialMaxPrompt="Show me users who " | ||
| className="EditorFiltersWrapper" |
Member
Author
There was a problem hiding this comment.
we were nesting EditorFiltersWrapper inside EditorFiltersWrapper which was making the filters invisibly wider than the space they actually took up, making the gap look larger
…on wide screens Add max-width constraint to horizontal insight layout to prevent the layout from expanding infinitely on very wide screens. This keeps the gap between the filters panel and visualization consistent regardless of screen width. Slack thread: https://posthog.slack.com/archives/C0ACRAMJUAG/p1771345079762019?thread_ts=1771344839.767199&cid=C0ACRAMJUAG https://claude.ai/code/session_01UbWf2AErhBrJpwv2VrhikC
Add three viewport variants of the funnel edit view (960px, 1300px, 1920px) to visually verify that the gap between filters and visualization stays consistent across screen widths. https://claude.ai/code/session_01UbWf2AErhBrJpwv2VrhikC
The colgroup was missing a <col> for the StepBarLabels column, so the trailing filler column (width=100%) mapped to the last step instead of an empty cell. This made the last step's cell stretch on wider viewports. Add the missing col for StepBarLabels and a filler <td> at the end of each row so the width=100% column absorbs leftover space properly. Also remove the max-width: 100rem workaround which is no longer needed. https://claude.ai/code/session_01UbWf2AErhBrJpwv2VrhikC
pauldambra
force-pushed
the
claude/slack-fix-funnel-gap-JYqvG
branch
from
4395ec1 to
2565317
Compare
pauldambra
changed the title
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| }} | ||
| initialMaxPrompt="Show me users who " | ||
| className="EditorFiltersWrapper" | ||
| className="EditorFiltersWrapper__max-tool" |
Contributor
There was a problem hiding this comment.
className change appears unnecessary - no CSS rules exist for EditorFiltersWrapper__max-tool, and the outer div at line 428 still has the EditorFiltersWrapper class that the CSS targets
Prompt To Fix With AI
This is a comment left during a code review.
Path: frontend/src/queries/nodes/InsightViz/EditorFilters.tsx
Line: 475
Comment:
className change appears unnecessary - no CSS rules exist for `EditorFiltersWrapper__max-tool`, and the outer `div` at line 428 still has the `EditorFiltersWrapper` class that the CSS targets
How can I resolve this? If you propose a fix, please make it concise.
Contributor
There was a problem hiding this comment.
Pull request overview
This PR addresses a layout issue in the Funnels insight editor on wide screens (excessive gap between the filter panel and the visualization) and adds Storybook coverage to validate the spacing across multiple viewport widths.
Changes:
- Add Storybook viewport variants (narrow/medium/wide) for the Funnels “edit” story to visually validate spacing across screen sizes.
- Adjust the
MaxToolwrapper class used inEditorFilters(to support the layout change). - Update/add Storybook visual snapshots for the new viewport variant(s).
Reviewed changes
Copilot reviewed 2 out of 8 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| frontend/src/scenes/insights/Funnels.stories.tsx | Adds funnel edit viewport variants to validate layout behavior across screen widths. |
| frontend/src/queries/nodes/InsightViz/EditorFilters.tsx | Changes the MaxTool wrapper class to support the updated editor layout behavior. |
| frontend/snapshots/scenes-app-insights-funnels--funnel-left-to-right-edit-medium--dark.png | Updates/adds the visual regression snapshot for the new funnel viewport story variant. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| FunnelLeftToRightEditMedium.parameters = { | ||
| testOptions: { | ||
| waitForSelector: ['[data-attr=funnel-bar-vertical] .StepBar', '.PayGateMini'], | ||
| viewport: { width: 1300, height: 720 }, |
There was a problem hiding this comment.
FunnelLeftToRightEditMedium is functionally identical to the existing FunnelLeftToRightEdit story (same fixture + edit mode, and the default meta viewport is already 1300x720). This duplication will generate extra snapshots and increase maintenance/runtime. Consider either (a) reusing/renaming the existing FunnelLeftToRightEdit as the “medium” baseline and only adding narrow/wide variants, or (b) changing the medium viewport to a distinct breakpoint you specifically want to cover.
Suggested change
| viewport: { width: 1300, height: 720 }, | |
| viewport: { width: 1440, height: 720 }, |
Contributor
Visual regression: Storybook UI snapshots updatedChanges: 2 snapshots (2 modified, 0 added, 0 deleted) What this means:
Next steps:
|
thmsobrmlr
approved these changes
Feb 19, 2026
Member
Author
Merge activity
|
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
3 participants
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 wide screens, the funnel visualization layout had too large a gap between filters and viz
the new snapshots will show that's no longer the case