Next and previous buttons wrap and stack on mobile

[jaril]

🚀 Feature

Changing the next and previous button styles so that they don't stack and wrap on smaller screens (either on desktop or mobile).

Have you read the Contributing Guidelines on issues?

Yes

Motivation

The behavior happens when the text inside the buttons are long. This is especially noticeable on mobile, since it's easier to click on the wrong thing.

Pitch

Modify button styles for mobile screen widths.

• Option 1: set both buttons to equal width on smaller screens, forcing the lengthy text to wrap within the button itself
• Option 2: set the next button to float: left on smaller screens and add padding: 10px so that there's consistency and clear separation between the two buttons

[JoelMarcey]

@notjaril Thanks for the bug report. Do you have any interest in submitting a PR to fix this?

[jaril]

Sure! Which option do you prefer?

I'm leaning more towards option 2. Putting my UX hat on, it's more difficult to reach buttons on the right side of the screen on mobile (at least for right handed folks). Also it's a bonus that it's a simpler fix.

[JoelMarcey]

@notjaril I like option 2 as well. 👍

[yangshun]

Option 2 is great 👍 Sometimes we have extremely longer unbreakable strings because they are function names though, for example: https://facebook.github.io/react-native/docs/0.56/touchableopacity

Not sure how we can deal with that.

[yangshun]

@notjaril it's yours!

I've added an "issue: claimed" label so that others will know not to start work on the issue. If you change your mind about the issue, no worries! Just let me know so that I can remove the label and free it up for someone else to claim.

I'll check in with you periodically so that we can keep the task updated with the progress.

[jaril]

@yangshun I've noticed the extremely long strings as well. It should be okay, since the current CSS handles that case just fine by wrapping the text within the button anyway.

[yangshun]

Yes, it wraps for text which have spaces in them. In the example I posted above, there are no spaces in them because they're code (function names/component names). In this case, we could use something like text-overflow: ellipsis for truncation.

[jaril]

Oh I see what you're saying. Truncation is a good idea - though I just noticed that the arrows (← →) are part of the text, and the next arrow (→) would get cut off if the text were truncated.

I'm thinking we could make the arrows its own DOM element inline with the text, that way only the text gets truncated. Any thoughts on how to get around it?

I'll think about this more and circle back.

[yangshun]

Cool. Yes we could move the → into its own span and only truncate the text

[jaril]

Okay - I had to add some logic but I think I've got it. Function/component names now truncate with ellipsis to 200px width for function/component names, where regular titles are simply wrapped. The arrows are in different spans so it's unaffected.

The distinction between the two cases is made by looking for a a smaller case character followed by an upper case character (eg aR/pR/eI). This seems to cover all of the function/component names within a library like React Native, except for (short) single words in which case it's simply wrapped like a regular title would.

If there are any other edge cases I might have missed with this let me know. Also if it's better to move the discussion over to the PR that's fine too.