[base-ui][docs] Placement rendering error in the Popup demos

[EyaOuenniche]

Steps to reproduce

Link to live example: https://mui.com/base-ui/react-popup/

Steps:
1.Go to the Base UI Popup component demo.
2.Set the placement to "top-start."
3.Observe that the pop-up appears at the top-end instead.

Current behavior

The demo for the Base UI Popup component appears to have an issue with placement rendering. When selecting the placement as "top-start," the pop-up is displayed at the top-end instead. Similarly, when choosing "top-end," the pop-up appears at the top-start. The same issue occurs for placements related to the bottom.

2024-02-03.18-10-32.mp4

Expected behavior

I expect the pop-up placement in the demo to match the selected placement setting. For example, when choosing "top-start," the pop-up should appear at the top-start position, not top-end.

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Bug , Demo, Placement, Popup , Base UI

[danilo-leal]

Hey there @EyaOuenniche; thanks for opening the issue! I don't see the problem, though — top/bottom-start and end look correct to me. How visually different were you expecting it to be?

top-start	top-end

[EyaOuenniche]

Thank your for your response.
According to me I think that top-start should be at the left and top-end should be at the right.

[danilo-leal]

I agree, yeah! And it is that way already, no? In the top-start example, the popup container is anchored at the left edge of the "Anchor" button, similarly to the top-end (anchored to the right).

[EyaOuenniche]

I understand yes
My perspective of the visualization was that for the top-start the whole popup will slide to the left meaning that the end of the popup will be anchored with the right edge of the button .

[danilo-leal]

Gotcha. That's how you should see the anchor button's start, center, and end edges, as the popup's placement is relative to that — hope it helps!

[EyaOuenniche]

Yes I understand .
Thank you!

[danilo-leal]

Sweet — do you still think there's a problem or can we close the issue?

[EyaOuenniche]

No, everything is clear now
We can close the issue
Thank you