Merge pull request #594 from KhronosGroup/fix/mobileMenuHeight

Fix UI cutoff on mobile

Author: UX3D-haertl

src/ui/sass.scss

@@ -94,7 +94,7 @@ body
 /* tab selection on the right */
 .b-tabs.is-vertical
 {
-    height: 100vh;
+    height: 100dvh;
 }
 
 nav.tabs
@@ -133,12 +133,12 @@ nav.tabs
 // handle options placement
 .tabs li:first-child
 {
-    margin-top: calc(100vh * 0.11);
+    margin-top: calc(100dvh * 0.11);
 }
 .tabs li:nth-child(7)
 {
     margin-top: auto;
-    margin-bottom: calc(100vh * 0.02);
+    margin-bottom: calc(100dvh * 0.02);
 }
 
 .tabs li a

src/ui/ui.js

@@ -125,7 +125,7 @@ const appCreated = createApp({
     },
     beforeMount: function(){
         // Definition of mobile: https://bulma.io/documentation/start/responsiveness/
-        if(window.innerWidth > 768) { 
+        if(document.documentElement.clientWidth > 768) { 
             this.uiVisible = true;
             this.isMobile = false;
         } else {