"Edit in Analytics" and "Edit in Tag Manager" settings links lack visual whitespace due to HTML markup

[tofumatt]

Bug Description

The "Edit in" links for Analytics recently had their display changed to inline-flex, preventing the whitespace from rendering properly, leading to the text looking like "Editin Analytics".

The same is likely true for Tag Manager, as the HTML markup is the same.

Steps to reproduce

1. Set up Site Kit with Analytics
2. Go to Site Kit Settings
3. View Analytics
4. See error

Screenshots

---

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

Acceptance criteria

• The "Edit in Analytics" and "Edit in Tag Manager" links should have visual whitespace between each word.

Implementation Brief

The issue will apply to any link with <VisuallyHidden> content, as the recent change to display: inline-flex; causes the whitespace around the <VisuallyHidden /> component to be "squashed".

• Change .googlesitekit-cta-link from display: inline-flex; to display: inline-block;
• Add vertical-align: text-bottom; to .googlesitekit-cta-link .googlesitekit-icon-wrapper
• Merge Fix whitespace appearance in CTA links with icons. #7969 (PR is ready and can be moved directly to Code Review after IB Review)

Test Coverage

• VRTs may need updating, but no new tests are needed.

QA Brief

• Visit Analytics settings and Tag Manager settings in Site Kit.
• The "Edit in Analytics" and "Edit in Tag Manager" should not appear to have "Editin" as one word.

Changelog entry

• Fix whitespace issue in Analytics and Tag Manager settings.

[aaemnnosttv]

Change .googlesitekit-cta-link from display: inline-flex; to display: inline-block;

👍

@tofumatt I think we can avoid the need for adding the top positioning by using vertical-align (middle or maybe text-bottom) on .googlesitekit-cta-link .googlesitekit-icon-wrapper. WDYT?

[tofumatt]

@aaemnnosttv Nice, yeah, looks like that does the trick 👍🏻

[aaemnnosttv]

IB ✅ moving to CR

[wpdarren]

QA Update: ✅

Verified:

• The "Edit in Analytics" and "Edit in Tag Manager" do not have "Editin" as one word in settings.

Screenshots

[wpdarren]

QA Update: ❌

@tofumatt I have just noticed that the link text and icon aren't aligned with the text. It's only slightly off but noticeable.

[aaemnnosttv]

@wpdarren ready for another look 👍

[aaemnnosttv]

Actually it still has at least one more thing to fix

[wpdarren]

Mmm, yes, those Edit links were working before, so it seems a regression.

[mohitwp]

@tofumatt

Please found all issues details below with description and screenshots cc @wpdarren @kuasha420 @bethanylang @aaemnnosttv @eclarke1

1) Main dashboard and entity dashboard > All Traffic widget> text moved to next line.

2) Key metrics widget > 'Change metrics' button SVG is not aligned properly with text on main.

3) User Input Customize site goals screen and under settings - No Space between icon and edit label.

4) Key metrics :Ellipsis are missing on main environment for KM "Most engaging pages" widget and similar widgets.

5) The icon against the URL on the entity dashboard is misaligned again. This was fixed previously.

6) Source CTA svg icons are not looking bold now on main. I noticed that for svg icons we have different is getting apply on main which is not the case on latest. This same issue exist wherver we are using this icon like under notifications, Settings page >Connected services, Admin Settings> tracking services, main and entity dashboard, Settings> Connected Services> Analytics.

7) Connected Services > Arrows under green circle are not center aligned on main.

8) Connected services> Disconnect buttons for all modules are not aligned properly.

9) Settings> Connected Services> 'Edit' icons for all modules not aligned with the text.

10) Settings> Connect More Services > Set up arrow is not aligned with the text.

11) The Edit links for Analytics and Tag Manager settings are slightly misaligned.

[tofumatt]

For context, the change to display: inline-flex; for .googlesitekit-cta-link has had a lot of knock-on effects throughout the plugin. For instance, the ellipsis bug mentioned in 4 caused the link to have a width wider than the widget, and thus never overflow.

I'm going to mark which of these are totally fixed and which are either issues for a follow-up, acceptable changes, etc. here. (Currently a WIP, don't reply yet 😄)

• 1. Main dashboard and entity dashboard > All Traffic widget> text moved to next line.
• 2. Key metrics widget > 'Change metrics' button SVG is not aligned properly with text on main.
• 3. User Input Customize site goals screen and under settings - No Space between icon and edit label.
• 4. Key metrics :Ellipsis are missing on main environment for KM "Most engaging pages" widget and similar widgets.
• 5. The icon against the URL on the entity dashboard is misaligned again. This was fixed previously.
• 6. Source CTA svg icons are not looking bold now on main. This is correct and an intended effect.
• 7. Connected Services > Arrows under green circle are not center aligned on main.
• 8. Connected services> Disconnect buttons for all modules are not aligned properly.
• 9. Settings> Connected Services> 'Edit' icons for all modules not aligned with the text.
• 10. Settings> Connect More Services > Set up arrow is not aligned with the text.
• 11. The Edit links for Analytics and Tag Manager settings are slightly misaligned.

[aaemnnosttv]

This should be good now @wpdarren @mohitwp. @tofumatt and I went through everything pretty thoroughly. Back to you guys 👍

[wpdarren]

QA Update: ⚠️

@mohitwp would appreciate a second pair of eyes on this, but the only issue I can find is that the Edit in Analytics link highlighted below is slightly off. Everything else seems fixed, and I can't see any regressions.

Verified:

1. Main dashboard and entity dashboard > All Traffic widget> text fixed with alignment of chart legends.
2. Key metrics widget > 'Change metrics' button SVG is aligned properly with text.
3. User Input Customize site goals screen and under settings - Space between icon and edit label is fixed.
4. Key metrics :Ellipsis are appearing for KM "Most engaging pages" widget and similar widgets.
5. The icon against the URL on the entity dashboard is aligned correctly.
6. Connected Services > Arrows under green circle are center aligned.
7. Connected services> Disconnect buttons for all modules are aligned properly.
8. Settings> Connected Services> 'Edit' icons for all modules are aligned with the text.
9. Settings> Connect More Services > Set up arrow is aligned with the text.
10. The Edit links for Analytics and Tag Manager settings are misaligned. See note above.

Screenshots

[mohitwp]

QA Update ✅

@wpdarren Tested all the points and all issues are fixed.

The issue you highlighted is basically a part of point 6 because we are using same icons here and now these icons are not bold on main environment after new changes. For 6 @tofumatt replied that it is intended. Other issues are fixed now.

6. Source CTA svg icons are not looking bold now on main. This is correct and an intended effect.