Entry view tags styled udpated

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

@@ -133,18 +133,20 @@
       }
 
       .tags {
-        float: right;
+        display: flex;
-        margin: 5px 15px 10px;
+        margin: 0;
+        align-items: center;
+        gap: 5px;
       }
     }
 
     .chip {
-      background-color: #9e9e9e;
+      display: flex;
-      padding: 0 15px 0 10px;
+      margin: 0;
-      margin: auto 2px;
+      padding: 0;
-      border-radius: 6px;
       height: 18px;
       line-height: 18px;
+      background-color: transparent;
 
       a,
       i {
@@ -152,12 +154,23 @@
       }
 
       i.material-icons {
-        float: right;
         font-size: 16px;
         line-height: 18px;
-        padding-left: 8px;
       }
     }
+
+    .chip-label {
+        padding-left: 10px;
+        padding-right: 5px;
+        background-color: #9e9e9e;
+        border-radius: 6px 0 0 6px;
+    }
+
+    .chip-action {
+      padding: 0 5px;
+      background-color: #868686;
+      border-radius: 0 6px 6px 0;
+    }
   }
 }
 

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

@@ -81,10 +81,6 @@
     color: #dfdfdf !important;
   }
 
-  #article .chip {
-    background-color: #373737;
-  }
-
   .side-nav li.active {
     background-color: #2f2f2f;
   }

src/Wallabag/CoreBundle/Resources/views/Entry/_tags.html.twig

@@ -2,9 +2,9 @@
     <ul class="tags{{ listClass|default("") }}">
         {% for tag in tags %}
             <li class="chip" title="{{ tag.label }}">
-                <a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{ tag.label }}</a>
+                <a class="chip-label" href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{ tag.label }}</a>
                 {% if withRemove is defined and withRemove == true %}
-                    <a href="{{ path('remove_tag', {'entry': entryId, 'tag': tag.id}) }}" onclick="return confirm('{{ 'entry.confirm.delete_tag'|trans|escape('js') }}')">
+                    <a class="chip-action" href="{{ path('remove_tag', {'entry': entryId, 'tag': tag.id}) }}" onclick="return confirm('{{ 'entry.confirm.delete_tag'|trans|escape('js') }}')">
                         <i class="material-icons vertical-align-middle">delete</i>
                     </a>
                 {% endif %}