fix(v4): correct React Aria overlay positioning

[chahatkesh]

What

Scopes body { position: relative; } to iOS Safari and adds a PostCSS regression test for the global positioning rule.

Why

React Aria popovers are portaled to body and positioned absolutely. When a tall menu near the top of the viewport flips upward, React Aria emits a bottom offset relative to the viewport. The global positioned body changed that containing block to the full document, so the first LTR dropdown menu was rendered near the RTL example at the bottom of the page.

The body positioning was introduced for Base UI Drawer on iOS Safari, where its backdrop switches to position: absolute. Applying the body rule only under the matching @supports (-webkit-touch-callout: none) query preserves that requirement without affecting Chrome and other browsers.

Reproduction

Playwright on the live React Aria dropdown page at 1280x720 measured:

• trigger: Y 387
• menu before fix: Y 8379, beside the RTL section
• menu after the scoped rule: Y 57, 9px from the trigger

Additional Playwright checks kept a scrolled LTR menu and the RTL menu within 6px of their triggers on desktop, and the top LTR/RTL menus within 7px on a 390x844 mobile viewport.

Verification

• pnpm exec vitest run apps/v4/app/globals.test.ts (1 passed)
• NODE_OPTIONS=--max-old-space-size=4096 pnpm --filter=v4 typecheck
• pnpm --filter=v4 exec eslint app/globals.test.ts
• pnpm exec prettier --check apps/v4/app/globals.css apps/v4/app/globals.test.ts
• Playwright: desktop and mobile LTR/RTL trigger-to-menu positioning

Reviewer notes

• The Base UI Drawer iOS behavior remains unchanged because the body stays positioned whenever -webkit-touch-callout is supported.
• No component API or generated registry output changes.

Closes #11213

[vercel]

@chahatkesh is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.