website
website copied to clipboard
Mobile Overflow Issue for Live Examples on Homepage
Bug report
Current Behavior
When clicking on the rightmost examples on smaller screen widths, content overflows horizontally and causes a black bar on right side of screen.
Video of issue:
https://github.com/radix-ui/website/assets/25971591/786acd40-6112-413e-8efc-bbbc01184bc4
Expected behavior
Preview of live example stays within rightmost bound of parent container, preventing overflow.
Reproducible example
- Go to Radix UI homepage: https://www.radix-ui.com/
- Click on one of the rightmost examples (first to cause overflow will vary based on phone width, for me it starts on the fourth example)
Suggested solution
I'm assuming something similar to the Radix Hover Card or Tooltip primitives are used here, and in that case would use the avoidCollisions
prop or possibly an updated collisionBoundary
. Hopefully an implementation bug and not a bug within a primitive.
Additional context
None
Your environment
- Samsung Galaxy S23 Ultra
- Android 13, One UI 5.1
- Vivaldi browser (chronium-based)
Hi, I can fix this issue if no one has been assigned to this