Let the brief panel scroll and fit a phone screen - #5
Merged
Merged
Conversation
The popover had a fixed 20rem width and no height cap, so a five-field brief ran past the bottom of a phone viewport with no way to reach the rest. Cap the height at the room Radix measures (--radix-popover-content-available-height, with a vh fallback for when collision detection is skipped) and scroll inside it, with overscroll-contain so the thread behind does not move. Use near-full width on a compact viewport and keep the fixed column on a wide one. The max height is an inline style rather than a Tailwind arbitrary value so it does not depend on what the plugin's Tailwind pass emits. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
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.
The popover had a fixed
w-80and no height cap or overflow, so a five-field brief ran past the bottom of a phone viewport with no way to reach the rest of it.--radix-popover-content-available-height, with a70vhfallback for when collision detection is skipped, and the panel scrolls inside that.overscroll-containkeeps the thread behind from scrolling once the panel hits its end.calc(100vw-1rem)) on a compact viewport, the fixed column on a wide one, via theisCompactViewportprop the slot already receives.collisionPadding={8}so it never sits flush against an edge.The max height is an inline style rather than a Tailwind arbitrary value, because the plugin's Tailwind pass emits default-theme utilities only and I did not want the fix to depend on what it chose to generate.
Two tests cover it, and I checked they fail when the overflow classes are removed rather than passing for their own reasons. 79 passing.
Verified in jsdom, not on a real phone — worth a look on your device, since viewport behaviour is exactly the kind of thing jsdom will happily lie about.
🤖 Generated with Claude Code