From 604bbe6c99a9f81782ab8a6d9ec19bac63a7e6f0 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:23:16 +0200
Subject: [PATCH] fix(components): make slider preview frame and row width
 input-like

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

diff --git a/styleguide.css b/styleguide.css
index a79c738..03770d0 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -1142,6 +1142,11 @@ section + section {
       width: 100%;
     }
 
+    #component-slider .sg-form-preview-area {
+      width: 100%;
+      box-sizing: border-box;
+    }
+
     #component-slider .sg-state-example > :last-child {
       width: 100%;
       min-width: 0;
@@ -1160,6 +1165,11 @@ section + section {
       grid-column: 2;
     }
 
+    #component-slider .sg-state-example > .sg-slider-row,
+    #component-slider .sg-activatable-row .sg-slider-row {
+      max-width: var(--layout-input-field-max-width);
+    }
+
     #component-slider .sg-slider-row .sg-slider-value {
       min-width: 0;
       grid-column: 3;
@@ -1256,6 +1266,12 @@ section + section {
     }
 
     @media (max-width: 48rem) {
+      #component-slider .sg-form-preview-area {
+        width: 100%;
+        max-width: 100%;
+        box-sizing: border-box;
+      }
+
       #component-slider .sg-state-example {
         grid-template-columns: 1fr;
         align-items: start;