[bug]: post-popovercontainer promotes to Top Layer, causing UI overlap issues

[alionazherdetska]

The post-popovercontainer component is automatically promoted to the top layer when used (due to its implementation of the popover attribute). This behavior causes conflicts in UI layering:

1. Overlapping Issues:

The post-popovercontainer appears above critical elements like the header (e.g., tooltips or popovers overlapping the header).
https://github.com/user-attachments/assets/ce080ac9-4922-40e3-9bb9-11ffc7ebb735

2. Layering Conflicts:
If the header is also implemented as a top-layer element, post-popovercontainer used in megadropdown added later take precedence in the top layer, rendering firing the animation on top of the header.
https://github.com/user-attachments/assets/45fc6112-de58-4f1b-8623-18e0d88d5fe5

Desktop:

• OS: [e.g., Windows 11]
• Browser: [e.g., Chrome, Edge]
• Version 131.0.6778.140

Tasks

Preview Give feedback

1. Add a margin top (floating ui padding) to the popovercontainer that corresponds with the header height in order to prevent popovercontainer things from floating on top of the header
2. Try and hide the popover container when it is over the header #4833
   📦 components +1

[gfellerph]

Resolution: Remove popovercontainer from the megadropdown and add a margin top to floating ui corresponding to the header height and accept that open popovers or tooltips overlap the header because they are in the top layer.

[alizedebray]

The hide feature of the floating UI middleware (https://floating-ui.com/docs/hide) may enable us to easily hide the popover when it is over the header.

[gfellerph]

The hide feature of the floating UI middleware (https://floating-ui.com/docs/hide) may enable us to easily hide the popover when it is over the header.

Not sure if we want to auto-hide something the user opened on scroll, we don't do that with anything else. My thought was just to flip positions a little bit earlier when the position is 'top'.

[alizedebray]

The hide feature of the floating UI middleware (https://floating-ui.com/docs/hide) may enable us to easily hide the popover when it is over the header.

Not sure if we want to auto-hide something the user opened on scroll, we don't do that with anything else. My thought was just to flip positions a little bit earlier when the position is 'top'.

@gfellerph do we have anything else overflowing the header?
The hide feature would not close the popovercontainer just hide it so that it seams to slide behind the header, after its position as been flipped. And if the user scrolls back in the other direction, the popovercontainer becomes visible again, and then flips back to its original position.

I also checked the native select and the default behavior is either to close the popup menu (Chrome) or to prevent scroll (Firefox).

Since we already have a resolution for this ticket so I am fine with simply implementing it, I added this comment as additional possibility.

[gfellerph]

@alizedebray I did not consider just hiding it, that might indeed be the best way to handle it. @alionazherdetska can you check in connection with the new header height measurement?