From 33921a3f6e1a22bd7a1ab594ad6e5c97b9313ee1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Tue, 26 May 2026 08:52:53 +0200 Subject: [PATCH] Fix mobile overflow for tabs and help tooltips --- styles/10-components-interactive-elements.css | 11 +++++++++-- styles/32-patterns-card-group-keyboard-nav.css | 4 +++- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/styles/10-components-interactive-elements.css b/styles/10-components-interactive-elements.css index 4b2e731..c9a2ad5 100644 --- a/styles/10-components-interactive-elements.css +++ b/styles/10-components-interactive-elements.css @@ -1008,8 +1008,8 @@ left: 0; z-index: var(--layer-pulldown-panel); display: none; - width: min(var(--layout-help-panel-width), calc(100dvw - (2 * var(--spacing-large)))); - max-width: calc(100dvw - (2 * var(--spacing-large))); + width: var(--layout-help-panel-width); + max-width: calc(100vw - (2 * var(--spacing-large))); box-sizing: border-box; overflow-wrap: anywhere; padding: var(--spacing-large); @@ -1019,6 +1019,13 @@ box-shadow: var(--shadow-overlay); } + @supports (width: 100dvw) { + .sg-help-icon-panel { + width: min(var(--layout-help-panel-width), calc(100dvw - (2 * var(--spacing-large)))); + max-width: calc(100dvw - (2 * var(--spacing-large))); + } + } + .sg-help-icon-wrap[data-open="true"] .sg-help-icon-panel { display: block; } diff --git a/styles/32-patterns-card-group-keyboard-nav.css b/styles/32-patterns-card-group-keyboard-nav.css index 6f9c6a7..9dce0aa 100644 --- a/styles/32-patterns-card-group-keyboard-nav.css +++ b/styles/32-patterns-card-group-keyboard-nav.css @@ -44,6 +44,8 @@ ) / var(--sg-tab-mobile-row-slots, 1) ); - min-width: max-content; + min-width: 0; + white-space: normal; + overflow-wrap: anywhere; } }