Skip to content

Add min-width around pin button so badge does not overlap title text

Thomas Hutterer requested to merge fix_sidebar_badge_overlap into master

What does this MR do and why?

Add min-width around pin button so badge does not overlap title text

The badge is absolutely positioned when it shares position with pins. But because it is wider, it can overlap long titles.

This change gives the span that houses both the pin button and badge a min-width that is larger than the badge to avoid this.

Screenshots or screen recordings

Before After
image image

How to set up and validate locally

This issue only occurs in the new "flyout" menus. Their feature flag is still disabled by default. Make sure it is enabled for you:

Feature.enable(:super_sidebar_flyout_menus)

The overlapping only happens when "Merge requests" is the only/longest title in the flyout. Most projects in your GDK will show more features under the Code section, but you can force it with this patch: badge_overlap.patch

  • Go to any project.
  • In the left sidebar, hover the Code section to see the flyout.
  • The Merge requests title shouldn't be overlapped by its counter badge.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Thomas Hutterer

Merge request reports