Merge pull request #988 from ringohub/fix/982-can_not_scroll_tag_list

Fix #982: Tag list cannot be scroll

browser/main/SideNav/SideNav.styl

@@ -4,9 +4,12 @@
   background-color #f9f9f9
   user-select none
   color $ui-text-color
+  height: 100vh
+  display: flex
+  flex-direction column
 
 .top
-  height 45px
+  padding-bottom 15px
 
 .top-menu
   navButtonColor()
@@ -47,18 +50,20 @@
   margin-left 5px
   overflow ellipsis
 
+.tabBody
+  flex 1
+  display flex
+  flex-direction column
+
 .tag-title
-  height 65px
-  position relative
-  left 15px
+  padding-left 15px
+  padding-bottom 13px
   p
     color $ui-text-color
 
 .tagList
-  absolute left right
-  bottom 37px
   overflow-y auto
-  position relative
+  flex: 1
 
 body[data-theme="dark"]
   .root, .root--folded
@@ -98,4 +103,4 @@ body[data-theme="dark"]
 
   .tag-title
     p
-      color alpha($ui-dark-text-color, 60%)
+      color alpha($ui-dark-text-color, 60%)

browser/main/SideNav/index.js

@@ -80,7 +80,7 @@ class SideNav extends React.Component {
       )
     } else {
       component = (
-        <div>
+        <div styleName='tabBody'>
           <div styleName='tag-title'>
             <p>Tags</p>
           </div>