From 2d88cf43bfe939de64ca3449b5fc427ba1978e3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Mon, 18 May 2026 17:56:51 +0200
Subject: [PATCH] Fix search clear button gap in options row on mobile browsers

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

diff --git a/styleguide.css b/styleguide.css
index 4c04c2d..7b97a40 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -622,6 +622,7 @@ section + section {
     .sg-input-single-line {
       font-weight: var(--font-weight-regular);
       color: var(--text-control-default);
+      -webkit-appearance: none;
       appearance: none;
     }
 
@@ -660,9 +661,12 @@ section + section {
       width: var(--interaction-height);
       height: var(--interaction-height);
       padding: 0;
+      margin: 0;
       border: var(--border-none);
       border-radius: 0 var(--radius-interaction) var(--radius-interaction) 0;
       box-shadow: var(--shadow-none);
+      -webkit-appearance: none;
+      appearance: none;
       font-family: var(--font-family-base);
       font-size: var(--font-size-base);
       line-height: 1;
@@ -1486,6 +1490,26 @@ section + section {
   flex-basis: 100%;
   }
 
+  .sg-options-row .sg-search-field-input {
+    display: inline-flex;
+    align-items: stretch;
+  }
+
+  .sg-options-row .sg-search-field-input .sg-input-single-line {
+    padding-right: var(--interaction-padding-horizontal);
+  }
+
+  .sg-options-row .sg-search-field-input[data-has-value="true"] .sg-input-single-line {
+    border-radius: var(--radius-interaction) 0 0 var(--radius-interaction);
+  }
+
+  .sg-options-row .sg-search-field-input .sg-input-clear-button {
+    position: static;
+    flex: 0 0 var(--interaction-height);
+    height: auto;
+    border-radius: 0 var(--radius-interaction) var(--radius-interaction) 0;
+  }
+
   .sg-options-row__left > .sg-input-single-line-wrap .sg-input-single-line,
   .sg-options-row__left > .sg-pulldown-demo .sg-pulldown {
     width: 100%;