Adjust toot button style

[lynlynlynx]

I think this way is better than #4723 "fix toot button text be hidden when img pasted"

Pros

• Solve ellipsis of toot buttons in some languages whose translation is long

• Enlarge Formosan toot buttons

Before and after images below.

Cons

• Padding becomes smaller in some languages
  I wonder if we prioritize usual(image is not attached) appearance or not 🤔
  Anyone has good way to solve this cons? Variable padding?
• Can't solve ellipsis of all languages
  Bulgarian and Ukrainian image is attached.
  Spanish and Portuguese image is attached in private or direct toots.
  I think there is no way to solve this except increasing column width. 🤷‍♂️

Before and after images below.

Padding becomes smaller in some languages

To put it the other way around.

Can't solve

---

The appearance is almost same for languages use "TOOT" as "compose_form.publish".

[nightpool]

Why not just use flexbox to change the padding based on how much space is available?

At a minimum, we should never use !important styles unless something is very wrong with our selectors

[matyapiro31]

flexbox is not stable technology now, there are some difference among browsers remained, and also there is no reason why using padding isn't better than flexbox.
I agree with removing !import.

[nolanlawson]

@matyapiro31 We don't support IE at all, and IE is the browser with the v1 version of flexbox. I think given we're essentially supporting latest Chrome/Edge/Firefox/Safari, it's safe to use flexbox. Furthermore, we already use flexbox in several places in the codebase. 😃

[mattcoxonline]

I started to tweak the padding and text size around the tootbox to see how things fit. And a small reduction in font size / icon sizes and maintaining an equal padding either side of the button seems to work quite well.

There's also the option for longer toot buttons to force the icon set to the left to collapse behind an elipses. This also forces you to take the decision on what is the primary action you want people to do; CW vs upload media vs other stuff. _See example labelled "Tootbox - Elipses"

However, we have a lot of space in the left column and I'm not sure why the grey strip of buttons does't run the full width of the input box? Maybe too crazy a suggestion. See example labeled "Tootbox - Full-width"

[lynlynlynx]

Full-width textbox seems really nice to me.
I got stuck with this pull request, so I'll close it.
Would you create new request? @mattcoxonline