fix rendering of articles with titles containing extremely long words

8 files changed, 21 insertions, 0 deletions

diff --git a/themes/compact.css b/themes/compact.css
index 76a532b15..c58d4c419 100644
--- a/themes/compact.css
+++ b/themes/compact.css
@@ -57,6 +57,7 @@ body.ttrss_main .post .header .comments {
 }
 body.ttrss_main .post .header .date {
   white-space: nowrap;
+  margin-left: 4px;
 }
 body.ttrss_main .post .header img,
 body.ttrss_main .post .header i.material-icons {
@@ -70,6 +71,7 @@ body.ttrss_main .post .header .title {
   font-weight: 600;
   text-rendering: optimizelegibility;
   font-family: system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  word-break: break-all;
 }
 body.ttrss_main .post div.content {
   padding: 10px;
@@ -1339,6 +1341,7 @@ body.ttrss_utility hr {
 }
 .cdm.expanded .titleWrap {
   white-space: normal;
+  word-break: break-all;
 }
 .cdm.expanded .footer {
   border: 0px solid #ddd;
diff --git a/themes/compact_night.css b/themes/compact_night.css
index 16097ec6e..761294d86 100644
--- a/themes/compact_night.css
+++ b/themes/compact_night.css
@@ -57,6 +57,7 @@ body.ttrss_main .post .header .comments {
 }
 body.ttrss_main .post .header .date {
   white-space: nowrap;
+  margin-left: 4px;
 }
 body.ttrss_main .post .header img,
 body.ttrss_main .post .header i.material-icons {
@@ -70,6 +71,7 @@ body.ttrss_main .post .header .title {
   font-weight: 600;
   text-rendering: optimizelegibility;
   font-family: system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  word-break: break-all;
 }
 body.ttrss_main .post div.content {
   padding: 10px;
@@ -1339,6 +1341,7 @@ body.ttrss_utility hr {
 }
 .cdm.expanded .titleWrap {
   white-space: normal;
+  word-break: break-all;
 }
 .cdm.expanded .footer {
   border: 0px solid #222;
diff --git a/themes/light-high-contrast.css b/themes/light-high-contrast.css
index 8f4729176..12fcb877d 100644
--- a/themes/light-high-contrast.css
+++ b/themes/light-high-contrast.css
@@ -57,6 +57,7 @@ body.ttrss_main .post .header .comments {
 }
 body.ttrss_main .post .header .date {
   white-space: nowrap;
+  margin-left: 4px;
 }
 body.ttrss_main .post .header img,
 body.ttrss_main .post .header i.material-icons {
@@ -70,6 +71,7 @@ body.ttrss_main .post .header .title {
   font-weight: 600;
   text-rendering: optimizelegibility;
   font-family: system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  word-break: break-all;
 }
 body.ttrss_main .post div.content {
   padding: 10px;
@@ -1339,6 +1341,7 @@ body.ttrss_utility hr {
 }
 .cdm.expanded .titleWrap {
   white-space: normal;
+  word-break: break-all;
 }
 .cdm.expanded .footer {
   border: 0px solid #ddd;
diff --git a/themes/light.css b/themes/light.css
index bfd221eef..82a84c604 100644
--- a/themes/light.css
+++ b/themes/light.css
@@ -57,6 +57,7 @@ body.ttrss_main .post .header .comments {
 }
 body.ttrss_main .post .header .date {
   white-space: nowrap;
+  margin-left: 4px;
 }
 body.ttrss_main .post .header img,
 body.ttrss_main .post .header i.material-icons {
@@ -70,6 +71,7 @@ body.ttrss_main .post .header .title {
   font-weight: 600;
   text-rendering: optimizelegibility;
   font-family: system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  word-break: break-all;
 }
 body.ttrss_main .post div.content {
   padding: 10px;
@@ -1339,6 +1341,7 @@ body.ttrss_utility hr {
 }
 .cdm.expanded .titleWrap {
   white-space: normal;
+  word-break: break-all;
 }
 .cdm.expanded .footer {
   border: 0px solid #ddd;
diff --git a/themes/light/cdm.less b/themes/light/cdm.less
index 6bb3378c1..05ba3c99a 100644
--- a/themes/light/cdm.less
+++ b/themes/light/cdm.less
@@ -143,6 +143,7 @@
 
 		.titleWrap {
 			white-space : normal;
+			word-break : break-all;
 		}
 
 		.footer {
diff --git a/themes/light/tt-rss.less b/themes/light/tt-rss.less
index 6a1f45d28..1f1242f6b 100644
--- a/themes/light/tt-rss.less
+++ b/themes/light/tt-rss.less
@@ -39,6 +39,7 @@ body.ttrss_main {
 
 			.date {
 				white-space : nowrap;
+				margin-left : 4px;
 			}
 
 			img, i.material-icons {
@@ -53,6 +54,7 @@ body.ttrss_main {
 				font-weight : 600;
 				text-rendering: optimizelegibility;
 				font-family : @fonts-ui;
+				word-break : break-all;
 			}
 		}
 
diff --git a/themes/night.css b/themes/night.css
index 18c370ee4..0bb02e2eb 100644
--- a/themes/night.css
+++ b/themes/night.css
@@ -58,6 +58,7 @@ body.ttrss_main .post .header .comments {
 }
 body.ttrss_main .post .header .date {
   white-space: nowrap;
+  margin-left: 4px;
 }
 body.ttrss_main .post .header img,
 body.ttrss_main .post .header i.material-icons {
@@ -71,6 +72,7 @@ body.ttrss_main .post .header .title {
   font-weight: 600;
   text-rendering: optimizelegibility;
   font-family: system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  word-break: break-all;
 }
 body.ttrss_main .post div.content {
   padding: 10px;
@@ -1340,6 +1342,7 @@ body.ttrss_utility hr {
 }
 .cdm.expanded .titleWrap {
   white-space: normal;
+  word-break: break-all;
 }
 .cdm.expanded .footer {
   border: 0px solid #222;
diff --git a/themes/night_blue.css b/themes/night_blue.css
index 22ba4fd17..5f9f6b0e6 100644
--- a/themes/night_blue.css
+++ b/themes/night_blue.css
@@ -58,6 +58,7 @@ body.ttrss_main .post .header .comments {
 }
 body.ttrss_main .post .header .date {
   white-space: nowrap;
+  margin-left: 4px;
 }
 body.ttrss_main .post .header img,
 body.ttrss_main .post .header i.material-icons {
@@ -71,6 +72,7 @@ body.ttrss_main .post .header .title {
   font-weight: 600;
   text-rendering: optimizelegibility;
   font-family: system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  word-break: break-all;
 }
 body.ttrss_main .post div.content {
   padding: 10px;
@@ -1340,6 +1342,7 @@ body.ttrss_utility hr {
 }
 .cdm.expanded .titleWrap {
   white-space: normal;
+  word-break: break-all;
 }
 .cdm.expanded .footer {
   border: 0px solid #222;