From 285de988d0071bceff5d4155b67ac8b8470e8094 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Thu, 24 Sep 2026 12:56:38 +0200
Subject: [PATCH] fix: mobile layout for options row pattern

---
 patterns/options-row.html          | 49 +++++++++++++++++++++++++++++-
 styles/21-patterns-options-row.css | 26 +++++++++++++---
 2 files changed, 69 insertions(+), 6 deletions(-)

diff --git a/patterns/options-row.html b/patterns/options-row.html
index 4a36238..b275985 100644
--- a/patterns/options-row.html
+++ b/patterns/options-row.html
@@ -17,7 +17,7 @@
     </p>
 
     <p class="sg-table-label" style="color: var(--text-options-row-description);">
-      Mobile: rechte Optionen werden zum oberen Segment, linke Optionen zum unteren Segment; linke Optionen brechen innerhalb der verfügbaren Breite um.
+      Mobile: Pulldowns stehen mit maximal zwei Elementen pro Zeile; ein Suchfeld steht immer allein in einer 100-%-Zeile.
     </p>
 
     <div class="sg-options-row" aria-label="Optionszeile" data-pattern="options-row">
@@ -83,6 +83,20 @@
           </div>
         </div>
 
+        <div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="options-row" data-component-state="inactive-selectable">
+          <button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Very long English label for market selection" data-component-part="pulldown-trigger" data-label-base="Very long English market selection label">
+            Very long English market selection label
+          </button>
+
+          <div class="sg-pulldown-panel" aria-label="Opened market selection" data-component-part="pulldown-panel">
+            <ul class="sg-pulldown-option-list" aria-label="Market options">
+              <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
+                <span>United Kingdom</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+
         <div class="sg-search-field-row">
           <span class="sg-input-single-line-wrap sg-search-field-input" data-has-value="false" data-component="single-line-input" data-component-context="options-row" data-component-state="inactive-selectable">
             <input
@@ -120,6 +134,39 @@
     </div>
   </section>
 
+  <section id="pattern-options-row-mobile-cases">
+    <p class="sg-preview-label">Pattern: Options Row – Mobile-Fälle</p>
+    <p class="sg-table-label" style="color: var(--text-options-row-description);">
+      Prüffälle: kein Pulldown, ein Pulldown, Suchfeld ohne Ergebniszähler sowie lange deutsche Beschriftung.
+    </p>
+
+    <div class="sg-options-row sg-options-row--left-only" aria-label="Optionszeile ohne Pulldown" data-pattern="options-row-mobile-no-pulldown">
+      <div class="sg-options-row__left" data-pattern-part="options-row-primary-actions">
+        <div class="sg-search-field-row">
+          <span class="sg-input-single-line-wrap sg-search-field-input" data-has-value="false" data-component="single-line-input" data-component-context="options-row" data-component-state="inactive-selectable">
+            <input class="sg-interaction-element sg-input-single-line" type="text" placeholder="Suche ohne Ergebniszähler" aria-label="Suche ohne Ergebniszähler">
+            <button class="sg-input-clear-button" type="button" aria-label="Eingabe löschen">×</button>
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div class="sg-options-row sg-options-row--left-only" aria-label="Optionszeile mit einem Pulldown" data-pattern="options-row-mobile-one-pulldown">
+      <div class="sg-options-row__left" data-pattern-part="options-row-primary-actions">
+        <div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="options-row" data-component-state="inactive-selectable">
+          <button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Sehr lange deutsche Beschriftung für eine Auswahl" data-component-part="pulldown-trigger" data-label-base="Sehr lange deutsche Beschriftung für eine Auswahl">
+            Sehr lange deutsche Beschriftung für eine Auswahl
+          </button>
+          <div class="sg-pulldown-panel" aria-label="Geöffnete Auswahl" data-component-part="pulldown-panel">
+            <ul class="sg-pulldown-option-list" aria-label="Auswahloptionen">
+              <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Option</span></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
   <section id="pattern-options-row-left-only">
     <p class="sg-preview-label">Pattern: Options row left only</p>
 
diff --git a/styles/21-patterns-options-row.css b/styles/21-patterns-options-row.css
index 0b8dce1..2929d87 100644
--- a/styles/21-patterns-options-row.css
+++ b/styles/21-patterns-options-row.css
@@ -91,19 +91,35 @@
 
   .sg-options-row--left-only .sg-options-row__left {
     order: 0;
+    width: 100%;
     padding: 0;
     box-shadow: none;
   }
 
-  .sg-options-row__left > .sg-pulldown-demo,
-  .sg-options-row__left > .sg-input-single-line-wrap,
-  .sg-options-row__left > .sg-search-field-row {
-    flex: 1 1 calc(50% - var(--layout-options-row-group-gap));
+  .sg-options-row__left > .sg-pulldown-demo {
+    flex: 1 1 100%;
     min-width: 0;
   }
 
+  .sg-options-row__left:has(> .sg-pulldown-demo ~ .sg-pulldown-demo) > .sg-pulldown-demo {
+    flex-basis: calc(50% - (var(--layout-options-row-group-gap) / 2));
+  }
+
   .sg-options-row__left > .sg-search-field-row {
-    flex: 0 0 auto;
+    flex: 0 0 100%;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .sg-options-row__left > .sg-search-field-row > .sg-search-field-input {
+    flex: 1 1 auto;
+    width: auto;
+    min-width: 0;
+  }
+
+  .sg-options-row__left > .sg-search-field-row .sg-input-single-line {
+    width: 100%;
+    min-width: 0;
   }
 
   .sg-options-row__left > .sg-input-single-line-wrap .sg-input-single-line,