1 files changed, 7 insertions, 4 deletions

diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss
index c2f5a1828..6d7511c70 100644
--- a/client/src/app/header/search-typeahead.component.scss
+++ b/client/src/app/header/search-typeahead.component.scss
@@ -1,4 +1,7 @@
 @import '_mixins';
+@import '_variables';
+@import '_bootstrap-variables';
+@import '~bootstrap/scss/mixins/_breakpoints';
 
 .jump-to-suggestions {
   top: 100%;
@@ -46,11 +49,11 @@ my-suggestions ::ng-deep ul {
     transition: box-shadow .3s ease, width .2s ease;
   }
 
-  @media screen and (min-width: 500px) {
+  @media screen and (min-width: $mobile-view) {
     margin-left: 10px;
   }
 
-  @media screen and (max-width: 800px) {
+  @media screen and (max-width: $small-view) {
     flex: 1;
 
     ::ng-deep input {
@@ -71,7 +74,7 @@ my-suggestions ::ng-deep ul {
   &:focus,
   ::ng-deep &:focus-within {
     & > div:last-child {
-      @media screen and (min-width: 500px) {
+      @media screen and (min-width: $mobile-view) {
         display: initial !important;
       }
       
@@ -87,7 +90,7 @@ my-suggestions ::ng-deep ul {
       border-end-start-radius: 0;
       border-end-end-radius: 0;
 
-      @media screen and (min-width: 900px) {
+      @include media-breakpoint-up(lg) {
         width: 500px;
       }
     }