Long post titles on the "Top content by pageviews" section of Audience tile occupies multiple line instead of sticking to single line with ellipses

[kuasha420]

Bug Description

As seen in the following description, the post title spans into multiple lines instead of remaining a single line with ellipses as seen in the Figma design.

Screenshot (Chrome)

Screenshot (Firefox) - Looks even more broken for some reason

Besides that, we should also introduce options in our getAnalytics4MockResponse to support returning long post titles in the generated response for easier testing.

Steps to reproduce

Once https://github.com/google/site-kit-wp/issues/8138 is implemented it will be possible to reproduce this by setting up the Audience Segmentation feature and selecting an audience with a long post title in its "Top content" results.

In the meantime, though, this can be reproduced in Storybook, e.g. by navigating to the Audience Tile story, viewing the tile in a narrow viewport, and either directly modifying a post title via devtools, or modifying the title in the code for the component, for example editing AudienceTilePagesMetric.js and adding the following snippet at the top of the component:

topContentTitles[ '/en/test-post-2/' ] = 'Test Post 2 with a very long title that should be truncated to stay in a single line.';

Screenshots

See the Bug Description.

Additional Context

• PHP Version: any
• OS: any
• Browser: any
• Plugin Version: prerelease 1.126.0
• Device: any

---

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

Acceptance criteria

• Long "Top content" post titles should not wrap to a second line.
• These titles should be truncated to fit the available space and should show ellipses at the end of the visible text.

Implementation Brief

• [x] In assets/sass/components/analytics-4/audience-segmentation/_googlesitekit-audience-segmentation-tile.scss add min-width: 0 to googlesitekit-audience-segmentation-tile-metric__container and a.googlesitekit-cta-link this is necessary in order for text-overflow to work. (Please see the relevant resources links).
  • [x] Add an extra rule in scss file under googlesitekit-audience-segmentation-tile-metric__container .googlesitekit-cta-link__contents selector

  .googlesitekit-cta-link__contents {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
  }

• [x] Add some margin-right to googlesitekit-cta-link so that there is some spacing between title and the count.

Relevant resources for min-width:0 trick

1. https://leonardofaria.net/2020/07/18/using-flexbox-and-text-ellipsis-together
2. https://codepen.io/leonardofaria/pen/rNxZJad
3. https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

Test Coverage

• Fix and approve any failing VRTs

QA Brief

1. Visit the AudienceTile component in storybook.

2. Edit other post titles under Top content by pageviews using browser inspector, to make them too long. Ensure that those are trimmed with ellipsis in the end.

3. User count and title should be separated and clearly visible without overlap.

Changelog entry

• Avoid line wrapping and show ellipses for long post titles in the "Top content by pageviews" section of an Audience tile.

[ivonac4]

@ankitrox could you add the estimate to this task so Tom can review estimate together with IBs? Thank you!

[aaemnnosttv]

Thanks @ankitrox!

• add min-width: 0 this is necessary in order for text-overflow to work.

Can you be more specific about where this would be needed similar to how you did for the other change?

• Width needs to be adjusted according to devices. Above is just an example with 250px.

This sounds like we're calling for styling different widths explicitly at different breakpoints, no? It should be possible to do without an explicit width. Have a look at other instances of text-overflow: ellipsis in our styles. If not, please clarify what you mean there.

[ankitrox]

Thank you for reviewing the IB @aaemnnosttv

I have revised the IB as per your suggestion to add min width to googlesitekit-audience-segmentation-tile-metric__container and the .googlesitekit-cta-link, also added the relevant links for the reference.

Assigning to you for re-review.

Thanks

[aaemnnosttv]

Great, thanks @ankitrox !

IB ✅

[techanvil]

Hey @ankitrox, please can you add a QAB for this one?

[ankitrox]

Hi @techanvil ,

I have added the QAB. As we have already updated the storybook for long title, I have added an additional step (alongside storybook) to modify the other post titles using browser inspector so that long post titles are trimmed with ellipsis.

Thanks

[techanvil]

Thanks @ankitrox!

[kelvinballoo]

QA Update ❌

I tested this and it's looking good overall:

• Long "Top content" post titles is not wrapping to a second line. ✅

• When editing the other post titles under Top content by pageviews using browser inspector to make them too long, the titles are trimmed with ellipsis in the end. ✅

  

• User count and title should be separated and clearly visible without overlap. ✅

The only part failing is the spacing between the ellipsis and the count. ❌ It should be 30px instead of 16px as per the following details:

Current implementation is at 16px:

In figma, it's 30px:

[ankitrox]

Thank you @kelvinballoo for the QA.

I have created a new PR https://github.com/google/site-kit-wp/pull/8748 to fix the margin issue. Moving this to CR.

[techanvil]

Back to you for another pass, @kelvinballoo!

[kelvinballoo]

QA update ✅

Retested and looking good at 30px:

Moving ticket to approval.