WS-3040 - Related Topic label wrap

[holchris]

Resolves JIRA: WS-3040

Summary

Adds logic to cover the following three scenarios

• Topic type and timestamp fit within the promo width
• Topic and timestamp splits on two lines when combined width is greater than promo width
• Topic and timestamp splits on two lines when wider than promo width and extra long topic has an ellipsis when longer than promo width

Code changes

• Adds ellipsis if the Related Topic link length is over one line
• Ensures full Related Topic title is read out on a screenreader

Testing

Mundo Homepage on localhost with live data here Related Topic is available on Promos on Hierarchical Grid and Curation Promo

Useful Links

• Coding Standards
• Repository use guidelines
• Add Links to useful resources related to this PR if applicable.

[Nabeel1276]

Since this PR only adds CSS truncation to the Related Topic link with no changes to the markup itself, will screen readers still read out the full, untruncated title correctly as mentioned in the PR description?

[holchris]

Since this PR only adds CSS truncation to the Related Topic link with no changes to the markup itself, will screen readers still read out the full, untruncated title correctly as mentioned in the PR description?

I have tested this on screenreader on Mac and it reads out the full related topic title when it is truncated

[HarveyPeachey]

This is a lot of css for something very small, is it even worth the trouble? Makes this component very hard to read

[holchris]

This is a lot of css for something very small, is it even worth the trouble? Makes this component very hard to read

I agree that the approach is a bit verbose, but we want the Related Topic link to truncate rather than wrap the text like on other components. We could have approached the truncation using a maximum character length, however this wouldn't work effectively because our services use different alphabets and characters

[Copilot]

Pull request overview

Updates Curation promo metadata styling so the “Related topic” link and timestamp wrap cleanly within promo width constraints, including truncating overly-long related topic labels with an ellipsis while preserving the full accessible link name.

Changes:

• Adjusts metadataAndTopicData layout to a wrapping flex row with controlled spacing and a timestamp separator dot that is hidden when wrapping.
• Applies single-line truncation (text-overflow: ellipsis) to related topic links to prevent multi-line overflow.
• Adds component tests asserting the related topic link receives truncation styles when long.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File	Description
src/app/components/Curation/HierarchicalGrid/index.styles.tsx	Updates metadata + related-topic styling to support wrap + ellipsis behavior in Hierarchical Grid promos.
src/app/components/Curation/HierarchicalGrid/index.test.tsx	Adds a test asserting related topic links receive ellipsis/truncation styles.
src/app/components/Curation/CurationPromo/index.styles.ts	Updates Curation Promo metadata + related-topic styling to match the new wrap + ellipsis behavior.
src/app/components/Curation/CurationPromo/index.test.tsx	Adds a test asserting related topic links receive ellipsis/truncation styles.