1 files changed, 49 insertions, 53 deletions

diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index ff42cd836da..894eddbe1a7 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -147,7 +147,7 @@
     position: absolute;
   }
 
-  .spinner {
+  .gl-spinner {
     position: absolute;
     top: 9px;
     right: 8px;
@@ -266,15 +266,6 @@
     }
   }
 
-  .shortcut-mappings {
-    display: none;
-  }
-
-  &.shortcuts .shortcut-mappings {
-    display: inline-block;
-    margin-right: 5px;
-  }
-
   ul {
     margin: 0;
     padding: 0;
@@ -848,12 +839,56 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
 .frequent-items-dropdown-container {
   display: flex;
   flex-direction: row;
-  width: 500px;
-  height: 354px;
+  height: $grid-size * 40;
+
+  &.with-deprecated-styles {
+    width: 500px;
+    height: 354px;
+
+    .section-header,
+    .frequent-items-list-container li.section-empty {
+      padding: 0 $gl-padding;
+    }
+
+    .search-input-container {
+      position: relative;
+      padding: 4px $gl-padding;
+
+      .search-icon {
+        position: absolute;
+        top: 13px;
+        right: 25px;
+        color: $gray-300;
+      }
+    }
+
+    @include media-breakpoint-down(xs) {
+      flex-direction: column;
+      width: 100%;
+      height: auto;
+      flex: 1;
+
+      .frequent-items-dropdown-sidebar,
+      .frequent-items-dropdown-content {
+        width: 100%;
+      }
+
+      .frequent-items-dropdown-sidebar {
+        border-bottom: 1px solid $border-color;
+        border-right: 0;
+      }
+    }
+
+    .frequent-items-list-container {
+      width: auto;
+      height: auto;
+      padding-bottom: 0;
+    }
+  }
 
   .frequent-items-dropdown-sidebar,
   .frequent-items-dropdown-content {
-    padding: 8px 0;
+    @include gl-pt-3;
   }
 
   .loading-animation {
@@ -870,32 +905,13 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
     width: 70%;
   }
 
-  @include media-breakpoint-down(xs) {
-    flex-direction: column;
-    width: 100%;
-    height: auto;
-    flex: 1;
-
-    .frequent-items-dropdown-sidebar,
-    .frequent-items-dropdown-content {
-      width: 100%;
-    }
-
-    .frequent-items-dropdown-sidebar {
-      border-bottom: 1px solid $border-color;
-      border-right: 0;
-    }
-  }
-
   .section-header,
   .frequent-items-list-container li.section-empty {
-    padding: 0 $gl-padding;
     color: $gl-text-color-secondary;
     font-size: $gl-font-size;
   }
 
   .frequent-items-list-container {
-    height: 304px;
     padding: 8px 0;
     overflow-y: auto;
 
@@ -908,36 +924,16 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
     }
   }
 
-  .search-input-container {
-    position: relative;
-    padding: 4px $gl-padding;
-
-    .search-icon {
-      position: absolute;
-      top: 13px;
-      right: 25px;
-      color: $gray-300;
-    }
-  }
-
   .section-header {
     font-weight: 700;
     margin-top: 8px;
   }
-
-  @include media-breakpoint-down(xs) {
-    .frequent-items-list-container {
-      width: auto;
-      height: auto;
-      padding-bottom: 0;
-    }
-  }
 }
 
 .frequent-items-list-item-container {
   .frequent-items-item-avatar-container,
   .frequent-items-item-metadata-container {
-    float: left;
+    flex-shrink: 0;
   }
 
   .frequent-items-item-metadata-container {