Misaligned information in the view-only menu

Bug Description

When there are varying user names length in the view only menu, the module name and user names are not longer aligned.

Steps to reproduce

1. Add another administrator and login to the view only dashboard.
2. Click on the view only menu.
3. Notice how the module names and module owners within the menu are misaligned.

Screenshots

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The width of the module icon, module name and module owner within the view only menu should be as per the Figma designs, i.e 24px for the icon, 105px for the module name and the rest for the module owner.
• All the information within the “Shared Services” section within the view only menu should be aligned.

Implementation Brief

• Using assets/js/components/ViewOnlyMenu/Service.js,
  • Wrap the Icon component within a span tag with the googlesitekit-view-only-menu__service--icon class name.
• Using assets/sass/components/global/_googlesitekit-view-only-menu.scss,
  • Add styles to googlesitekit-view-only-menu__service--icon, flex: 0 0 24px;
  • Add gap: 8px to .googlesitekit-view-only-menu__service.
  • Remove the margin-right: 8px from .googlesitekit-view-only-menu__service svg.
  • Set flex: 0 0 100px; to .googlesitekit-view-only-menu__service--name.
  • Set flex: 1 to .googlesitekit-view-only-menu__service--owner.

Test Coverage

• No new tests to be added.

QA Brief

• Follow the steps in the “Steps to reproduce” section above.
• Make sure the main admin (who sets up Dashboard Sharing) has a long username for the alignment issue to appear.
• Ensure that the alignment issue doesn’t exist anymore.
• Ensure that the width of the service name is limited to 100px only when it is a user who can authenticate (e.g. an admin user), otherwise, it should be able to take as much space as it needs.

Changelog entry

• Fix service information alignment in the view-only menu.

[asvinb]

As noted by @aaemnnosttv , only admins can see the module owner. Non-admin view-only user do not see that information which results in the module name width set to 100px as per the IB. We should tweak the implementation even when a non-admin view-only user views the menu, the module name takes the whole available space (not limited to 100px). @nfmohit Can you check it out?

[wpdarren]

QA Update: ✅

Verified:

• the alignment issue doesn’t exist anymore for long usernames. Tried this with a few different combinations and no issues with the alignment arise. I also tested this on various screen sizes including desktop, mobile devices.
• made sure that when logged in as a non admin user, the module is displayed amongst the whole area as per comment

Screenshots