From 6377dc86e04a23146d314355f7df314d0f4a33e1 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Wed, 26 Aug 2020 10:59:50 -0400
Subject: [PATCH] fix side navigation scroll behavior on mobile

---
 ui/component/sideNavigation/view.jsx |  6 +++---
 ui/scss/component/_navigation.scss   | 11 ++++++++---
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/ui/component/sideNavigation/view.jsx b/ui/component/sideNavigation/view.jsx
index 4106eb77a..02fc824e3 100644
--- a/ui/component/sideNavigation/view.jsx
+++ b/ui/component/sideNavigation/view.jsx
@@ -261,7 +261,7 @@ function SideNavigation(props: Props) {
             {TOP_LEVEL_LINKS.map(linkProps => {
               const { hideForUnauth, ...passedProps } = linkProps;
               return !email && linkProps.hideForUnauth && IS_WEB ? null : (
-                <li key={linkProps.navigate}>
+                <li key={linkProps.icon}>
                   <Button
                     {...passedProps}
                     label={__(linkProps.label)}
@@ -309,7 +309,7 @@ function SideNavigation(props: Props) {
                 const { hideForUnauth, ...passedProps } = linkProps;
 
                 return !email && hideForUnauth && IS_WEB ? null : (
-                  <li key={linkProps.navigate}>
+                  <li key={linkProps.icon}>
                     <Button
                       {...passedProps}
                       label={__(linkProps.label)}
@@ -330,7 +330,7 @@ function SideNavigation(props: Props) {
                 const { hideForUnauth, ...passedProps } = linkProps;
 
                 return !email && hideForUnauth && IS_WEB ? null : (
-                  <li key={linkProps.navigate} className="mobile-only">
+                  <li key={linkProps.icon} className="mobile-only">
                     <Button
                       {...passedProps}
                       label={__(linkProps.label)}
diff --git a/ui/scss/component/_navigation.scss b/ui/scss/component/_navigation.scss
index bb447b099..855c19736 100644
--- a/ui/scss/component/_navigation.scss
+++ b/ui/scss/component/_navigation.scss
@@ -20,16 +20,20 @@
 .navigation {
   position: fixed;
   left: 0;
+  overflow-y: auto;
   top: var(--header-height);
   width: var(--side-nav-width);
   height: calc(100vh - var(--header-height));
-  overflow-y: hidden;
   border-right: 1px solid var(--color-border);
   padding-top: var(--spacing-l);
   padding-bottom: var(--spacing-xl);
 
-  &:hover {
-    overflow-y: auto;
+  @media (min-width: $breakpoint-small) {
+    overflow-y: hidden;
+
+    &:hover {
+      overflow-y: auto;
+    }
   }
 }
 
@@ -70,6 +74,7 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  width: 100%;
   color: var(--color-navigation-link);
   padding-left: var(--spacing-s);
   font-size: var(--font-body);