From b57839da46db1b2805de7b2efb957f3ed4b6b5b8 Mon Sep 17 00:00:00 2001
From: Kemais Ehlers <kemais_ehlers@byu.edu>
Date: Wed, 28 Aug 2019 16:53:20 +0000
Subject: [PATCH] Fix top-nav search bar dropdown on xl displays

---
 app/assets/stylesheets/framework/variables.scss     |  2 +-
 app/assets/stylesheets/pages/search.scss            | 10 +++++-----
 changelogs/unreleased/fix-search-input-dropdown.yml |  5 +++++
 3 files changed, 11 insertions(+), 6 deletions(-)
 create mode 100644 changelogs/unreleased/fix-search-input-dropdown.yml

diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 9871771542d..7a3fd2adfbb 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/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;
 
 /*
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 58e46cfb70f..74380ec995a 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/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 {
diff --git a/changelogs/unreleased/fix-search-input-dropdown.yml b/changelogs/unreleased/fix-search-input-dropdown.yml
new file mode 100644
index 00000000000..a86f7eacfdb
--- /dev/null
+++ b/changelogs/unreleased/fix-search-input-dropdown.yml
@@ -0,0 +1,5 @@
+---
+title: Fix top-nav search bar dropdown on xl displays
+merge_request: 31864
+author: Kemais Ehlers
+type: fixed