Fix input group fields inside of a top bar not being fluid, fixes #7663

diff --git a/scss/components/_top-bar.scss b/scss/components/_top-bar.scss
index 3a6e7988e562c563ab89a42df96409862ab4077f..f1615b7b8913e846dc0e55df38c36fbee161af8c 100644 (file)
--- a/scss/components/_top-bar.scss
+++ b/scss/components/_top-bar.scss
@@ -56,11 +56,18 @@ $topbar-unstack-breakpoint: medium !default;
     }
   }
 
+  // Restrain width of inputs by default to make them easier to arrange
   input {
     width: $topbar-input-width;
     margin-#{$global-right}: 1rem;
   }
 
+  // The above styles shouldn't apply to input group fields
+  .input-group-field {
+    width: 100%;
+    margin-#{$global-right}: 0;
+  }
+
   // scss-lint:disable QualifyingElement
   input.button {
     width: auto;