fix: dialog overflowing bottom of viewport in mobile (#2052)

Frontify · Sep 13, 2024 · 6f7840d · 6f7840d
1 parent ad7ece2
commit 6f7840d
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/.changeset/cyan-buckets-switch.md b/.changeset/cyan-buckets-switch.md
@@ -0,0 +1,5 @@
+---
+"@frontify/fondue-components": patch
+---
+
+fix: dialog overflowing bottom of viewport in mobile
diff --git a/packages/components/src/components/Dialog/styles/dialog.module.scss b/packages/components/src/components/Dialog/styles/dialog.module.scss
@@ -11,15 +11,15 @@
     left: sizeToken(2);
     right: sizeToken(2);
     top: 50%;
-    transform: translateY(calc(50% + 5dvh));
+    transform: translateY(-50%);
     background-color: var(--base-color);
     box-shadow: var(--shadow-matrix);
     border: var(--line-width) solid var(--line-color);
     z-index: 1;
     max-width: var(--dialog-max-width);
     height: fit-content;
     min-height: var(--dialog-min-height);
-    max-height: 90dvh;
+    max-height: calc(100dvh - 10rem);
     overflow: hidden;
     grid-template-rows: auto auto minmax(0, 1fr) auto;
     box-sizing: border-box;