← Examples Gallery

Placement Sandbox

Visual test pages for the placement engine across every adapter. Each page has identical scenarios so you can compare behavior side by side.

What to look for: menus should never overflow the viewport. The right-edge scenarios (section 2) reproduce the TTT bug where "Browse filtered" opens a menu with long titles that extends past the right edge of the screen.

Adapters

Scenarios (same on every page)

1. Compass Rose — all 9 placements, centered trigger, happy path
2. Right-Edge Overflow — trigger near right edge, long titles, min-width: 200px
   • 2a: With placement="SE"
   • 2b: Without placement prop (CSS default)
3. Wide Menu Stress — min-width: 400px, right-aligned trigger
4. Dynamic Trigger Reflow — trigger that moves from left to right edge (Vue/React/Svelte/Solid only)
5. Corner Stress — triggers in all 4 corners with long-title menus
6. Long Menu — 14 items, should clamp to viewport and scroll internally

Quick start

cd examples/sites/ui-sandbox
./serve.sh