From 08fc6734cee142af7540df252c398ac74492661d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Wed, 14 Oct 2026 13:45:42 +0200
Subject: [PATCH] fix(options-row): define odd mobile pulldown layout

---
 patterns/options-row.html          | 2 +-
 styles/21-patterns-options-row.css | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/patterns/options-row.html b/patterns/options-row.html
index b275985..01de23b 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: Pulldowns stehen mit maximal zwei Elementen pro Zeile; ein Suchfeld steht immer allein in einer 100-%-Zeile.
+      Mobile: Pulldowns stehen mit maximal zwei Elementen pro Zeile; bei ungerader Anzahl steht der letzte Pulldown allein in einer 100-%-Zeile. Ein Suchfeld steht immer allein in einer 100-%-Zeile.
     </p>
 
     <div class="sg-options-row" aria-label="Optionszeile" data-pattern="options-row">
diff --git a/styles/21-patterns-options-row.css b/styles/21-patterns-options-row.css
index 4167ee3..e12f46e 100644
--- a/styles/21-patterns-options-row.css
+++ b/styles/21-patterns-options-row.css
@@ -105,6 +105,11 @@
     flex-basis: calc(50% - (var(--layout-options-row-group-gap) / 2));
   }
 
+  .sg-options-row:not(.sg-options-row--left-only) > .sg-options-row__left:has(> .sg-pulldown-demo:nth-last-child(2):nth-child(odd)) > .sg-pulldown-demo:nth-last-child(2),
+  .sg-options-row:not(.sg-options-row--left-only) > .sg-options-row__left:has(> .sg-pulldown-demo:last-child:nth-child(odd)) > .sg-pulldown-demo:last-child {
+    flex-basis: 100%;
+  }
+
   .sg-options-row--left-only .sg-options-row__left > .sg-pulldown-demo {
     flex-basis: 100%;
   }