Filtered search width fix on Roadmap

Add style to prevent filtered search from overflowing
the width available

app/assets/stylesheets/framework/filters.scss

@@ -458,6 +458,23 @@
 }
 
 .vue-filtered-search-bar-container {
+  .gl-search-box-by-click {
+    // Absolute width is needed to prevent flex to grow
+    // beyond the available width.
+    .gl-filtered-search-scrollable {
+      width: 1px;
+    }
+
+    // There are several styling issues happening while using
+    // `GlFilteredSearch` in roadmap due to some of our global
+    // styles which we need to override until those are fixed
+    // at framework level.
+    // See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/908
+    .input-group-prepend + .gl-filtered-search-scrollable {
+      border-radius: 0;
+    }
+  }
+
   @include media-breakpoint-up(md) {
     .sort-dropdown-container {
       margin-left: 10px;

ee/app/assets/stylesheets/pages/requirements.scss

@@ -23,12 +23,6 @@
 }
 
 .requirements-list-container {
-  .gl-search-box-by-click {
-    .gl-filtered-search-scrollable {
-      border-radius: 0;
-    }
-  }
-
   .requirements-list {
     li .issuable-main-info {
       // These rules prevent adjecant REQ ID from wrapping

ee/app/assets/stylesheets/pages/roadmap.scss

@@ -560,16 +560,3 @@ html.group-epics-roadmap-html {
   color: $gray-700;
   padding-top: $gl-spacing-scale-1;
 }
-
-// There are several styling issues happening while using
-// `GlFilteredSearch` in roadmap due to some of our global
-// styles which we need to override until those are fixed
-// at framework level.
-// See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/908
-.epics-roadmap-filters-gl-ui {
-  .gl-search-box-by-click {
-    .gl-filtered-search-scrollable {
-      border-radius: 0;
-    }
-  }
-}

ee/changelogs/unreleased/roadmap-filtered-search.yml

+---
+title: Filtered search width fix on Roadmap
+merge_request: 39440
+author:
+type: fixed