fix: Add workaround for Viewport definition in Mobile - MEED-2819 - M…

…eeds-io/meeds#1232 (#704) This change will allow to define a custom value for viewport definition to workaround the problem of viewport real size in Mobile Devices.
Meeds-io · Nov 21, 2023 · 04d1686 · 04d1686
1 parent 01ccc5f
commit 04d1686
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/platform-ui-skin/src/main/webapp/skin/less/core/layout/Style.less b/platform-ui-skin/src/main/webapp/skin/less/core/layout/Style.less
@@ -22,8 +22,8 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 /* ============= Shared Layout - Main Page Structure  ============= */
 #ParentSiteContainer {
   height: 100%;
-  min-height: 100vh;
-  max-height: 100vh;
+  min-height: ~"var(--100vh, 100vh)";
+  max-height: ~"var(--100vh, 100vh)";
   display: flex;
   flex-direction: row;
 
@@ -33,7 +33,7 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
     flex-grow: 0;
 
     #ParentSiteStickyMenu {
-      min-height: 100vh;
+      min-height: ~"var(--100vh, 100vh)";
     }
   }
 

diff --git a/platform-ui-skin/src/main/webapp/skin/less/vuetify/lib/vuetify.less b/platform-ui-skin/src/main/webapp/skin/less/vuetify/lib/vuetify.less
@@ -41,7 +41,7 @@
           backface-visibility: hidden;
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+  min-height: ~"var(--100vh, 100vh)";
   max-width: 100%;
   position: relative;
 }
@@ -27353,7 +27353,7 @@ html.overflow-y-hidden {
   width: 100%;
 }
 .v-snack:not(.v-snack--absolute) {
-  height: 100vh;
+  height: ~"var(--100vh, 100vh)";
   position: fixed;
   z-index: 1000;
 }

diff --git a/platform-ui-skin/src/main/webapp/skin/less/vuetify/vuetify-all.less b/platform-ui-skin/src/main/webapp/skin/less/vuetify/vuetify-all.less
@@ -180,7 +180,7 @@
     .v-dialog {
       transform: translate(0);
       max-width: 100vw !important;
-      max-height: 100vh;
+      max-height: ~"var(--100vh, 100vh)";
       margin: 0;
     }
 
@@ -194,9 +194,9 @@
       left: 0;
       right: 0;
       bottom: 0;
-      height: 100vh;
+      height: ~"var(--100vh, 100vh)";
       width: 100vw;
-      max-height: 100vh;
+      max-height: ~"var(--100vh, 100vh)";
       max-width: 100vw;
       overflow: hidden;
 
@@ -539,7 +539,7 @@
 @media (max-width : 959px) {
   .VuetifyApp .v-application {
     .uiPopup.v-dialog:not(.v-dialog--fullscreen) .v-card__text {
-      max-height: ~"calc(100vh - 235px)";
+      max-height: ~"calc(var(--100vh, 100vh) - 235px)";
       overflow-y: auto;
       overflow-x: hidden;
 
@@ -553,7 +553,7 @@
       border-radius: 4px;
       transform: translate(0);
       max-width: 100vw !important;
-      max-height: 100vh;
+      max-height: ~"var(--100vh, 100vh)";
       margin: 0;
     }