From 770cafd6cf24f5eaf32caf1f9ba936b04a6cbba4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Tue, 26 May 2026 08:47:12 +0200 Subject: [PATCH] Harden help overlay viewport fit on small iOS screens --- patterns/vsf-card-listen-fundamentalanalyse-drawer.html | 6 +++++- styles/10-components-interactive-elements.css | 5 +++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/patterns/vsf-card-listen-fundamentalanalyse-drawer.html b/patterns/vsf-card-listen-fundamentalanalyse-drawer.html index ace3e70..8a35e1d 100644 --- a/patterns/vsf-card-listen-fundamentalanalyse-drawer.html +++ b/patterns/vsf-card-listen-fundamentalanalyse-drawer.html @@ -458,8 +458,12 @@ return; } + const viewportWidth = window.visualViewport + ? window.visualViewport.width + : window.innerWidth; + const panelRect = panel.getBoundingClientRect(); - if (panelRect.right > window.innerWidth) { + if (panelRect.right > viewportWidth) { wrap.dataset.align = 'right'; } diff --git a/styles/10-components-interactive-elements.css b/styles/10-components-interactive-elements.css index 420769d..4b2e731 100644 --- a/styles/10-components-interactive-elements.css +++ b/styles/10-components-interactive-elements.css @@ -1008,9 +1008,10 @@ left: 0; z-index: var(--layer-pulldown-panel); display: none; - width: var(--layout-help-panel-width); - max-width: calc(100vw - (2 * var(--spacing-large))); + width: min(var(--layout-help-panel-width), calc(100dvw - (2 * var(--spacing-large)))); + max-width: calc(100dvw - (2 * var(--spacing-large))); box-sizing: border-box; + overflow-wrap: anywhere; padding: var(--spacing-large); border-radius: var(--radius-card); color: var(--text-help-panel);