Mobile Overflow Issue for Live Examples on Homepage

[salemlf]

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

1. Go to Radix UI homepage: https://www.radix-ui.com/
2. 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)

[AbhayJha24]

Hi, I can fix this issue if no one has been assigned to this