Improve search box on mobile

eea · Jun 16, 2022 · 828c073 · 828c073
1 parent 9d7ee67
commit 828c073
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/src/SearchBlock/less/searchbox.less b/src/SearchBlock/less/searchbox.less
@@ -157,6 +157,7 @@
   color: @primaryColor;
   cursor: pointer;
   font-size: 18px;
+  font-weight: 500;
 }
 
 .sui-search-box__autocomplete-container li em {
@@ -195,7 +196,7 @@
   // display: none;
 }
 
-@media only screen and (max-width: 357px) {
+@media only screen and (max-width: 360px) {
   .sui-search-box__autocomplete-container li {
     font-size: 14px;
   }
@@ -204,12 +205,13 @@
     right: 50%;
     left: 50%;
     width: 100vw;
+    padding-top: 10px;
     margin-right: -50vw;
     margin-left: -50vw;
   }
 
   .sui-search-box__section-title,
   .sui-search-box__autocomplete-container li {
-    padding: 8px 35px;
+    padding: 8px 30px;
   }
 }
diff --git a/src/SearchBlock/less/searchinput.less b/src/SearchBlock/less/searchinput.less
@@ -19,6 +19,7 @@
         .icon {
           width: 38px;
           height: 38px;
+          margin: 0;
           color: @secondaryColor !important;
           font-size: 38px;
         }
@@ -207,7 +208,7 @@
   }
 }
 
-@media only screen and (max-width: 357px) {
+@media only screen and (max-width: 360px) {
   .sui-search-box {
     .search-input {
       .terms-box input {
@@ -223,8 +224,8 @@
       }
 
       .input-controls .clear-button {
-        width: 20px;
-        height: 20px;
+        width: 20px !important;
+        height: 20px !important;
 
         .close.icon {
           top: 2px;