fix style tagList

browser/components/TagListItem.js

@@ -12,8 +12,10 @@ import CSSModules from 'browser/lib/CSSModules'
 
 const TagListItem = (({name, handleClickTagButton}) => {
   return (
-    <button onClick={(e) => handleClickTagButton(e, name)}>
+    <button styleName='tagList-item' onClick={(e) => handleClickTagButton(e, name)}>
-      {`# ${name}`}
+      <span styleName='tagList-item-name'>
+        {`# ${name}`}
+      </span>
     </button>
   )
 })

browser/components/TagListItem.styl

@@ -0,0 +1,34 @@
+.tagList-item
+  display flex
+  width 100%
+  height 26px
+  background-color transparent
+  color $ui-inactive-text-color
+  padding 0
+  margin-bottom 5px
+  text-align left
+  border none
+  overflow ellipsis
+  font-size 12px
+  &:first-child
+    margin-top 0
+  &:hover
+    color $ui-text-color
+    background-color alpha($ui-button--active-backgroundColor, 20%)
+    transition background-color 0.15s
+  &:active
+    color $ui-text-color
+    background-color $ui-button--active-backgroundColor
+
+.tagList-item-name
+  display block
+  flex 1
+  padding 0 25px
+  height 26px
+  line-height 26px
+  border-width 0 0 0 2px
+  border-style solid
+  border-color transparent
+  overflow hidden
+  text-overflow ellipsis
+

browser/main/SideNav/SideNav.styl

@@ -46,6 +46,12 @@
   line-height 24px
   color $ui-inactive-text-color
 
+.tagList
+  absolute left right
+  bottom 37px
+  top 80px
+  overflow-y auto
+
 .navToggle
   navButtonColor()
   display block

browser/main/SideNav/index.js

@@ -83,8 +83,12 @@ class SideNav extends React.Component {
     } else {
       component = (
         <div>
-          <p>Tags</p>
+          <div styleName='tag-title'>
-          {this.folderListComponent(data)}
+            <p>Tags</p>
+          </div>
+          <div styleName='tagList'>
+            {this.folderListComponent(data)}
+          </div>
         </div>
       )
     }