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

[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 #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.