Fix double scrollbar in GlDropdowns

This commit adds a workaround (read: hack) to fix a style issue caused
by conflicting styles in this repo vs `gitlab-ui`.

app/assets/stylesheets/framework/dropdowns.scss

@@ -34,7 +34,14 @@
     overflow-y: auto;
 
     &.dropdown-extended-height {
-      max-height: 400px;
+      $extended-max-height: 400px;
+
+      max-height: $extended-max-height;
+
+      // See comment below for explanation
+      .gl-new-dropdown-inner {
+        max-height: $extended-max-height - 2px;
+      }
     }
 
     @include media-breakpoint-down(xs) {
@@ -46,6 +53,15 @@
       overflow-y: initial;
       max-height: initial;
     }
+
+    // `GlDropdown` specifies the `max-height` of `.gl-new-dropdown-inner`
+    // as `$dropdown-max-height`, but the `max-height` rule above forces
+    // the parent `.dropdown-menu` to be _slightly_ too small because of
+    // the 1px borders. The workaround below overrides the @gitlab/ui style
+    // to avoid a double scroll bar.
+    .gl-new-dropdown-inner {
+      max-height: $dropdown-max-height - 2px;
+    }
   }
 
   .dropdown-toggle,

changelogs/unreleased/nfriend-fix-gl-dropdown-double-scrollbars.yml

+---
+title: Fix double scrollbars in some dropdowns
+merge_request: 54837
+author:
+type: fixed