[Bug]: Dialog in stacking context behind Header

[xXNickznXx]

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for an issue that matches the one I want to file, without success.

Bug type

Accessibility

It affects the following packages

Components

Which version of Lyne Components are you using

2.0.1

Operating system

No response

Browser / Browser version

No response

Input mode

None

Additional settings

No response

What happened?

Dialogs with a lot of content get partially hidden behind the header if they are in a different stacking context.

I have noticed this on desktop with dialogs inside the sidebar of the map-container element: https://stackblitz.com/edit/on-desktop-dialog-in-map-container-behind-header?file=src%2Fmain.html,src%2Fstyles.css

I have also created a simple reproduction without the map-container: https://stackblitz.com/edit/dialog-in-stacking-context-behind-header?file=src%2Fmain.html,src%2Fstyles.css

Steps to reproduce the issue

map-container example:

1. Open stackblitz
2. Be on desktop (sidebar and map side by side)
3. Click the "Open dialog" button
   Result: dialog partially behind header

without map-container example:

1. Open stackblitz
2. Click the "Open dialog (behind header)" button

Result: dialog partially behind header

3. Click the "Open dialog (infront header)" button

Result: dialog is infront of header

Relevant log output

No response

[jeripeierSBB]

Hi @xXNickznXx, thanks for the report. We can't improve this until we can use the popoverAPI (needs 0.5 to 1 year). But you could place the dialog outside your stacking context while keeping the button to trigger it inside.