Repository navigation
UI BUG : Navigation button text overflows from parant span box #6460
Description
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
Activity
nitesh9109 commentedon Dec 2, 2023
@godspeed-03, I am also using the Brave browser. However, this problem doesn't occur in Brave, instead, it happens in Firefox.
godspeed-03 commentedon Dec 2, 2023
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.
fixed: UI BUG : Navigation button text overflows from parant span box…
iamdebobrota commentedon Dec 15, 2023
Attempted
iamdebobrota commentedon Dec 15, 2023
Raised the PR, have fixed the UI : #6493
iamdebobrota commentedon Dec 15, 2023
Here is an example :
prajwalkulkarni commentedon Dec 28, 2023
I think using
break-allorbreak-wordstill 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
autowith 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 commentedon Jan 12, 2024
Fixed #6519