Weird text formatting/wrapping on mobile [1.9.0.beta10]

[insertusernamehere (John)]

• The forum is community.infinite-flight.com

• Discourse version is 1.9.0.beta10

• Phone is a Samsung Galaxy core prime - 4.5" display, running Android 5.1.1

• Using Google Chrome - stable edition

Since we’ve updated to the 1.9.0.beta10 , at the bottom of threads the text formatting next to buttons has been weird. Not sure this is intentional?
Not thread or category specific

Thanks in advance for any help,
John

[codinghorror (Jeff Atwood)]

This is @joffreyjaffeux’s code, can you repro here on meta though?

[joffreyjaffeux]

I certainly can repro, It was a choice, but it can indeed be weird on small screens. I will find a better solution.

[insertusernamehere (John)]

Yep, it’s the exact same here

Sounds fantastic, thanks @joffreyjaffeux!

[jomaxro (Joshua Rosenfeld)]

@insertusernamehere, do you have any thoughts/suggestions on what you’d like to see here? It’s a lot of text to fit on a small screen.

[joffreyjaffeux]

We just want it to follow the flow.

[insertusernamehere (John)]

“As it was before” is the best I can say . Sorry for the vagueness :(. @joffreyjaffeux put it perfectly

[joffreyjaffeux]

I have tried to keep the best of both ideas:

This is on a small screen (makes the text as readable as possible and limits the waste of vertical space in case it would create more than 2 lines):

This is on a larger screen (put the text on two lines elegantly and without losing vertical space):

Is this what you would expect? @insertusernamehere

[insertusernamehere (John)]

That’s great - looks really nice. Thanks!

[codinghorror (Jeff Atwood)]

It is not the same as before; prior to this the text cleared on mobile and appeared underneath the button, not next to it.

So I suggest a media query that at certain narrow widths puts the text underneath.

[joffreyjaffeux]

This is actually the easiest thing to do, you would prefer this behaviour?

[insertusernamehere (John)]

How it looked before always looked amazing, so yes, as long as it isn’t any trouble for you guys.

thanks for the speedy help!

[codinghorror (Jeff Atwood)]

At narrow widths I think this is the obvious choice.

[schungx (Stephen Chung)]

How about tugged to the right unless the text occupies less than half of the width, meaning a long button. Then it moves down.

I suppose this can be easily done by setting the text to min-width:50%? If less than half space is needed then move below.

Beware, though, the not all languages are long. German probably will be long, but Chinese will look great even wth only 1/3 of the space and will look weird moved down the line.