Fix search clear button gap in options row on mobile browsers

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%;