From 67ddc2e57a796b4cf5786e17aa1020e7109d88bd 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:58:17 +0200
Subject: [PATCH] Normalize slider mobile wrap behavior and remove
 pattern-coupled overrides

---
 styleguide.css | 29 +++++++++++++++++++----------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/styleguide.css b/styleguide.css
index c329149..4b4bc05 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -981,7 +981,7 @@ section + section {
         min-width: 0;
       }
 
-      #component-slider .sg-slider-row {
+      .sg-slider-row {
         flex-direction: row;
         flex-wrap: wrap;
         align-items: center;
@@ -989,27 +989,36 @@ section + section {
         max-width: 100%;
       }
 
-      #component-slider .sg-slider-row .sg-label {
+      .sg-slider-row .sg-label {
         min-width: 100%;
         flex: 0 0 100%;
       }
 
-      #component-slider .sg-slider {
+      .sg-slider {
         flex: 1 1 auto;
         width: auto;
         max-width: none;
         min-width: 0;
       }
 
-      #component-slider .sg-slider-value {
+      .sg-slider-value {
         flex: 0 0 auto;
         align-self: center;
         white-space: nowrap;
       }
 
-      #component-slider .sg-slider-row[data-activatable="true"] {
+      .sg-slider-row[data-activatable="true"] {
         padding-right: 0;
       }
+
+      .sg-slider-row[data-activatable="true"] .sg-activatable-remove {
+        position: static;
+        top: auto;
+        right: auto;
+        transform: none;
+        align-self: center;
+        margin-left: calc(var(--spacing-small) * 1.5);
+      }
     }
 
     .sg-sandwich-button {
@@ -1615,7 +1624,7 @@ section + section {
     max-width: 100%;
   }
 
-  .sg-options-row .sg-pulldown-panel .sg-slider-row[data-activatable="true"] {
+  .sg-pulldown-panel .sg-slider-row[data-activatable="true"] {
     display: grid;
     grid-template-columns: minmax(0, 1fr) auto var(--interaction-height);
     align-items: center;
@@ -1623,14 +1632,14 @@ section + section {
     padding-right: 0;
   }
 
-  .sg-options-row .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-label {
+  .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-label {
     min-width: 100%;
     flex: 0 0 100%;
     grid-column: 1 / -1;
     grid-row: 1;
   }
 
-  .sg-options-row .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider {
+  .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider {
     min-width: 0;
     max-width: 100%;
     width: 100%;
@@ -1638,7 +1647,7 @@ section + section {
     grid-row: 2;
   }
 
-  .sg-options-row .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider-value {
+  .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider-value {
     min-width: calc(var(--interaction-height) * 1.25);
     justify-self: end;
     align-self: center;
@@ -1647,7 +1656,7 @@ section + section {
     grid-row: 2;
   }
 
-  .sg-options-row .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-activatable-remove {
+  .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-activatable-remove {
     position: static;
     transform: none;
     grid-column: 3;