Skip to content

Fix spacing of "Your work" menu item

Thomas Hutterer requested to merge fix_your_work_header_spacing into master

What does this MR do and why?

This changes the styles for the scope header menu item of the new (behind a feature flag) "Your work" sidebar.

When I first created that header partial in !107345 (merged), I thought this was the first time we put a icon inside what is usually a project/group's avatar, so I followed the design as closely as I could and creating a new icon-container class for it.

But this way, the menu item has some padding issues, see screen recording below.

While looking for a better way, I noticed that we in fact do already have such an "icon avatar" in use, in the Admin sidebar 💡 So for now, I use the same styling for the new "Your work" icon avatar, too.

Also, I added a tooltip to the menu item.

  • The approach taken in this MR needs a UX 👍 from @nickbrandt.

Screenshots or screen recordings

Before After (zoomed in to 150% for better visibility)
your_work_padding_before your_work_header_hover_rebased

How to set up and validate locally

  • Make sure you have the your_work_sidebar feature flag enabled:
Feature.enable(:your_work_sidebar)
  • While logged in, go to http://gdk.test:3000/dashboard/projects (default homepage) or any other page that shows the "Your work" sidebar.
  • Compare the top-most menu item (with the title "Your work" and the briefcase icon) with the other menu items while hovering over them with the mouse.
  • Also compare it with the Admin sidebar.

MR acceptance checklist

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

Related to #388011 (closed)

Edited by Thomas Hutterer

Merge request reports