reactjs / react.dev

The React documentation website

https://react.dev/

Creative Commons Attribution 4.0 International

11.07k stars 7.56k forks source link

UI BUG : Navigation button text overflows from parant span box #6460

Closed godspeed-03 closed 10 months ago

godspeed-03 commented 11 months ago

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 Screenshot from 2023-12-02 23-55-42

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

How often does this bug happen? Every time

nitesh9109 commented 11 months ago

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

godspeed-03 commented 11 months ago

Hii @nitesh9109 , I'm also using brave browser with my screen at 100%. Screenshot 2023-12-02 215209 It can be seen that the text overflows from the link box.

iamdebobrota commented 11 months ago

Attempted

iamdebobrota commented 11 months ago

Raised the PR, have fixed the UI : https://github.com/reactjs/react.dev/pull/6493

iamdebobrota commented 11 months ago

Here is an example :

prajwalkulkarni commented 10 months ago

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 commented 10 months ago

Fixed https://github.com/reactjs/react.dev/pull/6519