GlDropdown double scrollbar due to conflicting styles

Summary

The GlDropdown component shows two scrollbars when used inside gitlab-org/gitlab due to conflicting SCSS styles.

Steps to reproduce

In any page in GitLab, add a new GlDropdown like this:

<gl-dropdown text="Example dropdown">
  <gl-dropdown-item v-for="(i, index) of Array(20)">Item {{ index + 1 }}</gl-dropdown-item>
</gl-dropdown>

This will produce a dropdown with two scrollbars:

image

Root cause

This is caused by this gitlab-org/gitlab SCSS rule, which defines the height of all .show.dropdown .dropdown-menus as 312px.

GlDropdown wraps its dropdown with the classes dropdown-menu show (when open), so the global style above also applies to this dropdown.

GlDropdown also includes a child container, .gl-new-dropdown-inner, which has its own max-height defined in gitlab-ui of 19.5rem. 19.5rem resolves to 312px, so at first glance these styles should be compatible. However, the parent .dropdown-menu has a 1px border, so its child only has 310px of vertical real estate.

This conflict causes an outer scrollbar to render with 2px of scroll distance.

Possible fixes

I'm not sure what the correct fix is, but here are some options to consider:

  1. Update GlDropdown to use a class name other than dropdown-menu, so that the global gitlab style no longer applies

  2. Define a new global rule in gitlab that exempts all GlDropdowns from this rule

    • Something like:
    .gl-new-dropdown.show.dropdown .dropdown-menu {
  max-height: initial;
}

  3. Update the global gitlab rule to be max-height: 314px, which would leave room for the 1px borders of GlDropdown

  4. Update all GlDropdowns to have .dropdown-menu.show to be overflow: hidden:

    .gl-new-dropdown .dropdown-menu.show {
  overflow: hidden;
}

Note for macOS users

Mac users may not see these double scrollbars due to macOS's default behavior of hiding scrollbars.

This setting can be changed in System Preferences > General > Show scroll bars:

image

(In my opinion, it's best practice for all developers to use the Always option to catch issues like this during development 🙂)

Edited by Nathan Friend