fix: Adjust modal alignment to middle at breakpoint

Doist · Apr 18, 2024 · 7015c1c · 7015c1c
1 parent c3ac8d1
commit 7015c1c
Showing 1 changed file with 13 additions and 3 deletions.
diff --git a/src/modal/modal.module.css b/src/modal/modal.module.css
@@ -43,9 +43,6 @@
 .overlay.fitContent > [data-focus-lock-disabled] {
     padding-top: var(--reactist-modal-padding-top);
 }
-.overlay.fitContent > [data-focus-lock-disabled] .container {
-    max-height: calc(100vh - 2 * var(--reactist-modal-padding-top));
-}
 
 .container {
     box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
@@ -118,6 +115,19 @@
     }
 }
 
+@media (min-height: 800px) {
+    .overlay.fitContent > [data-focus-lock-disabled] .container {
+        max-height: calc(100vh - 2 * var(--reactist-modal-padding-top));
+    }
+}
+
+@media (max-height: 800px) {
+    .overlay.fitContent > [data-focus-lock-disabled] {
+        padding-top: var(--reactist-spacing-xxlarge);
+        justify-content: center;
+    }
+}
+
 /* header */
 
 .buttonContainer {