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

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>`;
 	},

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;

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;

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;

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;

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 {

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 {

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;

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;