🐛 Bug Report: some confirmation dialogs appear out of screen

[melnibon]

👟 Reproduction steps

When I click on some Delete buttons (APIkeys, users, collections...), their confirmation dialogs appear out of the screen, at least partially, making it impossible to click on buttons. And it is not possible to scroll to make the dialogs appear.

Inspecting the HTML and CSS, it looks like a CSS rule, @layer the-new-css-reset { does not include the <dialog> tag. When I manually add dialog, to the list, it works as expected.

:where(:not(html,
 dialog,
 iframe,
 canvas,
...

👍 Expected behavior

The dialogs should be centered on the screen, or at least, all their content must be accessible.

👎 Actual Behavior

Dialogs are truncated or invisible. This picture shows the bottom of my browser window:

🎲 Appwrite version

Version 1.3.x

💻 Operating system

Linux

🧱 Your Environment

Self-hosted Appwrite 1.3.7

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

[joeyouss]

Hi
Thank you for opening this.
I tried reproducing and seems like it is centered for me.

Kindly allow me to investigate about this more as to why this might be happening, this could be environment specific. Can you let me know what is the browser you are using?

[melnibon]

Hello Jyoti,
Thank you for your reply. Yes, it is surely related to my environment.

I tried on Windows, with Firefox 114.0.2 and Edge: it works perfectly. But on Debian, with Firefox 102.12.0esr, dialog boxes are not centered.

It has to do with this CSS rule:

@layer the-new-css-reset {
 *:where(:not(html,
 iframe,
 canvas,
 img,
 svg,
 video,
 audio):not(svg *,
 symbol *)) {
  all:unset;
  display:revert
 }

When I deactivate the all:unset rule (in the dev console) or when I add dialog to the where list, dialogs appear centered. There a a lot of items under all:unset, so I cannot determine which one is failing on my Firefox.

Ok this is not a question of Appwrite but on my specific version of Firefox. I can edit the rule until next update of my Firefox. So I close this ticket. Sorry for the worries.

Many thanks for your work on Appwrite

[joeyouss]

Good to know, thanks for the update