[preview card] Integrate inline positioning

[atomiks]

• I have followed (at least) the PR section of the contributing guide.

Part of #2064
Previously it would choose the whole bounding client rect rather than choosing an individual client rect. align="start" sort of alleviates this problem but you can't use center positioning or other sides.

https://deploy-preview-2074--base-ui.netlify.app/experiments/inline-positioning

Screen.Recording.2025-06-06.at.4.21.44.pm.mov

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@base-ui-components/react@2074

commit: 04fe93c

[mui-bot]

Bundle size report

Total Size Change:^{${\tiny{\color{red}▲}}$}+4.75KB^(+0.33%) - Total Gzip Change:^{${\tiny{\color{red}▲}}$}+1.67KB^(+0.35%)
Files: 41 total (0 added, 0 removed, 8 changed)

@base-ui-components/react parsed:^{${\tiny{\color{red}▲}}$}+2.23KB^(+0.74%) gzip:^{${\tiny{\color{red}▲}}$}+780B^(+0.86%)
@base-ui-components/react/preview-card parsed:^{${\tiny{\color{red}▲}}$}+2.23KB^(+3.84%) gzip:^{${\tiny{\color{red}▲}}$}+787B^(+3.97%)

Show 6 more bundle changes

@base-ui-components/react/select parsed:^{${\tiny{\color{red}▲}}$}+52B^(+0.05%) gzip:^{${\tiny{\color{red}▲}}$}+9B^(+0.02%)
@base-ui-components/react/context-menu parsed:^{${\tiny{\color{red}▲}}$}+48B^(+0.04%) gzip:^{${\tiny{\color{red}▲}}$}+9B^(+0.02%)
@base-ui-components/react/navigation-menu parsed:^{${\tiny{\color{red}▲}}$}+48B^(+0.06%) gzip:^{${\tiny{\color{red}▲}}$}+20B^(+0.07%)
@base-ui-components/react/tooltip parsed:^{${\tiny{\color{red}▲}}$}+48B^(+0.08%) gzip:^{${\tiny{\color{red}▲}}$}+21B^(+0.10%)
@base-ui-components/react/menu parsed:^{${\tiny{\color{red}▲}}$}+46B^(+0.04%) gzip:^{${\tiny{\color{red}▲}}$}+21B^(+0.06%)
@base-ui-components/react/popover parsed:^{${\tiny{\color{red}▲}}$}+46B^(+0.05%) gzip:^{${\tiny{\color{red}▲}}$}+27B^(+0.09%)

Details of bundle changes

Generated by 🚫 dangerJS against 04fe93c

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	f6338d2
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/68428a96c359ff000840bf20
😎 Deploy Preview	https://deploy-preview-2074--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.