diff --git a/docs/styleguide/.tmp-mobile-clear-after.png b/docs/styleguide/.tmp-mobile-clear-after.png
new file mode 100644
index 0000000..26d1650
Binary files /dev/null and b/docs/styleguide/.tmp-mobile-clear-after.png differ
diff --git a/docs/styleguide/.tmp-mobile-clear.png b/docs/styleguide/.tmp-mobile-clear.png
new file mode 100644
index 0000000..e9ad082
Binary files /dev/null and b/docs/styleguide/.tmp-mobile-clear.png differ
diff --git a/docs/styleguide/styles/21-patterns-options-row.css b/docs/styleguide/styles/21-patterns-options-row.css
index 7459299..0b8dce1 100644
--- a/docs/styleguide/styles/21-patterns-options-row.css
+++ b/docs/styleguide/styles/21-patterns-options-row.css
@@ -51,6 +51,10 @@
   margin-left: auto;
 }
 
+.sg-options-row__left > .sg-search-field-row {
+  flex: 0 0 auto;
+}
+
 @media (max-width: 48rem) {
   .sg-options-row {
     flex-direction: column;
@@ -98,29 +102,8 @@
     min-width: 0;
   }
 
-.sg-options-row__left > .sg-input-single-line-wrap,
-.sg-options-row__left > .sg-search-field-row {
-  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-search-field-row {
+    flex: 0 0 auto;
   }
 
   .sg-options-row__left > .sg-input-single-line-wrap .sg-input-single-line,
diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css
index 8fd149f..bacd364 100644
--- a/public/assets/styleguide.upstream.css
+++ b/public/assets/styleguide.upstream.css
@@ -2126,6 +2126,10 @@ section + section {
   margin-left: auto;
 }
 
+.sg-options-row__left > .sg-search-field-row {
+  flex: 0 0 auto;
+}
+
 @media (max-width: 48rem) {
   .sg-options-row {
     flex-direction: column;
@@ -2173,29 +2177,8 @@ section + section {
     min-width: 0;
   }
 
-.sg-options-row__left > .sg-input-single-line-wrap,
-.sg-options-row__left > .sg-search-field-row {
-  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-search-field-row {
+    flex: 0 0 auto;
   }
 
   .sg-options-row__left > .sg-input-single-line-wrap .sg-input-single-line,
diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json
index b80a60b..4f501bf 100644
--- a/public/assets/styleguide.upstream.meta.json
+++ b/public/assets/styleguide.upstream.meta.json
@@ -1,7 +1,7 @@
 {
   "styleguideVersion": "2026.05.18.1",
-  "styleguideCommit": "899af96",
-  "syncedAtUtc": "2026-06-16T09:30:29Z",
+  "styleguideCommit": "8a7b6fa",
+  "syncedAtUtc": "2026-06-16T12:22:28Z",
   "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
   "mirroredDocsPath": "docs/styleguide"
 }
diff --git a/public/assets/styles.css b/public/assets/styles.css
index 8fd149f..bacd364 100644
--- a/public/assets/styles.css
+++ b/public/assets/styles.css
@@ -2126,6 +2126,10 @@ section + section {
   margin-left: auto;
 }
 
+.sg-options-row__left > .sg-search-field-row {
+  flex: 0 0 auto;
+}
+
 @media (max-width: 48rem) {
   .sg-options-row {
     flex-direction: column;
@@ -2173,29 +2177,8 @@ section + section {
     min-width: 0;
   }
 
-.sg-options-row__left > .sg-input-single-line-wrap,
-.sg-options-row__left > .sg-search-field-row {
-  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-search-field-row {
+    flex: 0 0 auto;
   }
 
   .sg-options-row__left > .sg-input-single-line-wrap .sg-input-single-line,