tags display: instead of limiting to 5 tags, limit by container width %

9 files changed, 87 insertions, 3 deletions

diff --git a/js/Article.js b/js/Article.js
index a3a75ba21..703b634d5 100644
--- a/js/Article.js
+++ b/js/Article.js
@@ -146,10 +146,8 @@ const Article = {
 			</div>`;
 	},
 	renderTags: function (id, tags) {
-		const tags_short = tags.length > 5 ? tags.slice(0, 5) : tags;
-
 		return `<span class="tags" title="${tags.join(", ")}" data-tags-for="${id}">
-			${tags_short.length > 0 ? tags_short.map((tag) => `
+			${tags.length > 0 ? tags.map((tag) => `
 				<a href="#" onclick="Feeds.open({feed: '${tag.trim()}'})" class="tag">${tag}</a>`
 			).join(", ") : `${__("no tags")}`}</span>`;
 	},
diff --git a/themes/compact.css b/themes/compact.css
index 952187e63..16cf6b5aa 100644
--- a/themes/compact.css
+++ b/themes/compact.css
@@ -73,6 +73,12 @@ body.ttrss_main .post .header .title {
   font-family: system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
   word-break: break-all;
 }
+body.ttrss_main .post .header .tags {
+  max-width: 25%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 body.ttrss_main .post div.content {
   padding: 10px;
   font-size: 16px;
@@ -1293,6 +1299,12 @@ body.ttrss_utility hr {
   font-size: 11px;
   font-weight: normal;
 }
+.cdm .header .tags {
+  max-width: 50%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 .cdm .footer {
   height: 30px;
   padding-left: 5px;
diff --git a/themes/compact_night.css b/themes/compact_night.css
index 7342b5710..8da1cd32a 100644
--- a/themes/compact_night.css
+++ b/themes/compact_night.css
@@ -73,6 +73,12 @@ body.ttrss_main .post .header .title {
   font-family: system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
   word-break: break-all;
 }
+body.ttrss_main .post .header .tags {
+  max-width: 25%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 body.ttrss_main .post div.content {
   padding: 10px;
   font-size: 16px;
@@ -1293,6 +1299,12 @@ body.ttrss_utility hr {
   font-size: 11px;
   font-weight: normal;
 }
+.cdm .header .tags {
+  max-width: 50%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 .cdm .footer {
   height: 30px;
   padding-left: 5px;
diff --git a/themes/light-high-contrast.css b/themes/light-high-contrast.css
index 0d7fcbaa0..ffd952f9f 100644
--- a/themes/light-high-contrast.css
+++ b/themes/light-high-contrast.css
@@ -73,6 +73,12 @@ body.ttrss_main .post .header .title {
   font-family: system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
   word-break: break-all;
 }
+body.ttrss_main .post .header .tags {
+  max-width: 25%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 body.ttrss_main .post div.content {
   padding: 10px;
   font-size: 16px;
@@ -1293,6 +1299,12 @@ body.ttrss_utility hr {
   font-size: 11px;
   font-weight: normal;
 }
+.cdm .header .tags {
+  max-width: 50%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 .cdm .footer {
   height: 30px;
   padding-left: 5px;
diff --git a/themes/light.css b/themes/light.css
index f0218f659..cf2358c50 100644
--- a/themes/light.css
+++ b/themes/light.css
@@ -73,6 +73,12 @@ body.ttrss_main .post .header .title {
   font-family: system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
   word-break: break-all;
 }
+body.ttrss_main .post .header .tags {
+  max-width: 25%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 body.ttrss_main .post div.content {
   padding: 10px;
   font-size: 16px;
@@ -1293,6 +1299,12 @@ body.ttrss_utility hr {
   font-size: 11px;
   font-weight: normal;
 }
+.cdm .header .tags {
+  max-width: 50%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 .cdm .footer {
   height: 30px;
   padding-left: 5px;
diff --git a/themes/light/cdm.less b/themes/light/cdm.less
index 05ba3c99a..bf677decf 100644
--- a/themes/light/cdm.less
+++ b/themes/light/cdm.less
@@ -79,6 +79,13 @@
 			font-size : @font-size-small;
 			font-weight : normal;
 		}
+
+		.tags {
+			max-width : 50%;
+			overflow : hidden;
+			white-space : nowrap;
+			text-overflow : ellipsis;
+		}
 	}
 
 	.footer {
diff --git a/themes/light/tt-rss.less b/themes/light/tt-rss.less
index 1f1242f6b..3896665c8 100644
--- a/themes/light/tt-rss.less
+++ b/themes/light/tt-rss.less
@@ -56,6 +56,13 @@ body.ttrss_main {
 				font-family : @fonts-ui;
 				word-break : break-all;
 			}
+
+			.tags {
+				max-width : 25%;
+				overflow : hidden;
+				white-space : nowrap;
+				text-overflow : ellipsis;
+			}
 		}
 
 		div.content {
diff --git a/themes/night.css b/themes/night.css
index 4c6788c2e..b1d0f61ce 100644
--- a/themes/night.css
+++ b/themes/night.css
@@ -74,6 +74,12 @@ body.ttrss_main .post .header .title {
   font-family: system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
   word-break: break-all;
 }
+body.ttrss_main .post .header .tags {
+  max-width: 25%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 body.ttrss_main .post div.content {
   padding: 10px;
   font-size: 16px;
@@ -1294,6 +1300,12 @@ body.ttrss_utility hr {
   font-size: 11px;
   font-weight: normal;
 }
+.cdm .header .tags {
+  max-width: 50%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 .cdm .footer {
   height: 30px;
   padding-left: 5px;
diff --git a/themes/night_blue.css b/themes/night_blue.css
index 90b365473..f77f04efb 100644
--- a/themes/night_blue.css
+++ b/themes/night_blue.css
@@ -74,6 +74,12 @@ body.ttrss_main .post .header .title {
   font-family: system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
   word-break: break-all;
 }
+body.ttrss_main .post .header .tags {
+  max-width: 25%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 body.ttrss_main .post div.content {
   padding: 10px;
   font-size: 16px;
@@ -1294,6 +1300,12 @@ body.ttrss_utility hr {
   font-size: 11px;
   font-weight: normal;
 }
+.cdm .header .tags {
+  max-width: 50%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 .cdm .footer {
   height: 30px;
   padding-left: 5px;