Global Search - Fix Sidebar Whitespace

On very large screens, we give
too much space to the left sidebar.

This simply adds a col-2 on XL screens
(1200px).

app/assets/javascripts/search/sidebar/components/app.vue

@@ -26,7 +26,7 @@ export default {
 
 <template>
   <form
-    class="gl-display-flex gl-flex-direction-column col-md-3 gl-mr-4 gl-mb-6 gl-mt-5"
+    class="search-sidebar gl-display-flex gl-flex-direction-column gl-mr-4 gl-mb-6 gl-mt-5"
     @submit.prevent="applyQuery"
   >
     <status-filter />

app/assets/stylesheets/pages/search.scss

 $search-dropdown-max-height: 400px;
 $search-avatar-size: 16px;
+$search-sidebar-min-width: 240px;
+$search-sidebar-max-width: 300px;
 
 .search-results {
   .search-result-row {
@@ -17,6 +19,13 @@ $search-avatar-size: 16px;
   }
 }
 
+.search-sidebar {
+  @include media-breakpoint-up(md) {
+    min-width: $search-sidebar-min-width;
+    max-width: $search-sidebar-max-width;
+  }
+}
+
 .search form:hover,
 .file-finder-input:hover,
 .issuable-search-form:hover,

app/views/search/_results.html.haml

+- search_bar_classes = 'search-sidebar gl-display-flex gl-flex-direction-column gl-mr-4'
+
 - if @search_objects.to_a.empty?
   .gl-display-md-flex
     - if %w(issues merge_requests).include?(@scope)
-      #js-search-sidebar.gl-display-flex.gl-flex-direction-column.col-md-3.gl-mr-4{ }
-    .gl-w-full
+      #js-search-sidebar{ class: search_bar_classes }
+    .gl-w-full.gl-flex-fill-1.gl-overflow-x-hidden
       = render partial: "search/results/empty"
       = render_if_exists 'shared/promotions/promote_advanced_search'
 - else
@@ -11,8 +13,8 @@
 
   .results.gl-display-md-flex.gl-mt-3
     - if %w(issues merge_requests).include?(@scope)
-      #js-search-sidebar.gl-display-flex.gl-flex-direction-column.col-md-3.gl-mr-4{ }
-    .gl-w-full
+      #js-search-sidebar{ class: search_bar_classes }
+    .gl-w-full.gl-flex-fill-1.gl-overflow-x-hidden
       - if @scope == 'commits'
         %ul.content-list.commit-list
           = render partial: "search/results/commit", collection: @search_objects

changelogs/unreleased/281039-sidebar-wdith-on-large-screens.yml

+---
+title: Global Search - Fix Sidebar Whitespace
+merge_request: 48832
+author:
+type: changed