From 36f2b1a555206cb2712275f6015b0195442369ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Tue, 19 May 2026 20:16:16 +0200
Subject: [PATCH] Stack test pulldown slider label above control on mobile

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

diff --git a/styleguide.css b/styleguide.css
index 273470f..a8d78e1 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -1859,6 +1859,22 @@ section + section {
   margin-top: var(--spacing-small);
 }
 
+@media (max-width: 48rem) {
+  .sg-pulldown-demo--single-slider-test .sg-pulldown-panel .sg-slider-row[data-activatable="true"] {
+    flex-wrap: wrap;
+  }
+
+  .sg-pulldown-demo--single-slider-test .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-label {
+    min-width: 100%;
+    flex: 0 0 100%;
+  }
+
+  .sg-pulldown-demo--single-slider-test .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider {
+    flex: 1 1 auto;
+    width: auto;
+  }
+}
+
 .sg-form-sections-card__actions {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));