Fix top-nav search bar dropdown on xl displays

app/assets/stylesheets/framework/variables.scss

@@ -529,7 +529,7 @@ $award-emoji-width-xs: 90%;
  */
 $search-input-border-color: rgba($blue-400, 0.8);
 $search-input-width: 200px;
-$search-input-active-width: 320px;
+$search-input-xl-width: 320px;
 $location-icon-color: #e7e9ed;
 
 /*

app/assets/stylesheets/pages/search.scss

@@ -48,6 +48,10 @@ input[type='checkbox']:hover {
       background-color ease-in-out $default-transition-duration,
       width ease-in-out $default-transition-duration;
 
+    @include media-breakpoint-up(xl) {
+      width: $search-input-xl-width;
+    }
+
     &:hover {
       box-shadow: none;
     }
@@ -116,7 +120,7 @@ input[type='checkbox']:hover {
       overflow: auto;
 
       @include media-breakpoint-up(xl) {
-        width: $search-input-active-width;
+        width: $search-input-xl-width;
       }
     }
 
@@ -131,10 +135,6 @@ input[type='checkbox']:hover {
       border-color: $blue-300;
       box-shadow: none;
 
-      @include media-breakpoint-up(xl) {
-        width: $search-input-active-width;
-      }
-
       .search-input-wrap {
         .search-icon,
         .clear-icon {

changelogs/unreleased/fix-search-input-dropdown.yml

+---
+title: Fix top-nav search bar dropdown on xl displays
+merge_request: 31864
+author: Kemais Ehlers
+type: fixed