Merge pull request #4136 from wallabag/improve-tags-list

Improved tags list

2 files changed, 9 insertions, 19 deletions

diff --git a/app/Resources/static/themes/material/css/cards.scss b/app/Resources/static/themes/material/css/cards.scss
index 9ae1be82..80c9f253 100644
--- a/app/Resources/static/themes/material/css/cards.scss
+++ b/app/Resources/static/themes/material/css/cards.scss
@@ -173,7 +173,6 @@ a.original:not(.waves-effect) {
 
 .card-tag-labels li {
   display: flex;
-  justify-content: space-between;
 }
 
 .card-entry-tags a,
@@ -186,15 +185,12 @@ a.original:not(.waves-effect) {
   color: #fff;
 }
 
-.card-tag-labels a {
-  height: 100%;
-  align-items: center;
-}
-
 .card-tag-link {
-  display: flex;
-  min-width: 100px;
-  flex-grow: 1;
+  width: calc(100% - 48px);
+  line-height: 1.3;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
 .card-tag-form {
@@ -205,22 +201,20 @@ a.original:not(.waves-effect) {
 
 .card-tag-form input {
   margin-bottom: 0;
-  height: 2rem;
+  height: 1.8rem;
 }
 
-.card-tag-rss {
+.card-tag-icon {
   display: flex;
 }
 
 .card-tag-labels {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 }
 
 .card-tag-labels li {
   margin: 10px;
-  flex-basis: 19%;
-  flex-grow: 1;
   align-items: center;
 }
 
diff --git a/app/Resources/static/themes/material/css/media_queries.scss b/app/Resources/static/themes/material/css/media_queries.scss
index 4242ead2..b50dd559 100644
--- a/app/Resources/static/themes/material/css/media_queries.scss
+++ b/app/Resources/static/themes/material/css/media_queries.scss
@@ -12,10 +12,6 @@
   .pagination {
     margin-left: auto;
   }
-
-  .card-tag-labels li {
-    max-width: 50%;
-  }
 }
 
 @media screen and (min-width: 993px) {