fix(accessibility): Header Search Box size #359 from eea/refactor-sea…

…rch-box
eea · Jun 19, 2023 · 4b4e1ab · 4b4e1ab
2 parents 6c5a7d5 + 679adaa
commit 4b4e1ab
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/theme/themes/eea/extras/header.less b/theme/themes/eea/extras/header.less
@@ -345,7 +345,7 @@
   display: flex;
   overflow: auto;
   width: 100%;
-  height: @mobilePopUpHeight;
+  min-height: @mobilePopUpHeight;
   align-items: @searchBoxAlignItems;
   background: @searchBoxBackgroundGradient;
 
@@ -582,7 +582,7 @@
 
   /* Search box */
   #search-box {
-    height: @tabletPopUpHeight;
+    min-height: @tabletPopUpHeight;
 
     .wrapper {
       margin: @searchBoxTabletPopupMarginTop 0;
@@ -693,7 +693,7 @@
 
   /* Search box */
   #search-box {
-    height: @computerPopUpHeight;
+    min-height: @computerPopUpHeight;
 
     .wrapper {
       margin: @searchBoxComputerPopupMarginTop 0;

diff --git a/theme/themes/eea/extras/header.variables b/theme/themes/eea/extras/header.variables
@@ -241,9 +241,9 @@
 @searchBoxSuggestionsTextColor: @white;
 @searchBoxSuggestionsColumnGap: 2em;
 @searchBoxSuggestionsRowGap: 1em;
-@searchBoxMobilePopupMarginTop: 0.5em;
-@searchBoxTabletPopupMarginTop: 1em;
-@searchBoxComputerPopupMarginTop: 1.5em;
+@searchBoxMobilePopupMarginTop: @em-space-8;
+@searchBoxTabletPopupMarginTop: @em-space-8;
+@searchBoxComputerPopupMarginTop: @em-space-8;
 
 /* Custom shadows for dropdowns */
 @shadow-topbar-dropdown: 2px 0 2px -5px hsla(@shadow-color, calc(@shadow-strength + 6%));