mobile UX improvement

Author: Alban Bailly

gatsby-browser.js

@@ -4,17 +4,19 @@
  * See: https://www.gatsbyjs.org/docs/browser-apis/
  */
 
-const transitionDelay = 50;
+const windowWidth = window.screen.width;
+const transitionDelay = windowWidth <= 480 ? 0 : 50;
 
 exports.shouldUpdateScroll = ({ routerProps: { location } }) => {
   if (!location.hash || !document.getElementById(location.hash.substr(1))) {
     window.setTimeout(() => window.scrollTo(0, 0), transitionDelay);
   } else {
     window.setTimeout(
       () =>
-        document
-          .getElementById(location.hash.substr(1))
-          .scrollIntoView({ block: "start", behavior: "smooth" }),
+        document.getElementById(location.hash.substr(1)).scrollIntoView({
+          block: "start",
+          behavior: transitionDelay <= 480 ? "auto" : "smooth"
+        }),
       transitionDelay
     );
   }

src/components/2_molecules/sidemenu.js

@@ -68,14 +68,19 @@ class SideMenu extends React.Component {
         });
     });
 
+    const windowWidth = window.screen.width;
+    console.log(windowWidth);
+    const transitionDelay = windowWidth <= 480 ? 0 : 50;
+
     hash &&
       document.getElementById(hash.substr(1)) !== null &&
       window.setTimeout(
         () =>
-          document
-            .getElementById(hash.substr(1))
-            .scrollIntoView({ block: "start", behavior: "smooth" }),
-        50
+          document.getElementById(hash.substr(1)).scrollIntoView({
+            block: "start",
+            behavior: windowWidth <= 480 ? "auto" : "smooth"
+          }),
+        transitionDelay
       );
   }
 

src/components/5_templates/api.js

@@ -101,7 +101,7 @@ class apiPage extends React.Component {
                             <span className="tag big bold mr-2 uppercase">
                               {mode}
                             </span>
-                            <pre className="whitespace-pre-line">
+                            <pre className="whitespace-pre-line break-word">
                               {m.servers
                                 ? m.servers[0].url
                                 : "https://api.linode.com/v4"}

src/css/components/4_pages/api-page.css

@@ -26,10 +26,16 @@
 
 .endpoint-anchor {
   position: relative;
-  top: -84px;
+  top: -154px;
   visibility: hidden;
 }
 
+@screen sm {
+  .endpoint-anchor {
+    top: -84px;
+  }
+}
+
 .list-group,
 .list-group ul {
   max-height: 0;
@@ -171,13 +177,19 @@
   @apply border-grey-light mb-8;
 }
 
+.search-header input {
+  max-width: 100%;
+}
+
 .search-header-wrapper {
   position: sticky;
   top: 65px;
   width: 100%;
   z-index: 1;
-  padding: 1rem 1rem 0;
+  padding: 1rem;
   background-color: #fff;
+  border-bottom-width: 1px;
+  @apply border-grey-light;
 }
 
 .search-results-list {