Fixes #36350 - Add line breaks to long bookmarks #9758
Conversation
|
Issues: #36350 |
|
Could we do it a bit differently? I mean, if there are multiple long names then they will just take a lot of vertical space. So nothing is changed, but the direction of wasted space. Maybe we could try using ellipsis here? Just crop the line after few characters and put the rest into tooltip. |
|
I think the ellipsis was used before we started with any bookmark changes and the user feedback was, that they need to see the whole bookmark name. Seeing just the beginning does not help too much. I think this is a good compromise, it's still readable (not extremely long line) and contains the whole name. Hoes does it look like, when there's 100 bookmarks like this (I think the reporting user had around 100 of them), is it scrollable? If so, I'm 👍 |
I agree, that's why I suggested tooltip with the rest (or the full name even). But since users want to deal with scrolling, who am I to be against that 😶 |
Yes, the page is scrollable when the dropdown is long. However, after testing it more, I found this issue, so I'm now working on fixing it. |
kmalyjur
changed the title
| > | ||
| <EllipisWithTooltip>{name}</EllipisWithTooltip> | ||
| const bookmarksList = ({ bookmarks, onBookmarkClick }) => { | ||
| const hasLongerName = bookmarks.some(bookmark => bookmark.name.length > 90); |
There was a problem hiding this comment.
Can you do this check also for errorItem?
| </EllipisWithTooltip> | ||
| <DropdownItem | ||
| ouiaId="error-dropdown-item" | ||
| className={`bookmarks-dropdown-item ${errors > 90 ? 'expanded' : ''}`} |
The dropdown was stretching with long names and it was overflowing the page too much:
Now the dropdown shrinks and the words break if it is too long so that it is nicely visible:
This is a quick resolution that could be redone in the future.