From f42bd57c7d80f87b2312d8c9acb94497e66554de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Mon, 25 May 2026 07:07:56 +0200
Subject: [PATCH] feat(components): make pulldown responsive like single-line
 input

---
 styleguide.css | 55 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)

diff --git a/styleguide.css b/styleguide.css
index a1e16fb..70bec7c 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -790,6 +790,39 @@ section + section {
       box-sizing: border-box;
     }
 
+    #component-pulldown .sg-form-preview-area {
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    #component-pulldown .sg-state-example {
+      grid-template-columns: calc(var(--interaction-height) * 6) minmax(0, 1fr);
+      width: 100%;
+    }
+
+    #component-pulldown .sg-state-example > :last-child {
+      width: 100%;
+      min-width: 0;
+    }
+
+    #component-pulldown .sg-pulldown-demo {
+      width: 100%;
+      min-width: 0;
+      max-width: var(--layout-input-field-max-width);
+    }
+
+    #component-pulldown .sg-pulldown-demo__trigger,
+    #component-pulldown .sg-state-example > .sg-pulldown {
+      width: 100%;
+      min-width: 0;
+      max-width: 100%;
+    }
+
+    #component-pulldown .sg-activatable-row {
+      width: 100%;
+      max-width: var(--layout-input-field-max-width);
+    }
+
     .sg-input-component .sg-state-example {
       grid-template-columns: calc(var(--interaction-height) * 6) minmax(0, 1fr);
     }
@@ -801,17 +834,39 @@ section + section {
         box-sizing: border-box;
       }
 
+      #component-pulldown .sg-form-preview-area {
+        width: 100%;
+        max-width: 100%;
+        box-sizing: border-box;
+      }
+
       .sg-input-component .sg-state-example {
         grid-template-columns: 1fr;
         align-items: start;
         width: 100%;
       }
 
+      #component-pulldown .sg-state-example {
+        grid-template-columns: 1fr;
+        align-items: start;
+        width: 100%;
+      }
+
       .sg-input-component .sg-state-example > :last-child {
         width: 100%;
         min-width: 0;
       }
 
+      #component-pulldown .sg-state-example > :last-child {
+        width: 100%;
+        min-width: 0;
+      }
+
+      #component-pulldown .sg-activatable-row {
+        width: 100%;
+        max-width: 100%;
+      }
+
       .sg-labeled-input-row {
         flex-direction: column;
         align-items: flex-start;