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


(John) #1
  • 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


(Jeff Atwood) #2

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


(Joffrey Jaffeux) #3

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


(John) #5

Yep, it’s the exact same here :slight_smile:

Sounds fantastic, thanks @joffreyjaffeux!


(Joshua Rosenfeld) #6

@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.


(Joffrey Jaffeux) #7

We just want it to follow the flow.


(John) #8

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


(Joffrey Jaffeux) #9

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


(John) #10

That’s great - looks really nice. Thanks!


(Jeff Atwood) #11

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.


(Joffrey Jaffeux) #12

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


(John) #13

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

:smile: thanks for the speedy help!


(Jeff Atwood) #14

At narrow widths I think this is the obvious choice.


(Stephen Chung) #15

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.


(Jeff Atwood) #16