Learn page scrolls horizontally on small screen

[sojuhokari]

Design Bug Report

Page(s) Affected

• https://www.rust-lang.org/learn

What needs to be fixed?

On small devices (iPhone SE), the read the unstable book button in the Master Rust section of the page extends out to the right of the page, causing the page to scroll horizontally. This button is a link with class button applied from skeleton.

Suggested Improvement

I see two ways of fixing it:

1. Make the text of the button (“read the unstable book”) shorter. I do not see a good way of doing this.
2. Make the button take up two lines by overriding skeleton with some inline css. While the button may not look quite the same as the others, this effect can be achieved in one (kinda hacky) line of code. Plus, the button would only be two lines on very small screens; on regular phones and desktops, the button would remain one line, like the other buttons. It would be better if it could be done without inline CSS.
3. Other ways?

[yoshuawuyts]

Confirmed this is indeed the case. Suggested fix is to mimic the reflow behavior of the landing page. Diff:

diff --git a/templates/learn/index.hbs b/templates/learn/index.hbs
index 08e7e1f..6480652 100644
--- a/templates/learn/index.hbs
+++ b/templates/learn/index.hbs
@@ -140,7 +140,7 @@
       <div class="flex flex-row flex-column-l justify-between-l mw8 measure-wide-l pv4 pv5-m pv6-ns ph4-l">
         <div class="v-top tc-l">
           <img src="/static/images/reference.svg" alt="A bookshelf icon"
-               class="mw4 mw5-ns" />
+               class="mw3 mw4-ns" />
         </div>
         <div class="v-top pl4 pl0-l pt0 pt3-l measure-wide-l flex-l flex-column-l flex-auto-l justify-between-l">
           <p>The Reference is not a formal spec, but is more detailed and
@@ -155,7 +155,7 @@
       <div class="flex flex-row flex-column-l justify-between-l mw8 measure-wide-l pv4 pv5-m pv6-ns ph4-l">
         <div class="v-top tc-l">
           <img src="/static/images/nomicon.svg" alt="Two hands cradling fire"
-               class="mw4 mw5-ns" />
+               class="mw3 mw4-ns" />
         </div>
         <div class="v-top pl4 pl0-l pt0 pt3-l measure-wide-l flex-l flex-column-l flex-auto-l justify-between-l">
           <p> The Rustonomicon is your guidebook to the dark
@@ -171,7 +171,7 @@
       <div class="flex flex-row flex-column-l justify-between-l mw8 measure-wide-l pv3 pv5-m pv6-ns ph4-l">
         <div class="v-top tc-l">
           <img src="/static/images/unstable.svg" alt="A hand sharing sparkles"
-               class="mw4 mw5-ns" />
+               class="mw3 mw4-ns" />
         </div>
         <div class="v-top pl4 pl0-l pt0 pt3-l measure-wide-l flex-l flex-column-l flex-auto-l justify-between-l">
           <p>The Unstable Book has documentation for unstable features that you

I'm currently blocked on testing this out locally due to https://github.com/SergioBenitez/Rocket/issues/870, but I'd encourage anyone to try out these changes and make a PR if they work out well!