[Account] Prevent account info overflowing on kebab menu #4555
Conversation
| variant="body2" | ||
| fontWeight="bolder" | ||
| // Only truncate when a longer text causes the text to overflow over the MoreIconButton | ||
| maxWidth={handleClick ? 180 : 'unset'} |
There was a problem hiding this comment.
Looks good, but is there no way to make it overflow with the available width without us having to set a manual value?
I feel like it should be possible but haven't tried it.
Also what is the behavior if there is no options button? Does it truncate with an ellipsis after the sidebar width? I guess that's what it should do in every case... (just tested and looks like it doesn't so I guess it could)
There was a problem hiding this comment.
The idea to only truncate when there is an options button is to allow the popover to have the complete information, so something like:
Screen.Recording.2025-01-07.at.3.53.23.PM.mov
We could truncate in all cases, but then do you suggest including a Tooltip when the text is inside the popover; something like:
Screen.Recording.2025-01-07.at.4.00.53.PM.mov
There was a problem hiding this comment.
I meant that if you don't pass a handleClick to AccountPreview and so there's no options button to show a popover, this is what it looks like right now:
So maybe all these overflows should ellipsize automatically? Probably not a huge deal though, it was just something I noticed.
There was a problem hiding this comment.
Ah got it! Yes the ellipsis should happen in this case as well, good catch
github-actions
bot
added
the
PR: out-of-date
github-actions
bot
removed
the
PR: out-of-date
Netlify deploy preview |
overflow="hidden"does the trickAccountPreviewwill truncate the account info if placed inside a div with a set width, otherwise will expand