Fix help icon overlay viewport handling on mobile

patterns/vsf-card-listen-fundamentalanalyse-drawer.html

@@ -428,7 +428,8 @@
 
     document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
       const button = wrap.querySelector('.sg-help-icon');
-      if (!button) {
+      const panel = wrap.querySelector('.sg-help-icon-panel');
+      if (!button || !panel) {
         return;
       }
 
@@ -449,8 +450,23 @@
             menuButton.setAttribute('aria-expanded', 'false');
           }
         });
+        wrap.dataset.align = 'left';
         wrap.dataset.open = String(nextState);
         button.setAttribute('aria-expanded', String(nextState));
+
+        if (!nextState) {
+          return;
+        }
+
+        const panelRect = panel.getBoundingClientRect();
+        if (panelRect.right > window.innerWidth) {
+          wrap.dataset.align = 'right';
+        }
+
+        const alignedPanelRect = panel.getBoundingClientRect();
+        if (alignedPanelRect.left < 0) {
+          wrap.dataset.align = 'left';
+        }
       });
     });
 

styles/10-components-interactive-elements.css

@@ -1009,6 +1009,8 @@
       z-index: var(--layer-pulldown-panel);
       display: none;
       width: var(--layout-help-panel-width);
+      max-width: calc(100vw - (2 * var(--spacing-large)));
+      box-sizing: border-box;
       padding: var(--spacing-large);
       border-radius: var(--radius-card);
       color: var(--text-help-panel);