From 3f9467f6eb0569f43ea06c985c0d9fa7a2227314 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Tue, 19 May 2026 19:48:35 +0200
Subject: [PATCH] Fix iPhone slider remove button style and row alignment in
 test pulldown

---
 patterns/multiselektions-pulldown.html |  2 +-
 styleguide.css                         | 70 ++++++++++++++++++++++----
 2 files changed, 60 insertions(+), 12 deletions(-)

diff --git a/patterns/multiselektions-pulldown.html b/patterns/multiselektions-pulldown.html
index d54b699..5a9f50e 100644
--- a/patterns/multiselektions-pulldown.html
+++ b/patterns/multiselektions-pulldown.html
@@ -228,7 +228,7 @@
       </div>
     </div>
 
-    <div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="multiple" data-component="pulldown" data-component-state="inactive-selectable" data-activatable="true">
+    <div class="sg-pulldown-demo sg-pulldown-demo--single-slider-test" data-open="false" data-align="left" data-selection-mode="multiple" data-component="pulldown" data-component-state="inactive-selectable" data-activatable="true">
       <span class="sg-activatable-control">
         <button class="sg-interaction-element sg-pulldown sg-pulldown--inactive-selectable sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Test-Pulldown ohne aktive Auswahl" data-label-base="Test-Pulldown" data-component-part="pulldown-trigger">
           Test-Pulldown
diff --git a/styleguide.css b/styleguide.css
index e1d7129..e67c990 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -1263,23 +1263,25 @@ section + section {
       color: var(--text-control-default);
     }
 
-    .sg-pulldown-panel__remove,
-    .sg-activatable-remove {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
+.sg-pulldown-panel__remove,
+.sg-activatable-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
       width: var(--interaction-height);
       height: var(--interaction-height);
       padding: 0;
       border: var(--border-none);
       border-radius: var(--radius-interaction);
       background: var(--surface-activatable-remove);
-      color: var(--text-activatable-remove);
-      font-family: var(--font-family-base);
-      font-size: var(--font-size-base);
-      line-height: 1;
-      cursor: pointer;
-    }
+  color: var(--text-activatable-remove);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  line-height: 1;
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: pointer;
+}
 
     .sg-pulldown-panel__remove[hidden] {
       display: none;
@@ -1861,6 +1863,52 @@ 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"] {
+    display: grid;
+    grid-template-columns:
+      var(--layout-input-label-width)
+      minmax(0, 1fr)
+      auto
+      var(--interaction-height);
+    align-items: center;
+    column-gap: var(--spacing-small);
+    padding-right: 0;
+  }
+
+  .sg-pulldown-demo--single-slider-test .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-label {
+    min-width: 0;
+    flex: 0 0 auto;
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  .sg-pulldown-demo--single-slider-test .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider {
+    min-width: 0;
+    max-width: 100%;
+    width: 100%;
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  .sg-pulldown-demo--single-slider-test .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;
+    white-space: nowrap;
+    grid-column: 3;
+    grid-row: 1;
+  }
+
+  .sg-pulldown-demo--single-slider-test .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-activatable-remove {
+    position: static;
+    transform: none;
+    margin-left: calc(var(--spacing-small) * 1.5);
+    grid-column: 4;
+    grid-row: 1;
+  }
+}
+
 .sg-form-sections-card__actions {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));