Search queries in the "Top search queries" widget are overflowing on the shared dashboard at narrow viewports

[techanvil]

Bug Description

When viewing the "Top search queries" widget on the shared dashboard at narrow viewports, long search queries can currently overflow the clicks and impressions metrics.

Steps to reproduce

1. Login to Site Kit as an admin and share Search Console.
2. Login as a second user with shared access to Search Console and scroll down to the "Top search queries" widget.
3. Ensure the viewport is set to a relatively narrow width.
4. See that long search queries overflow the clicks and impressions metrics.
5. Note that this is of course dependent on having some long search queries appear in the list for the connected Analytics property. I discovered this using the oi.ie property. Alternatively, it can be verified using Storybook by making the search results a bit longer for the view-only story.

Screenshots

Search queries overflow in the "Top search queries" widget:

They should show ellipses similarly to the "Top performing keywords" Key Metrics widget:

Additional Context

• PHP Version: any
• OS: any
• Browser: any with a narrow enough viewport
• Plugin Version: noticed on 1.122.0
• Device: any

---

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

Acceptance criteria

• When viewing the "Top search queries" widget on the shared dashboard at narrow viewports, long search queries should not overflow the clicks and impressions metrics, and should instead be truncated with ellipses (similarly to the "Top performing keywords" Key Metrics widget).

Implementation Brief

• In assets/sass/components/global/_googlesitekit-table.scss:

  • Add styling for .googlesitekit-table .googlesitekit-table__body-item-content span for a max viewport width of $bp-tablet to the following:

    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    

    • This is similar to what is set for .googlesitekit-table .googlesitekit-table__body-item-content .googlesitekit-cta-link.

Test Coverage

• No tests need to be added/updated.
• Update any failing VRT references if required.

QA Brief

• Follow aforementioned steps to reproduce and verify that queries don't overflow the table column.

Changelog entry

• Fix bug that caused "Top search queries" widget to overflow on small screens.

[eugene-manuilov]

IB ✔️

[mohitwp]

QA Update ✅

• Tested on dev environment.
• Verified when viewing the "Top search queries" widget on the shared dashboard at narrow viewports, long search queries not overflow the clicks and impressions metrics, and instead be truncated with ellipses (similarly to the "Top performing keywords" Key Metrics widget).

Latest:

Develop :