Adjust dropdown item and header padding to comply with design specs

app/assets/stylesheets/framework/dropdowns.scss

@@ -176,9 +176,9 @@
   display: block;
   font-weight: $gl-font-weight-normal;
   position: relative;
-  padding: 8px 16px;
+  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
   color: $gl-text-color;
-  line-height: normal;
+  line-height: $gl-btn-line-height;
   white-space: normal;
   overflow: hidden;
   text-align: left;
@@ -319,8 +319,8 @@
   .dropdown-header {
     color: $gl-text-color-secondary;
     font-size: 13px;
-    line-height: 22px;
-    padding: 8px 16px;
+    line-height: $gl-line-height;
+    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
   }
   &.capitalize-header .dropdown-header {
@@ -329,13 +329,8 @@
   .dropdown-bold-header {
     font-weight: $gl-font-weight-bold;
-    line-height: 22px;
-    padding: 0 16px;
-  }
-
-  .separator + .dropdown-header,
-  .separator + .dropdown-bold-header {
-    padding-top: 10px;
+    line-height: $gl-line-height;
+    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
   }
   .unclickable {

app/assets/stylesheets/framework/header.scss

@@ -127,12 +127,6 @@
     }
   }
-  li.dropdown-bold-header {
-    color: $gl-text-color-secondary;
-    font-size: 12px;
-    padding: 0 16px;
-  }
-
   .navbar-collapse {
     flex: 0 0 auto;
     border-top: 0;
@@ -541,7 +535,7 @@
     left: auto;
     li.current-user {
-      padding: 5px 18px;
+      padding: $dropdown-item-padding-y $dropdown-item-padding-x;
       .user-name {
         display: block;

app/assets/stylesheets/framework/variables_overrides.scss

@@ -21,6 +21,8 @@ $danger: $red-500;
 $zindex-modal-backdrop: 1040;
 $nav-divider-margin-y: ($grid-size / 2);
 $dropdown-divider-bg: $theme-gray-200;
+$dropdown-item-padding-y: 8px;
+$dropdown-item-padding-x: 12px;
 $popover-max-width: 300px;
 $popover-border-width: 1px;
 $popover-border-color: $border-color;

app/assets/stylesheets/pages/search.scss

@@ -101,8 +101,6 @@ input[type='checkbox']:hover {
     .dropdown-header {
       // Necessary because glDropdown doesn't support a second style of headers
       font-weight: $gl-font-weight-bold;
-      // .dropdown-menu li has 1px side padding
-      padding: $gl-padding-8 17px;
       color: $gl-text-color;
       font-size: $gl-font-size;
       line-height: 16px;

changelogs/unreleased/winh-dropdown-item-padding.yml

+---
+title: Adjust dropdown item and header padding to comply with design specs
+merge_request: 23552
+author:
+type: changed