1 files changed, 14 insertions, 8 deletions
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 4b8e1da4867..a62e28a9b8a 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -198,11 +198,20 @@ input[type='checkbox']:hover {
     }
   }
 
+  .search-clear {
+    position: absolute;
+    right: 10px;
+    top: 9px;
+    padding: 0;
+    line-height: 0;
+    background: none;
+    border: 0;
+  }
 
   .search-icon {
     position: absolute;
     left: 10px;
-    top: 10px;
+    top: 9px;
     color: $gray-darkest;
     pointer-events: none;
   }
@@ -247,14 +256,7 @@ input[type='checkbox']:hover {
 }
 
 .search-clear {
-  position: absolute;
-  right: 10px;
-  top: 9px;
-  padding: 0;
   color: $gray-darkest;
-  line-height: 0;
-  background: none;
-  border: 0;
 
   &:hover,
   &:focus {
@@ -281,6 +283,10 @@ input[type='checkbox']:hover {
   }
 }
 
+.ref-truncated {
+  @include str-truncated(10em);
+}
+
 // Disable webkit input icons, link to solution: https://stackoverflow.com/questions/9421551/how-do-i-remove-all-default-webkit-search-field-styling
 /* stylelint-disable property-no-vendor-prefix */
 input[type='search']::-webkit-search-decoration,