From: Dominik Csapak <d.csapak@proxmox.com>
To: yew-devel@lists.proxmox.com
Subject: [yew-devel] [PATCH proxmox-yew-widget-toolkit-assets] change vh/vw to dvh/dvw
Date: Fri, 27 Jun 2025 11:30:32 +0200 [thread overview]
Message-ID: <20250627093032.1744586-1-d.csapak@proxmox.com> (raw)
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@proxmox.com>
---
scss/_dialog.scss | 4 ++--
scss/_dropdown.scss | 4 ++--
| 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;
}
--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
_______________________________________________
yew-devel mailing list
yew-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel
next reply other threads:[~2025-06-27 9:30 UTC|newest]
Thread overview: 2+ messages / expand[flat|nested] mbox.gz Atom feed top
2025-06-27 9:30 Dominik Csapak [this message]
2025-06-27 11:56 ` [yew-devel] applied: " Dietmar Maurer
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=20250627093032.1744586-1-d.csapak@proxmox.com \
--to=d.csapak@proxmox.com \
--cc=yew-devel@lists.proxmox.com \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox