[preview card] Integrate inline positioning

[atomiks]

• [x] 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

https://github.com/user-attachments/assets/c73bdb71-7625-4c1c-9a9c-f54ccf7e3b53

[pkg-pr-new[bot]]

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 :no_entry_sign: dangerJS against 04fe93ce8280fcfc4e7b9ec4084392df8a9bf4ca

[netlify[bot]]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	f6338d241ea28fda60b45d2aa9059e02ea01bf2b
🔍 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.