                :min-height (px tags-min-height)
                :line-height (px (+ 2 tags-min-height))}
      [:&.editable (list
-                   {:padding-left (px tag-icon-box)
+                   {:padding {:left (px tag-icon-box)
+                              :top (px 6)}
                     :border (str "1px solid " border-dark)
                     :border-radius (px 3)
                     :height :auto
                     :background {:image (image-url "tag-icon.svg")
                                  :repeat :no-repeat
                                  :size (px 14)
-                                 :position [[(px 4) (px 4)]]
+                                 :position [[(px 8) (px 8)]]
                                  :color :white}
                     :white-space :initial}
                    (calc-property :width ["100%" -  (px tag-icon-box)]))
       [:&:before {:content (pr-str "Tags:")
-                  :font-size (em 1.2)}]]
-     (let [tag-height 16]
+                  :font-size (em 1.2)
+                  :display :block
+                  :float :left
+                  :line-height (px 18)
+                  :margin-left (px 2)
+                  }]]
+     (let [tag-height 15
+           tag-inner-margin 2
+           radius  (px 5)]
        [:li.tag {:display :inline-block
                  :background-color tags-background
                  :height (px tag-height)
-                 :padding {:left (px 4)
-                           :right (px 4)}
-                 :margin {:left (px 2)
-                          :right (px 2)}
+                 :padding {:right (px 10)}
+                 :margin {:left (px tag-inner-margin)
+                          :right (px tag-inner-margin)}
                  :color tags-text
-                 :line-height (px tag-height)
+                 :border (str "1px solid " tags-border)
                  :text-decoration :none
                  :outline :none
-                 :border-radius (em 0.5)}
-        [:&.selected {:background-color tags-selected-background
-                      :border (str "1px solid" border-dark)
-                      :padding {:left (px 3)
-                                :right (px 3)}}]
+                 :overflow :hidden
+                 :border-radius radius}
+        [:a {:display :block
+             :height "100%"}]
+        [:.tag-name {:margin-left (px tag-inner-margin)
+                     :line-height (px tag-height)
+                     :height (px tag-height)
+                     :display :inline-block
+                     :vertical-align :top}]
+        [:&.selected {:background-color tags-selected-background}]
         (let [color-size 8]
+          
           [:.color {:display :inline-block
-                    :height (px color-size)
-                    :width (px color-size)
-                    :margin-right (px 2)
+                    :height (px tag-height)
+                    :width (px tag-height)
+                    :margin-right (px tag-inner-margin)
                     ;; Border looks horrible on non-high-DPI screens
                     ;; :border "1px solid white"
-                    :border-radius "50%"
                     }])])
      (let [input-padding 5]
        [:li {:display :inline-block}

                         :padding {:left (px 4), :right (px 4)}}]
               [:.color {:width (px color-size)
                         :height (px color-size)
                         :float :right}]])]
           [:.show-more {:font-weight :bold
                         :font-size (px 10)
                         :cursor :pointer}]]

                        ;; Not sure if this is a good idea
                        :font-size (px color-size)
                        :line-height (px color-size)
                        :height (px color-size)
                        :border :none}
               [:.tag-name {:position :absolute
                            :top "50%" :transform "translateY(-50%)"
                            :overflow :hidden
