From b34ceda1e3e301ab53e75dc55e964c652fad70c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Tue, 26 May 2026 08:56:54 +0200
Subject: [PATCH] Restore non-wrapping mobile tabs and clamp help tooltip in
 viewport

---
 ...card-listen-fundamentalanalyse-drawer.html | 19 +++++++++++++++++++
 .../32-patterns-card-group-keyboard-nav.css   | 13 +++----------
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/patterns/vsf-card-listen-fundamentalanalyse-drawer.html b/patterns/vsf-card-listen-fundamentalanalyse-drawer.html
index 8a35e1d..dd49935 100644
--- a/patterns/vsf-card-listen-fundamentalanalyse-drawer.html
+++ b/patterns/vsf-card-listen-fundamentalanalyse-drawer.html
@@ -453,6 +453,7 @@
         wrap.dataset.align = 'left';
         wrap.dataset.open = String(nextState);
         button.setAttribute('aria-expanded', String(nextState));
+        panel.style.removeProperty('transform');
 
         if (!nextState) {
           return;
@@ -471,6 +472,20 @@
         if (alignedPanelRect.left < 0) {
           wrap.dataset.align = 'left';
         }
+
+        const clampedRect = panel.getBoundingClientRect();
+        const safeInset = 8;
+        let shiftX = 0;
+
+        if (clampedRect.right > (viewportWidth - safeInset)) {
+          shiftX -= clampedRect.right - (viewportWidth - safeInset);
+        }
+        if ((clampedRect.left + shiftX) < safeInset) {
+          shiftX += safeInset - (clampedRect.left + shiftX);
+        }
+        if (shiftX !== 0) {
+          panel.style.transform = `translateX(${shiftX}px)`;
+        }
       });
     });
 
@@ -488,7 +503,11 @@
       if (!event.target.closest('.sg-help-icon-wrap')) {
         document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
           const button = wrap.querySelector('.sg-help-icon');
+          const panel = wrap.querySelector('.sg-help-icon-panel');
           wrap.dataset.open = 'false';
+          if (panel) {
+            panel.style.removeProperty('transform');
+          }
           if (button) {
             button.setAttribute('aria-expanded', 'false');
           }
diff --git a/styles/32-patterns-card-group-keyboard-nav.css b/styles/32-patterns-card-group-keyboard-nav.css
index 9dce0aa..2e1add6 100644
--- a/styles/32-patterns-card-group-keyboard-nav.css
+++ b/styles/32-patterns-card-group-keyboard-nav.css
@@ -37,15 +37,8 @@
 
 @media (max-width: 767px) {
   .sg-content-block-card-group__tabs[role="tablist"] > [role="tab"] {
-    flex: 0 0 calc(
-      (
-        100%
-        - (var(--spacing-small) * (var(--sg-tab-mobile-row-slots, 1) - 1))
-      )
-      / var(--sg-tab-mobile-row-slots, 1)
-    );
-    min-width: 0;
-    white-space: normal;
-    overflow-wrap: anywhere;
+    flex: 0 0 auto;
+    min-width: max-content;
+    white-space: nowrap;
   }
 }