Fix spacing of "Your work" menu item
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
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) |
---|---|
![]() |
![]() |
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.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #388011 (closed)