UI BUG : Navigation button text overflows from parant span box

[godspeed-03]

Website or app
https://react.dev/reference/react/startTransition

Repro steps
When hovering on the next navigation button, the text overflows the Box.
issue image

code -
Just needed to warp the link text with Break-word property.

How often does this bug happen?
Every time

[nitesh9109]

@godspeed-03, I am also using the Brave browser. However, this problem doesn't occur in Brave, instead, it happens in Firefox.

[godspeed-03]

Hii @nitesh9109 , I'm also using brave browser with my screen at 100%.

It can be seen that the text overflows from the link box.

[iamdebobrota]

Attempted

[iamdebobrota]

Raised the PR, have fixed the UI : #6493

[iamdebobrota]

Here is an example :

[prajwalkulkarni]

I think using break-all or break-word still wouldn't fix the issue completely. What if the string is even longer? The container height would be increased to avoid overflowing and accommodate the complete string in multiline.
The same goes with increasing the parent width, or even alternatively setting the width to be auto with a min-width. It would mess up the design system and lead to visual inconsistencies.
Instead, I think without altering the width of the container, we can hide the overflowing content with ellipsis and on hover show the complete string on the tooltip.

[rickhanlonii]

Fixed #6519