[yew-devel] [PATCH proxmox-yew-widget-toolkit-assets] change vh/vw to dvh/dvw

[Dominik Csapak]

using 100vh/vw as the viewport height/width works most of the time, but
on mobile this might be bigger than the viewable part, since the address
bar sometimes is added to that size, even if visible.

to always really show the visible part, use 'dvh/dvw' which are the
'dynamic viewport height/width' and always is the viewable part of the
screen.

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 scss/_dialog.scss    | 4 ++--
 scss/_dropdown.scss  | 4 ++--
 scss/_menu.scss      | 4 ++--
 scss/_utilities.scss | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/scss/_dialog.scss b/scss/_dialog.scss
index 3474b77..cd9d533 100644
--- a/scss/_dialog.scss
+++ b/scss/_dialog.scss
@@ -138,8 +138,8 @@ dialog.pwt-outer-dialog {
     width: 100vw;
     max-width: 100vw;
 
-    height: 100vh;
-    max-height: 100vh;
+    height: 100dvh;
+    max-height: 100dvh;
 
     margin: 0px;
     padding: 0px;
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index b07f2cc..671b872 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -6,8 +6,8 @@
 
     @include elevation-box-shadow(1);
 
-    max-height: 100vh;
-    max-width: 100vw;
+    max-height: 100dvh;
+    max-width: 100dvw;
     /* make e.g. the header menu overflow visible */
     overflow: visible;
 }
diff --git a/scss/_menu.scss b/scss/_menu.scss
index 1d35c9e..1f81a0f 100644
--- a/scss/_menu.scss
+++ b/scss/_menu.scss
@@ -10,8 +10,8 @@
 
 	@include elevation-box-shadow(2);
 
-	max-height: 100vh;
-	max-width: 100vw;
+	max-height: 100dvh;
+	max-width: 100dvw;
 
 	.pwt-menu {
 		overflow: hidden;
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index c658885..b52201c 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -188,8 +188,8 @@ $height-width-values: (
     left: 0;
     position: absolute;
     display: flex !important;
-    width: 100vw !important;
-    height: 100vh !important;
+    width: 100dvw !important;
+    height: 100dvh !important;
     overflow: hidden !important;
     box-sizing: border-box;
 }
-- 
2.39.5