Skip to content

Dropdown text does not expand for group selection at new project creation

Problem

When starting a new project in a nested gitlab group hierarchy the group selection dropdown is too narrow to provide the full names (only whitespaces and dashes allow for line wraps, underscores "_" preserve single line text) and no horizontal scrollbar is activated.

Cause

The CSS classes .gl-dropdown .dropdown-menu set the width hard to 15rem. This is narrow.

gitlab_group_selection_bug

Proposed solution

  • Change dropdown-menu width to auto. This
.gl-dropdown .dropdown-menu {
  ...
  width: auto;
}
  • Keep min-width and max-width settings of .dropdown-menu untouched (min-width: 240px; max-width: 500px;).
  • Allow the menu's content to grow on demand via adding width: fit-content to the dropdown content CSS. This will trigger the x-scrollbar.
.gl-dropdown .gl-dropdown-contents {
    flex-grow: 1;
    overflow-y: auto;
    width: fit-content;
}

This is the result

gitlab_group_selection_fix

Open questions

  • Where to put this CSS code in the gitlab.org source code? 👼
  • I could not find a matching issue template for UI problems, please assign the issue as you seem fit.