fix: dialog should maximize on small screens

markuczy · Oct 28, 2024 · 1623e31 · 1623e31
1 parent f02c5b1
commit 1623e31
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 0 deletions.
diff --git a/...rtal-layout-styles/src/styles/primeng/sass/theme/designer/components/overlay/_dialog.scss b/...rtal-layout-styles/src/styles/primeng/sass/theme/designer/components/overlay/_dialog.scss
@@ -62,3 +62,16 @@
     }
   }
 }
+
+@media (max-width: $smallScreenBreakpoint) {
+  .p-dialog.p-dialog {
+    transition: none;
+    transform: none;
+    width: 100vw !important;
+    height: 100vh !important;
+    top: 0px !important;
+    left: 0px !important;
+    max-height: 100%;
+    height: 100%;
+  }
+}
diff --git a/libs/portal-layout-styles/src/styles/primeng/sass/variables/layout/_layout_common.scss b/libs/portal-layout-styles/src/styles/primeng/sass/variables/layout/_layout_common.scss
@@ -7,3 +7,4 @@ $animationTimingFunction: cubic-bezier(0.05, 0.74, 0.2, 0.99) !default;
 $letterSpacing: normal !default;
 $transitionDuration: 0.2s !default;
 $mobileBreakpoint: 991px !default;
+$smallScreenBreakpoint: 576px !default;
diff --git a/libs/portal-layout-styles/src/styles/shell/_variables.scss b/libs/portal-layout-styles/src/styles/shell/_variables.scss
@@ -34,6 +34,7 @@ $submenuShadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.1
 $animationTimingFunction: cubic-bezier(0.05, 0.74, 0.2, 0.99) !default;
 // $transitionDuration: 0.2s !default;
 $mobileBreakpoint: 991px !default;
+$smallScreenBreakpoint: 576px !default;
 
 // Menu Light
 // $menuBgColor: #fdfeff;