Truncate module owner's username if too long for view-only menu

[wpdarren]

Bug Description

While testing #5381 I identified a small observation/enhancement that was out of scope.

On Dashboard Sharing, in the view only menu, when you have an administrator with a username that is 25 characters or more, it causes problems with the layout. I am wondering if we should cut the username off at a certain amount of characters with ellipsis like we do on other parts of the plugin. As you can see from the screenshot on desktop it goes right to the edge. (and the same with mobile.). I realise 25 characters is a silly amount of characters for a username, but users be users! 😄

Screenshot

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

Acceptance criteria

• The service owner area of the view-only menu should not extend beyond the menu, regardless of the length of its contents
• Usernames that do not fit into the given area should be truncated with an ellipsis: e.g.

- The truncated element should show the full untruncated username on hover

Implementation Brief

• Update .googlesitekit-view-only-menu__service--owner with the following additional CSS rules
  • text-overflow: ellipsis
  • overflow: hidden
• Update the element containing the username (currently a strong tag) with a title attribute with the same value so that the full username is visible on hover

Test Coverage

• Update VRT reference images for any affected view-only menu scenarios

QA Brief

• Go to the Site Kit Dashboard as a view-only user.
• Open the Dashboard Sharing view-only menu.
• Verify that longer usernames are truncated with ellipsis (...) instead of just cutting off or going beyond the container (similar to the screenshot in the ACs).

Changelog entry

• Truncate long usernames in Dashboard Sharing.

[eugene-manuilov]

Update .googlesitekit-view-only-menu__service--owner with the following additional CSS rules

• text-overflow: ellipsis
• overflow: hidden

@aaemnnosttv we should also add the title attribute with the owner name so that users can see it when they hover over the element.

[aaemnnosttv]

Good call @eugene-manuilov – I'll add this as well 👍

[eugene-manuilov]

Thanks, @aaemnnosttv. IB ✔️

[wpdarren]

QA Update: ✅

Verified:

• Longer usernames are truncated with ellipsis (...) instead of just cutting off or going beyond the container (similar to the screenshot in the ACs).

Screenshot