Skip to content

Align dropdown position within super sidebar

Details

The placement prop for GlDisclosureDropdown in the super sidebar isn't aligning the menus to the desired position. This is likely because the sidebar width is the same as the dropdown width (256px. popper.js positions the menus to a default/safe position to avoid content being outside of the viewport.

There are a few approaches that might resolve the issue:

  1. Increase sidebar width to 272px (256px + 16px)
  2. Decrease dropdown width to 15rem/240px (256px - 16px) either:
    1. Global change to GlDisclosureDropdown/GlCollapsibleListbox or
    2. Provide as prop/override for specific usecases
  3. Investigate popper.js positioning further to see if there are positions + offsets to avoid dropdowns touching edge of viewport/sidebar
    1. Maybe a skidding value to provide to dropdown to give an offset along the reference

Current positioning:

Help menu Merge request menu User menu
current-help-menu current-merge-request-menu current-user-menu

Increase sidebar width to 272px (256px + 16px)

Help menu Merge request menu User menu
sidebar-width-help-menu sidebar-width-merge-request-menu sidebar-width-user-menu

Decrease dropdown width to 15rem/240px (256px - 16px)

Help menu Merge request menu User menu
dropdown-width-help-menu dropdown-width-merge-request-menu dropdown-width-user-menu
Edited by Scott de Jonge