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)}>
-      {`# ${name}`}
+    <button styleName='tagList-item' onClick={(e) => handleClickTagButton(e, 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
+