Merge branch '301143-improve-frequent-items-style-flexibility' into 'master'

Improve frequent_items style flexibility

See merge request gitlab-org/gitlab!60855

app/assets/javascripts/frequent_items/components/app.vue

@@ -100,7 +100,7 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div class="gl-display-flex gl-flex-direction-column gl-flex-align-items-stretch gl-h-full">
     <frequent-items-search-input :namespace="namespace" />
     <gl-loading-icon
       v-if="isLoadingItems"

app/assets/javascripts/frequent_items/components/frequent_items_list.vue

@@ -59,7 +59,11 @@ export default {
 <template>
   <div class="frequent-items-list-container">
     <ul ref="frequentItemsList" class="list-unstyled">
-      <li v-if="isListEmpty" :class="{ 'section-failure': isFetchFailed }" class="section-empty">
+      <li
+        v-if="isListEmpty"
+        :class="{ 'section-failure': isFetchFailed }"
+        class="section-empty gl-mb-3"
+      >
         {{ listEmptyMessage }}
       </li>
       <frequent-items-list-item

app/assets/stylesheets/framework/dropdowns.scss

@@ -853,7 +853,7 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
 
   .frequent-items-dropdown-sidebar,
   .frequent-items-dropdown-content {
-    padding: 8px 0;
+    @include gl-pt-3;
   }
 
   .loading-animation {
@@ -895,7 +895,6 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
   }
 
   .frequent-items-list-container {
-    height: 304px;
     padding: 8px 0;
     overflow-y: auto;