diff --git a/components/SearchInput.vue b/components/SearchInput.vue
index 1b59d9941..8cdf50cd0 100644
--- a/components/SearchInput.vue
+++ b/components/SearchInput.vue
@@ -204,7 +204,8 @@ export default {
     },
     onDelete(e) {
       clearTimeout(this.searchProcess)
-      if (isEmpty(this.unprocessedSearchInput)) {
+      const value = e.target ? e.target.value.trim() : ''
+      if (isEmpty(value)) {
         this.clear()
       }
     },
@@ -238,8 +239,11 @@ export default {
   width: 100%;
   position: relative;
 
+  $padding-left: $space-x-small;
+
   .search-option-label {
     align-self: center;
+    padding-left: $padding-left;
   }
 
   .search-option-meta {
@@ -253,6 +257,7 @@ export default {
   &,
   .ds-select-dropdown {
     transition: box-shadow 100ms;
+    max-height: 70vh;
   }
 
   &.is-open {
@@ -261,6 +266,11 @@ export default {
     }
   }
 
+  .ds-select-dropdown-message {
+    opacity: 0.5;
+    padding-left: $padding-left;
+  }
+
   .search-clear-btn {
     right: 0;
     z-index: 10;
@@ -283,17 +293,10 @@ export default {
 
   .ds-select {
     z-index: $z-index-dropdown + 1;
-  }
-
-  .ds-select-option-hover {
-    .ds-text-size-small,
-    .ds-text-size-small-x {
-      color: rgba(#fff, 0.8);
-    }
-  }
-
-  .ds-select {
     transition: border-bottom 0;
+    background-color: $background-color-soft;
+
+    border-color: darken($background-color-soft, 10%);
   }
 
   .ds-select-is-open {
@@ -301,12 +304,12 @@ export default {
       border-bottom: 0;
     }
   }
-  .ds-select-dropdown-message {
-    opacity: 0.5;
-  }
 
-  .ds-select-dropdown {
-    max-height: 70vh;
+  .ds-select-option-hover {
+    .ds-text-size-small,
+    .ds-text-size-small-x {
+      color: rgba(#fff, 0.8);
+    }
   }
 
   .field {