From 25c76545346d459f96042ea668b1cabe2235ba70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Wed, 20 May 2026 13:16:57 +0200
Subject: [PATCH] Set multiselect panel width and clamp panel inside viewport

---
 patterns/multiselektions-pulldown.html | 20 ++++++++++++++------
 styleguide.css                         | 11 +++--------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/patterns/multiselektions-pulldown.html b/patterns/multiselektions-pulldown.html
index a244b10..6a38cf6 100644
--- a/patterns/multiselektions-pulldown.html
+++ b/patterns/multiselektions-pulldown.html
@@ -404,15 +404,23 @@
             return;
           }
 
-          const panelRect = panel.getBoundingClientRect();
-          if (panelRect.right > window.innerWidth) {
-            demo.dataset.align = 'right';
+          const viewportInset = 16;
+          demo.dataset.align = 'left';
+          panel.style.left = '0px';
+          panel.style.right = 'auto';
+
+          const initialRect = panel.getBoundingClientRect();
+          let offsetX = 0;
+
+          if (initialRect.right > window.innerWidth - viewportInset) {
+            offsetX -= initialRect.right - (window.innerWidth - viewportInset);
           }
 
-          const alignedPanelRect = panel.getBoundingClientRect();
-          if (alignedPanelRect.left < 0) {
-            demo.dataset.align = 'left';
+          if (initialRect.left + offsetX < viewportInset) {
+            offsetX += viewportInset - (initialRect.left + offsetX);
           }
+
+          panel.style.left = `${offsetX}px`;
         });
       });
 
diff --git a/styleguide.css b/styleguide.css
index 04befd9..30f9fa5 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -1873,18 +1873,13 @@ section + section {
   margin-top: var(--spacing-small);
 }
 
-.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-demo {
-  width: 500px;
-  max-width: 100%;
-}
-
-.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-demo .sg-pulldown-demo__trigger,
 .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-demo .sg-pulldown-panel {
-  width: 100%;
+  width: 500px;
+  max-width: calc(100vw - (2 * var(--spacing-large)));
 }
 
 @media (max-width: 48rem) {
-  .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-demo {
+  .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel {
     width: 80vw;
   }
 }