[Nextcloud] Compose window title bar is behind Nextcloud menu : cannot click on Send button

[Mer0me]

Describe the bug
When I compose a new email in SnappyMail within Nextcloud, the compose window shows up but the title bar of this window is "behind" the Nextcloud menu so I can't click the buttons or close the compose windows.

To Reproduce
Steps to reproduce the behavior:

1. On Nextcloud / SnappyMail, click on new button
2. Try to click "send"

Expected behavior
Compose window should be in front of the Nextcloud interface

Screenshots

Please complete the following information:

• Browser: Firefox 91.8.0 ESR
• IMAP daemon: dovecot
• PHP version: 7.4
• SnappyMail Version: 2.21.1

Debug/logging information
not relevant

Additional context
Resolution of the screen : 1920x1080

[the-djmaze]

SnappyMail uses HTMLDialogElement.
This <dialog> is supported by Firefox 98+ and Safari 15.1+.
For older versions it uses polyfill code to simulate the behavior.
https://caniuse.com/dialog

The z-index of the dialogs start at 3000, and the Nextcloud 25 menu has z-index 2000.
In theory this should be sufficient, but somehow not with yours.

You can either:

1. upgrade Firefox to 102 ESR
2. inspect the element and tell us which z-index value solves your issue.

[Mer0me]

Z-index = 3001 => body of compose window is behind Nextcloud UI

Z-index = 3002 => body of compose window in front of Nextcloud UI but behind Nextcloud menu

Z-index= 3000000000000000000000000000000 => Nothing change

Unable to upgrade firefox here (office) but I'm sure it would solve the problem.

I confirm that the header (Nextcloud menu) has a z-index=2000

#body-user #header, #body-settings #header, #body-public #header {
    display: inline-flex;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2000;
    height: 50px;
    box-sizing: border-box;
    justify-content: space-between;

[the-djmaze]

Then you can do 2 additional tests:

#body-user #header, #body-settings #header, #body-public #header {
    position: fixed;

#content {
    z-index: 2001;

[the-djmaze]

Else the margin-top of the dialogs must become

dialog {
    margin-top: 50px

[Mer0me]

Else the margin-top of the dialogs must become

dialog {
    margin-top: 50px

This one works. Not your first proposition.