From e613725a25ce67204cb04ceba9b312b2166cefe6 Mon Sep 17 00:00:00 2001
From: Jaril Valenciano <jarilvalenciano@gmail.com>
Date: Sun, 2 Sep 2018 01:45:32 -0400
Subject: [PATCH] Fix button wrapping behavior on mobile (#921)

* fixed button wrapping behavior

previous+next buttons with long text now stack properly on smaller screens

* truncates function/component names of prev/next buttons

Function/component names are truncated, while regular titles are wrapped

* removed unused styles

* fixed using idx (safe getter) for previous/next titles

passed through prettier and all tests pass
---
 lib/core/DocsLayout.js  | 37 +++++++++++++++++++++++++++----------
 lib/static/css/main.css | 28 ++++++++++++++++++++++++++--
 2 files changed, 53 insertions(+), 12 deletions(-)

diff --git a/lib/core/DocsLayout.js b/lib/core/DocsLayout.js
index d859e6b353..7078eef068 100644
--- a/lib/core/DocsLayout.js
+++ b/lib/core/DocsLayout.js
@@ -53,6 +53,18 @@ class DocsLayout extends React.Component {
     const title =
       idx(i18n, ['localized-strings', 'docs', id, 'title']) || defaultTitle;
     const hasOnPageNav = this.props.config.onPageNav === 'separate';
+
+    const previousTitle =
+      idx(i18n, ['localized-strings', metadata.previous_id]) ||
+      idx(i18n, ['localized-strings', 'previous']) ||
+      metadata.previous_title ||
+      'Previous';
+    const nextTitle =
+      idx(i18n, ['localized-strings', metadata.next_id]) ||
+      idx(i18n, ['localized-strings', 'next']) ||
+      metadata.next_title ||
+      'Next';
+
     return (
       <Site
         config={this.props.config}
@@ -85,11 +97,14 @@ class DocsLayout extends React.Component {
                     metadata.localized_id,
                     metadata.previous_id
                   )}>
-                  ←{' '}
-                  {idx(i18n, ['localized-strings', metadata.previous_id]) ||
-                    idx(i18n, ['localized-strings', 'previous']) ||
-                    metadata.previous_title ||
-                    'Previous'}
+                  <span className="arrow-prev">← </span>
+                  <span
+                    className={
+                      previousTitle.match(/[a-z][A-Z]/) &&
+                      'function-name-prevnext'
+                    }>
+                    {previousTitle}
+                  </span>
                 </a>
               )}
               {metadata.next_id && (
@@ -99,11 +114,13 @@ class DocsLayout extends React.Component {
                     metadata.localized_id,
                     metadata.next_id
                   )}>
-                  {idx(i18n, ['localized-strings', metadata.next_id]) ||
-                    idx(i18n, ['localized-strings', 'next']) ||
-                    metadata.next_title ||
-                    'Next'}{' '}
-                  →
+                  <span
+                    className={
+                      nextTitle.match(/[a-z][A-Z]/) && 'function-name-prevnext'
+                    }>
+                    {nextTitle}
+                  </span>
+                  <span className="arrow-next"> →</span>
                 </a>
               )}
             </div>
diff --git a/lib/static/css/main.css b/lib/static/css/main.css
index 322673ebd2..a8ba446c46 100644
--- a/lib/static/css/main.css
+++ b/lib/static/css/main.css
@@ -1545,8 +1545,32 @@ input::placeholder {
 }
 
 @media only screen and (max-width: 735px) {
-  .docs-prevnext {
-    height: 40px;
+  .docs-next {
+    clear: both;
+    float: left;
+    margin: 10px 0;
+  }
+
+  .docs-prev {
+    margin: 10px 0;
+  }
+
+  .arrow-next {
+    float: right;
+    margin-left: 10px;
+  }
+
+  .arrow-prev {
+    float: left;
+    margin-right: 10px;
+  }
+
+  .function-name-prevnext {
+    width: 200px;
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 }
 /* End of Docs Navigation */