Desktop: Resolves #9998: Fixed text wrapping in Spellcheck button

[RadCod3]

Description

Fixed #9998 using one liner.

Screenshots

Before:

After:

[github-actions]

CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅

[RadCod3]

I have read the CLA Document and I hereby sign the CLA

[laurent22]

Now that I see the screenshot... Is it possible to instead cut the text with an ellipsis?

[RadCod3]

Will try to do so and get back to you.

[RadCod3]

I tried the following css but the text won't truncate without setting a specific value to the width, which then wont show the full text even when you expand it. Will try it out some more, any ideas?

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;

Edit:
I've found some references: https://css-tricks.com/flexbox-truncated-text/

Edit 2: Got a working solution now! Is this acceptable?

[RadCod3]

I had to wrap text inside the ToolbarButtons with a span, otherwise it wouldn’t truncate with ellipsis, it just truncated from both sides.

Also apologies if I do this wrong but @PackElend label me please (Do I ask for this label after creating future PRs as well?).

[PackElend]

(Do I ask for this label after creating future PRs as well?)

yes, otherwise we cannot track your work

[laurent22]

Please don't use "any". React.CSSProperties is the correct type here I believe