Card actions styled at the bottom

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

@@ -100,7 +100,7 @@ main {
   }
 
   .card-action {
-    padding: 10px 5px 10px 15px;
+    padding: 10px 10px 10px 15px;
 
     ul.links {
       margin: 0;
@@ -117,8 +117,9 @@ main {
       color: #fff;
     }
 
-    ul.tools li a.tool {
-      margin-right: 5px !important;
+    .tool {
+      display: flex;
+      margin-right: 0 !important;
     }
 
     @include mixin-reading-time;
@@ -327,3 +328,8 @@ a.original:not(.waves-effect) {
   display: grid;
   gap: 20px;
 }
+
+.tools {
+  display: flex;
+  gap: 10px;
+}

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

@@ -186,15 +186,6 @@
   }
 }
 
-@media screen and (max-width: 310px),
-  screen and (min-width: 601px) and (max-width: 660px),
-  screen and (min-width: 993px) and (max-width: 1050px),
-  screen and (min-width: 1201px) and (max-width: 1250px) {
-  .card .card-action .reading-time .card-created-at {
-    display: none;
-  }
-}
-
 @media only print {
   body {
     display: block;

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

@@ -9,9 +9,13 @@
 
     <ul class="tools right">
         <li>
-            <a title="{{ 'entry.list.toogle_as_read'|trans }}" class="tool grey-text" href="{{ path('archive_entry', { 'id': entry.id }) }}"><i class="material-icons">{% if entry.isArchived == 0 %}done{% else %}unarchive{% endif %}</i></a>
-            <a title="{{ 'entry.list.toogle_as_star'|trans }}" class="tool grey-text" href="{{ path('star_entry', { 'id': entry.id }) }}"><i class="material-icons">{% if entry.isStarred == 0 %}star_border{% else %}star{% endif %}</i></a>
-            <a title="{{ 'entry.list.delete'|trans }}" onclick="return confirm('{{ 'entry.confirm.delete'|trans|escape('js') }}')" class="tool grey-text delete" href="{{ path('delete_entry', { 'id': entry.id }) }}"><i class="material-icons">delete</i></a>
+            <a title="{{ 'entry.list.toogle_as_read'|trans }}" class="tool grey-text" href="{{ path('archive_entry', { 'id': entry.id }) }}" data-action="archived" data-entry-id="{{ entry.id }}"><i class="material-icons">{% if entry.isArchived == 0 %}done{% else %}unarchive{% endif %}</i></a>
+        </li>
+        <li>
+            <a title="{{ 'entry.list.toogle_as_star'|trans }}" class="tool grey-text" href="{{ path('star_entry', { 'id': entry.id }) }}" data-action="star" data-entry-id="{{ entry.id }}"><i class="material-icons">{% if entry.isStarred == 0 %}star_border{% else %}star{% endif %}</i></a>
+        </li>
+        <li>
+            <a title="{{ 'entry.list.delete'|trans }}" data-action-confirm="{{ 'entry.confirm.delete'|trans }}" class="tool grey-text delete" href="{{ path('delete_entry', { 'id': entry.id }) }}" data-action="delete" data-entry-id="{{ entry.id }}"><i class="material-icons">delete</i></a>
         </li>
     </ul>
 </div>