From cca57b1dfea41ef01f015c98f16ea8b416125d14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Tue, 19 May 2026 15:46:15 +0200
Subject: [PATCH] Fix mobile slider label spacing and value wrapping

---
 styleguide.css | 43 +++++++++++++++++++++++++++++--------------
 1 file changed, 29 insertions(+), 14 deletions(-)

diff --git a/styleguide.css b/styleguide.css
index 1351771..e0a4f99 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -956,26 +956,41 @@ section + section {
     }
 
     @media (max-width: 48rem) {
-      .sg-slider-row {
-        flex-direction: column;
-        align-items: flex-start;
+      #component-slider .sg-state-example {
+        grid-template-columns: 1fr;
+        align-items: start;
+        width: 100%;
+      }
+
+      #component-slider .sg-state-example > :last-child {
+        width: 100%;
+        min-width: 0;
+      }
+
+      #component-slider .sg-slider-row {
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: center;
         width: 100%;
         max-width: 100%;
       }
 
-      .sg-slider-row .sg-label {
+      #component-slider .sg-slider-row .sg-label {
+        min-width: 100%;
+        flex: 0 0 100%;
+      }
+
+      #component-slider .sg-slider {
+        flex: 1 1 auto;
+        width: auto;
+        max-width: none;
         min-width: 0;
+      }
+
+      #component-slider .sg-slider-value {
         flex: 0 0 auto;
-      }
-
-      .sg-slider {
-        min-width: 0;
-        max-width: 100%;
-        width: 100%;
-      }
-
-      .sg-slider-value {
-        align-self: flex-end;
+        align-self: center;
+        white-space: nowrap;
       }
     }