Add latest changes from gitlab-org/gitlab@15-0-stable-eev15.0.0-rc42

1 files changed, 44 insertions, 2 deletions

diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 18a0f119edf..8755db83d35 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -2,6 +2,11 @@ $search-dropdown-max-height: 400px;
 $search-avatar-size: 16px;
 $search-sidebar-min-width: 240px;
 $search-sidebar-max-width: 300px;
+$search-input-field-x-min-width: 200px;
+$search-input-field-min-width: 320px;
+$search-input-field-max-width: 600px;
+
+$border-radius-medium: 3px;
 
 .search-results {
   .search-result-row {
@@ -37,8 +42,44 @@ input[type='checkbox']:hover {
     0 0 0 1px lighten($dropdown-input-focus-shadow, 20%);
 }
 
+.header-content {
+  .header-search-new {
+    max-width: $search-input-field-max-width;
+  }
+
+  &.header-search-is-active {
+    .navbar-collapse {
+      flex-grow: 1;
+    }
+
+    @include media-breakpoint-down(lg) {
+      .title-container {
+        flex: 0;
+        overflow: hidden;
+      }
+    }
+
+    @include media-breakpoint-up(xl) {
+      .navbar-nav {
+        padding-left: 1rem;
+      }
+    }
+  }
+}
+
+// This is a temporary workaround!
+// the button in GitLab UI Search components need to be updated to not be the small size
+// see in Figma: https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Component-library?node-id=43905%3A45540
+.header-search .gl-search-box-by-type-clear.btn-sm {
+  padding: 0.5rem !important;
+}
+
 .header-search {
-  width: 320px;
+  min-width: $search-input-field-min-width;
+
+  @include media-breakpoint-between(md, lg) {
+    min-width: $search-input-field-x-min-width;
+  }
 
   input,
   svg {
@@ -66,9 +107,10 @@ input[type='checkbox']:hover {
       border-width: 0;
       border-style: solid;
       border-image: none;
-      border-radius: 3px;
+      border-radius: $border-radius-medium;
       box-shadow: none;
       white-space: pre-wrap;
+      box-sizing: border-box;
       // Safari
       word-wrap: break-word;
       overflow-wrap: break-word;