From 5da22035171ad2f46d4242e88c2492ece1769570 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Mon, 25 May 2026 08:53:56 +0200
Subject: [PATCH] Fix multiselect label column collapse and restore control
 offset

---
 patterns/multiselektions-pulldown.html | 10 ++++++++--
 styles/25-patterns-form-sections.css   | 12 ++++++++++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/patterns/multiselektions-pulldown.html b/patterns/multiselektions-pulldown.html
index c9ff7ef..26ad618 100644
--- a/patterns/multiselektions-pulldown.html
+++ b/patterns/multiselektions-pulldown.html
@@ -397,13 +397,17 @@
 
           let maxWidth = 0;
           labels.forEach((label) => {
-            const width = Math.ceil(label.getBoundingClientRect().width);
+            const width = Math.ceil(label.scrollWidth || label.getBoundingClientRect().width);
             if (width > maxWidth) {
               maxWidth = width;
             }
           });
 
-          panel.style.setProperty('--sg-multiselect-label-column-width', `${maxWidth}px`);
+          if (maxWidth > 0) {
+            panel.style.setProperty('--sg-multiselect-label-column-width', `${maxWidth}px`);
+          } else {
+            panel.style.removeProperty('--sg-multiselect-label-column-width');
+          }
         });
       };
 
@@ -522,6 +526,8 @@
             return;
           }
 
+          updateMultiselectLabelAlignment();
+
           const panel = demo.querySelector('.sg-pulldown-panel');
           if (!panel) {
             return;
diff --git a/styles/25-patterns-form-sections.css b/styles/25-patterns-form-sections.css
index b8a8c64..7613c87 100644
--- a/styles/25-patterns-form-sections.css
+++ b/styles/25-patterns-form-sections.css
@@ -77,6 +77,12 @@
   --sg-multiselect-label-column-width: max-content;
 }
 
+.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] > .sg-label,
+.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-label,
+.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__label {
+  white-space: nowrap;
+}
+
 .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] {
   display: grid;
   grid-template-columns: max-content var(--sg-multiselect-label-column-width) minmax(0, 1fr) auto;
@@ -162,6 +168,12 @@
     row-gap: var(--spacing-small);
   }
 
+  .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] > .sg-label,
+  .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-label,
+  .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__label {
+    white-space: normal;
+  }
+
   .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-mode-toggle {
     grid-column: 1;
     grid-row: 1;