Fix according to review

app/Resources/static/themes/material/css/article.scss

@@ -106,11 +106,11 @@
       font-size: 0.8em;
       display: flex;
       flex-flow: row wrap;
-      margin: 0 auto;
 
       li {
         display: inline-flex;
         vertical-align: middle;
+        margin: 0 5px;
       }
 
       a {
@@ -121,7 +121,7 @@
 
     #list {
       float: right;
-      margin: 0 15px 10px;
+      margin: -5px 15px auto;
     }
 
     .chip {
@@ -133,12 +133,19 @@
       i {
         color: #fff;
       }
+
+      i.material-icons {
+        float: right;
+        font-size: 20px;
+        line-height: 32px;
+        padding-left: 8px;
+      }
     }
   }
 }
 
 .reader-mode {
-  width: 95px !important;
+  width: 70px !important;
   transition: width 0.2s ease;
 
   .collapsible-body {
@@ -150,17 +157,21 @@
     opacity: 0;
     transition: opacity 0.2s ease;
   }
-}
 
-.reader-mode:hover {
-  width: 240px !important;
+  &:hover {
+    width: 260px !important;
 
-  .collapsible-body {
-    height: auto;
-  }
+    .collapsible-body {
+      height: auto;
 
-  span {
-    opacity: 1;
+      li a i.material-icons {
+        margin: auto 5px auto 0;
+      }
+    }
+
+    span {
+      opacity: 1;
+    }
   }
 }
 

app/Resources/static/themes/material/css/cards.scss

@@ -114,20 +114,6 @@ main {
     }
   }
 
-  .card-entry-labels li,
-  .card-tag-labels li {
-    margin: 10px 10px 10px auto;
-    padding: 5px 12px 5px 16px !important;
-    background-color: $blueAccentColor;
-    border-radius: 0 3px 3px 0;
-    color: #fff;
-    cursor: default;
-    max-height: 2em;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
   .card-image {
     height: 10em;
   }
@@ -156,6 +142,20 @@ a.original {
   display: block;
 }
 
+.card-entry-labels li,
+.card-tag-labels li {
+  margin: 10px 10px 10px auto;
+  padding: 5px 12px 5px 16px !important;
+  background-color: $blueAccentColor;
+  border-radius: 0 3px 3px 0;
+  color: #fff;
+  cursor: default;
+  max-height: 2em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .card-entry-tags a,
 .card-entry-labels a,
 .card-tag-labels a,

app/Resources/static/themes/material/css/icons.scss

@@ -111,7 +111,7 @@
 a.icon-image {
   background-repeat: no-repeat;
   padding-right: 0.4em !important;
-  padding-left: 1em !important;
+  padding-left: 0 !important;
   margin-left: 25px;
 
   &::before {
@@ -120,7 +120,7 @@ a.icon-image {
     width: 24px;
     height: 24px;
     float: left;
-    margin: 0 6px 0 0;
+    margin: 7px 1.5px 0 0;
   }
 
   &.carrot::before {

app/Resources/static/themes/material/css/sidenav.scss

@@ -10,7 +10,7 @@
   }
 
   a {
-    margin: 0 1rem;
+    margin: 0 auto;
   }
 
   &.fixed a {

src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entry.html.twig

@@ -252,7 +252,7 @@
                 <li id="list">
                     {% for tag in entry.tags %}
                         <div class="chip">
-                        <a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{ tag.label }}</a> <a href="{{ path('remove_tag', { 'entry': entry.id, 'tag': tag.id }) }}"><i class="material-icons">delete</i></a>
+                        <a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{ tag.label }}</a> <a href="{{ path('remove_tag', { 'entry': entry.id, 'tag': tag.id }) }}"><i class="material-icons vertical-align-middle">delete</i></a>
                         </div>
                     {% endfor %}
                 </li>