fix(web-components): truncate long breadcrumb titles on reflow

[sylvesterkaczmarek]

Summary of the changes

Prevents very long breadcrumb page titles from forcing horizontal scrolling in narrow layouts.

The breadcrumb and its nested flex containers can now shrink below their intrinsic content width. Page titles are rendered in a dedicated page-title span and use overflow clipping with an ellipsis, while chevrons and icons retain their fixed size. The full title remains present in the DOM.

Snapshots are updated for linked and current-page breadcrumb variants.

Related issue

Closes #4458

Validation

• Maintainer's suggested truncation approach implemented
• Existing breadcrumb snapshots updated
• No public component API change
• Full page-title text remains in the DOM

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.

---

Sylvester Kaczmarek seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[GCHQ-Developer-530]

Hi @sylvesterkaczmarek, looks like this change is causing the unit and Cypress visual regression tests to fail.

For the unit tests if you could regenerate the snapshot file then that should fix them.
For the visual regression tests, I'm assuming the new span has caused the title styling to change slightly, so if you could update the css so that the typography matches whats there currently then that would be great.

Thank you

[sylvesterkaczmarek]

Thanks for spotting those. I've regenerated the snapshot and restored the breadcrumb title typography to match develop.

[GCHQ-Developer-530]

Thanks for making those updates @sylvesterkaczmarek. Looks like it's still failing 8 breadcrumb visual tests by 0.001% difference. It might be a case that they need regenerating instead, would you be able to update the images?

Also would you be able to squash all of the web-components commits into one like you've done on other pull requests? Thank you

[sylvesterkaczmarek]

Thanks for the guidance. I’ve pushed the typography fix and updated the affected snapshots. The new workflow run is currently marked “action required”, so it looks like it now just needs maintainer approval before the checks can run.

[GCHQ-Developer-530]

Please rebase this branch