Fix: overflow expanding title in entry header (#6373)

* change HTML structure

* CSS

25 files changed, 188 insertions, 124 deletions

diff --git a/app/views/helpers/index/normal/entry_header.phtml b/app/views/helpers/index/normal/entry_header.phtml
index f550dfa21..ebac7f46b 100644
--- a/app/views/helpers/index/normal/entry_header.phtml
+++ b/app/views/helpers/index/normal/entry_header.phtml
@@ -51,8 +51,8 @@
 		endif;
 	?></li><?php
 	endif; ?>
-
-	<li class="item title<?= (($topline_thumbnail !== 'none') || $topline_summary) ? ' multiline' : '' ?>" dir="auto"><a target="_blank" rel="noreferrer" href="<?= $this->entry->link() ?>" class="item-element"><?= $this->entry->title() ?><?php
+	<li class="item titleAuthorSummaryDate">
+	<span class="item-element title<?= (($topline_thumbnail !== 'none') || $topline_summary) ? ' multiline' : '' ?>" dir="auto"><a target="_blank" rel="noreferrer" href="<?= $this->entry->link() ?>"><?= $this->entry->title() ?><?php
 		if ($topline_display_authors):
 			?><span class="author"><?php
 			$authors = $this->entry->authors();
@@ -65,11 +65,13 @@
 			}
 			?></span><?php
 		endif;
-		if ($topline_summary):
-			?><div class="summary"><?= trim(mb_substr(strip_tags($this->entry->content(false)), 0, 500, 'UTF-8')) ?></div><?php
-		endif;
-	?></a></li>
-	<?php if ($topline_date) { ?><li class="item date"><time datetime="<?= $this->entry->machineReadableDate() ?>" class="item-element"><?= $this->entry->date() ?></time>&nbsp;</li><?php } ?>
+	?></a></span>
+	<?php
+	if ($topline_summary):
+		?><div class="summary"><?= trim(mb_substr(strip_tags($this->entry->content(false)), 0, 500, 'UTF-8')) ?></div><?php
+	endif; ?>
+	<?php if ($topline_date) { ?><span class="item-element date"><time datetime="<?= $this->entry->machineReadableDate() ?>"><?= $this->entry->date() ?></time>&nbsp;</span><?php } ?>
+	</li>
 	<?php if ($topline_link) { ?><li class="item link"><a target="_blank" rel="noreferrer" href="<?= $this->entry->link() ?>" class="item-element" title="<?=
 		_t('conf.shortcut.see_on_website') ?>"><?= _i('link') ?></a></li><?php } ?>
 </ul>
diff --git a/p/scripts/main.js b/p/scripts/main.js
index 3d88a79e5..2ed9bc710 100644
--- a/p/scripts/main.js
+++ b/p/scripts/main.js
@@ -1081,7 +1081,7 @@ function init_stream(stream) {
 			return true;
 		}
 
-		el = ev.target.closest('.item.title > a');
+		el = ev.target.closest('.item .title > a');
 		if (el) {	// Allow default control/command-click behaviour such as open in background-tab
 			return ev.ctrlKey || ev.metaKey;
 		}
@@ -1189,7 +1189,7 @@ function init_stream(stream) {
 			return;
 		}
 
-		let el = ev.target.closest('.item.title > a');
+		let el = ev.target.closest('.item .title > a');
 		if (el) {
 			if (ev.which == 1) {
 				if (ev.ctrlKey) {	// Control+click
diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index 83680be28..1eb45b695 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -747,11 +747,11 @@ kbd {
 	background: var(--background-color-dark);
 }
 
-.flux.not_read:not(.current):hover .item.title {
-	background: inherit;
+.flux.not_read:not(.current):hover .item .title {
+	background: var(--background-color-hover);
 }
 
-.flux:not(.current):hover .item.title {
+.flux:not(.current):hover .item .title {
 	background: var(--background-color-hover);
 }
 
@@ -759,11 +759,11 @@ kbd {
 	background: var(--background-color-hover);
 }
 
-.flux .flux_header .item.title a {
+.flux .flux_header .item .title a {
 	color: var(--font-color-light);
 }
 
-.flux .flux_header .item.title .author {
+.flux .flux_header .item .title .author {
 	color: var(--font-color-dark);
 }
 
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index 8f064ca86..5d9c13d63 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -747,11 +747,11 @@ kbd {
 	background: var(--background-color-dark);
 }
 
-.flux.not_read:not(.current):hover .item.title {
-	background: inherit;
+.flux.not_read:not(.current):hover .item .title {
+	background: var(--background-color-hover);
 }
 
-.flux:not(.current):hover .item.title {
+.flux:not(.current):hover .item .title {
 	background: var(--background-color-hover);
 }
 
@@ -759,11 +759,11 @@ kbd {
 	background: var(--background-color-hover);
 }
 
-.flux .flux_header .item.title a {
+.flux .flux_header .item .title a {
 	color: var(--font-color-light);
 }
 
-.flux .flux_header .item.title .author {
+.flux .flux_header .item .title .author {
 	color: var(--font-color-dark);
 }
 
diff --git a/p/themes/Ansum/_list-view.scss b/p/themes/Ansum/_list-view.scss
index ed24e8675..3de5b3f50 100644
--- a/p/themes/Ansum/_list-view.scss
+++ b/p/themes/Ansum/_list-view.scss
@@ -15,7 +15,7 @@
 		&:hover {
 			background: variables.$grey-lighter;
 
-			&:not(.current):hover .item.title {
+			&:not(.current):hover .item .title {
 				background: variables.$grey-lighter;
 			}
 		}
@@ -33,13 +33,13 @@
 	&.not_read:not(.current) {
 		background: variables.$unread-bg;
 
-		&:hover .item.title {
+		&:hover .item .title {
 			background: variables.$unread-bg;
 		}
 	}
 
 	&.not_read {
-		.item.title {
+		.item .title {
 			a {
 				color: variables.$unread-font-color;
 			}
@@ -65,7 +65,7 @@
 	&.favorite:not(.current) {
 		background: variables.$fav-light;
 
-		&:hover .item.title {
+		&:hover .item .title {
 			background: variables.$fav-light;
 		}
 	}
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index f7bc0ab6c..fdd9b9653 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -989,7 +989,7 @@ main.prompt {
 .flux .flux_header:hover {
 	background: #fcfaf8;
 }
-.flux .flux_header:hover:not(.current):hover .item.title {
+.flux .flux_header:hover:not(.current):hover .item .title {
 	background: #fcfaf8;
 }
 .flux.current {
@@ -1002,10 +1002,10 @@ main.prompt {
 .flux.not_read:not(.current) {
 	background: #f2f6f8;
 }
-.flux.not_read:not(.current):hover .item.title {
+.flux.not_read:not(.current):hover .item .title {
 	background: #f2f6f8;
 }
-.flux.not_read .item.title a {
+.flux.not_read .item .title a {
 	color: #161a38;
 }
 .flux.not_read .item.website a {
@@ -1021,7 +1021,7 @@ main.prompt {
 .flux.favorite:not(.current) {
 	background: #fff6da;
 }
-.flux.favorite:not(.current):hover .item.title {
+.flux.favorite:not(.current):hover .item .title {
 	background: #fff6da;
 }
 .flux .website a {
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index 919455f62..19c3e1551 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -989,7 +989,7 @@ main.prompt {
 .flux .flux_header:hover {
 	background: #fcfaf8;
 }
-.flux .flux_header:hover:not(.current):hover .item.title {
+.flux .flux_header:hover:not(.current):hover .item .title {
 	background: #fcfaf8;
 }
 .flux.current {
@@ -1002,10 +1002,10 @@ main.prompt {
 .flux.not_read:not(.current) {
 	background: #f2f6f8;
 }
-.flux.not_read:not(.current):hover .item.title {
+.flux.not_read:not(.current):hover .item .title {
 	background: #f2f6f8;
 }
-.flux.not_read .item.title a {
+.flux.not_read .item .title a {
 	color: #161a38;
 }
 .flux.not_read .item.website a {
@@ -1021,7 +1021,7 @@ main.prompt {
 .flux.favorite:not(.current) {
 	background: #fff6da;
 }
-.flux.favorite:not(.current):hover .item.title {
+.flux.favorite:not(.current):hover .item .title {
 	background: #fff6da;
 }
 .flux .website a {
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index 618d84ad9..704c6b2a1 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -452,7 +452,7 @@ button.as-link[disabled] {
 	background-color: var(--dark-background-color1);
 }
 
-.flux .flux_header .item.title a {
+.flux .flux_header .item .title a {
 	color: var(--dark-font-color8);
 }
 
@@ -460,7 +460,7 @@ button.as-link[disabled] {
 	color: var(--dark-font-color6);
 }
 
-.flux:not(.current):hover .item.title {
+.flux:not(.current):hover .item .title {
 	background-color: var(--dark-background-color1);
 }
 
diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css
index f1d52b14c..1d102e1d6 100644
--- a/p/themes/Dark/dark.rtl.css
+++ b/p/themes/Dark/dark.rtl.css
@@ -452,7 +452,7 @@ button.as-link[disabled] {
 	background-color: var(--dark-background-color1);
 }
 
-.flux .flux_header .item.title a {
+.flux .flux_header .item .title a {
 	color: var(--dark-font-color8);
 }
 
@@ -460,7 +460,7 @@ button.as-link[disabled] {
 	color: var(--dark-font-color6);
 }
 
-.flux:not(.current):hover .item.title {
+.flux:not(.current):hover .item .title {
 	background-color: var(--dark-background-color1);
 }
 
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index e88e6e55f..ec59e90b1 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -693,6 +693,7 @@ th {
 	border-left: 2px solid #ecf0f1;
 }
 
+.flux:not(.current):hover .flux_header .title,
 .flux .flux_header:hover {
 	background: #fff;
 }
diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css
index 3e2d91d2b..c81ec0bbe 100644
--- a/p/themes/Flat/flat.rtl.css
+++ b/p/themes/Flat/flat.rtl.css
@@ -693,6 +693,7 @@ th {
 	border-right: 2px solid #ecf0f1;
 }
 
+.flux:not(.current):hover .flux_header .title,
 .flux .flux_header:hover {
 	background: #fff;
 }
diff --git a/p/themes/Mapco/_list-view.scss b/p/themes/Mapco/_list-view.scss
index 7d0fb87f4..40cc9d4a8 100644
--- a/p/themes/Mapco/_list-view.scss
+++ b/p/themes/Mapco/_list-view.scss
@@ -14,7 +14,7 @@
 		&:hover {
 			background: variables.$grey-lighter;
 
-			&:not(.current):hover .item.title {
+			&:not(.current):hover .item .title {
 				background: variables.$grey-lighter;
 			}
 		}
@@ -28,13 +28,13 @@
 	&.not_read:not(.current) {
 		background: variables.$unread-bg;
 
-		&:hover .item.title {
+		&:hover .item .title {
 			background: variables.$unread-bg;
 		}
 	}
 
 	&.not_read {
-		.item.title {
+		.item .title {
 			a {
 				color: variables.$unread-font-color;
 			}
@@ -61,7 +61,7 @@
 	&.favorite:not(.current) {
 		background: variables.$fav-light;
 
-		&:hover .item.title {
+		&:hover .item .title {
 			background: variables.$fav-light;
 		}
 	}
diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index 76f807587..1d79a49b4 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -1007,7 +1007,7 @@ main.prompt {
 .flux .flux_header:hover {
 	background: #f9fafb;
 }
-.flux .flux_header:hover:not(.current):hover .item.title {
+.flux .flux_header:hover:not(.current):hover .item .title {
 	background: #f9fafb;
 }
 .flux.current {
@@ -1017,10 +1017,10 @@ main.prompt {
 .flux.not_read:not(.current) {
 	background: #f2f6f8;
 }
-.flux.not_read:not(.current):hover .item.title {
+.flux.not_read:not(.current):hover .item .title {
 	background: #f2f6f8;
 }
-.flux.not_read .item.title a {
+.flux.not_read .item .title a {
 	color: #36c;
 }
 .flux.not_read .item.website a {
@@ -1036,7 +1036,7 @@ main.prompt {
 .flux.favorite:not(.current) {
 	background: #fff6da;
 }
-.flux.favorite:not(.current):hover .item.title {
+.flux.favorite:not(.current):hover .item .title {
 	background: #fff6da;
 }
 .flux .website a {
diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index 1c55b037a..c38fba480 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -1007,7 +1007,7 @@ main.prompt {
 .flux .flux_header:hover {
 	background: #f9fafb;
 }
-.flux .flux_header:hover:not(.current):hover .item.title {
+.flux .flux_header:hover:not(.current):hover .item .title {
 	background: #f9fafb;
 }
 .flux.current {
@@ -1017,10 +1017,10 @@ main.prompt {
 .flux.not_read:not(.current) {
 	background: #f2f6f8;
 }
-.flux.not_read:not(.current):hover .item.title {
+.flux.not_read:not(.current):hover .item .title {
 	background: #f2f6f8;
 }
-.flux.not_read .item.title a {
+.flux.not_read .item .title a {
 	color: #36c;
 }
 .flux.not_read .item.website a {
@@ -1036,7 +1036,7 @@ main.prompt {
 .flux.favorite:not(.current) {
 	background: #fff6da;
 }
-.flux.favorite:not(.current):hover .item.title {
+.flux.favorite:not(.current):hover .item .title {
 	background: #fff6da;
 }
 .flux .website a {
diff --git a/p/themes/Nord/nord.css b/p/themes/Nord/nord.css
index 92c29ce0e..c87026ae2 100644
--- a/p/themes/Nord/nord.css
+++ b/p/themes/Nord/nord.css
@@ -809,23 +809,23 @@ li.item.active {
 	background: var(--accent-bg);
 }
 
-.flux:not(.current):hover .item.title {
+.flux:not(.current):hover .item .title {
 	background: var(--accent-bg);
 	transition: .3s;
 }
 
-.flux .flux_header .item.title a {
+.flux .flux_header .item .title a {
 	color: var(--text-default);
 }
 
-.flux .flux_header .item.title .summary {
+.flux .flux_header .item .title .summary {
 	color: var(--text-accent);
 	font-size: 0.8rem;
 	font-style: italic;
 	opacity: 0.8;
 }
 
-.flux .flux_header .item.title .author {
+.flux .flux_header .item .title .author {
 	color: var(--text-accent);
 	opacity: 0.8;
 }
diff --git a/p/themes/Nord/nord.rtl.css b/p/themes/Nord/nord.rtl.css
index 1525f28d3..a3c43b82d 100644
--- a/p/themes/Nord/nord.rtl.css
+++ b/p/themes/Nord/nord.rtl.css
@@ -809,23 +809,23 @@ li.item.active {
 	background: var(--accent-bg);
 }
 
-.flux:not(.current):hover .item.title {
+.flux:not(.current):hover .item .title {
 	background: var(--accent-bg);
 	transition: .3s;
 }
 
-.flux .flux_header .item.title a {
+.flux .flux_header .item .title a {
 	color: var(--text-default);
 }
 
-.flux .flux_header .item.title .summary {
+.flux .flux_header .item .title .summary {
 	color: var(--text-accent);
 	font-size: 0.8rem;
 	font-style: italic;
 	opacity: 0.8;
 }
 
-.flux .flux_header .item.title .author {
+.flux .flux_header .item .title .author {
 	color: var(--text-accent);
 	opacity: 0.8;
 }
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index 6ff78f754..0295d09ac 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -837,6 +837,7 @@ a:hover .icon {
 }
 
 .flux .flux_header:not(.current):hover .flux_header,
+.flux:not(.current):hover .flux_header .title,
 .flux.current .flux_header {
 	background-color: var(--background-color-hover);
 }
@@ -849,6 +850,7 @@ a:hover .icon {
 	background-color: var(--unread-article-background-color);
 }
 
+.flux.not_read:not(.current):hover .flux_header .title,
 .flux.not_read:not(.current):hover .flux_header,
 .flux.not_read.current .flux_header {
 	background-color: var(--unread-article-background-color-hover);
@@ -862,6 +864,7 @@ a:hover .icon {
 	background-color: var(--favorite-article-background-color);
 }
 
+.flux.favorite:not(.current):hover .flux_header .title,
 .flux.favorite:not(.current):hover .flux_header,
 .flux.favorite.current .flux_header {
 	background-color: var(--favorite-article-background-color-hover);
@@ -873,7 +876,7 @@ a:hover .icon {
 	cursor: pointer;
 }
 
-.flux .item.date {
+.flux .item .date {
 	color: var(--font-color-grey);
 	font-size: 0.7rem;
 }
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index 79bfeda06..6eb028622 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -837,6 +837,7 @@ a:hover .icon {
 }
 
 .flux .flux_header:not(.current):hover .flux_header,
+.flux:not(.current):hover .flux_header .title,
 .flux.current .flux_header {
 	background-color: var(--background-color-hover);
 }
@@ -849,6 +850,7 @@ a:hover .icon {
 	background-color: var(--unread-article-background-color);
 }
 
+.flux.not_read:not(.current):hover .flux_header .title,
 .flux.not_read:not(.current):hover .flux_header,
 .flux.not_read.current .flux_header {
 	background-color: var(--unread-article-background-color-hover);
@@ -862,6 +864,7 @@ a:hover .icon {
 	background-color: var(--favorite-article-background-color);
 }
 
+.flux.favorite:not(.current):hover .flux_header .title,
 .flux.favorite:not(.current):hover .flux_header,
 .flux.favorite.current .flux_header {
 	background-color: var(--favorite-article-background-color-hover);
@@ -873,7 +876,7 @@ a:hover .icon {
 	cursor: pointer;
 }
 
-.flux .item.date {
+.flux .item .date {
 	color: var(--font-color-grey);
 	font-size: 0.7rem;
 }
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index ce4ec6742..6d5a8f523 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -798,6 +798,7 @@ a.signin {
 }
 
 .flux .flux_header:hover,
+.flux:not(.current):hover .flux_header .title,
 .flux.current .flux_header {
 	background-color: var(--background-color-grey-hover);
 }
@@ -815,8 +816,8 @@ a.signin {
 	border-left: 2px solid var(--border-left-article-unread);
 }
 
-.flux .flux_header .item.title a,
-.flux.not_read:not(.current):hover .flux_header .item.title {
+.flux .flux_header .item .title a,
+.flux.not_read:not(.current):hover .flux_header .item .title {
 	color: var(--font-color-link-title);
 }
 
@@ -828,6 +829,7 @@ a.signin {
 	background-color: var(--background-color-favorite);
 }
 
+.flux.favorite:not(.current):hover .flux_header .title,
 .flux.favorite:not(.current) .flux_header:hover,
 .flux.favorite.current .flux_header {
 	background-color: var(--background-color-favorite-hover);
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index cb140f021..dca0c3295 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -798,6 +798,7 @@ a.signin {
 }
 
 .flux .flux_header:hover,
+.flux:not(.current):hover .flux_header .title,
 .flux.current .flux_header {
 	background-color: var(--background-color-grey-hover);
 }
@@ -815,8 +816,8 @@ a.signin {
 	border-right: 2px solid var(--border-left-article-unread);
 }
 
-.flux .flux_header .item.title a,
-.flux.not_read:not(.current):hover .flux_header .item.title {
+.flux .flux_header .item .title a,
+.flux.not_read:not(.current):hover .flux_header .item .title {
 	color: var(--font-color-link-title);
 }
 
@@ -828,6 +829,7 @@ a.signin {
 	background-color: var(--background-color-favorite);
 }
 
+.flux.favorite:not(.current):hover .flux_header .title,
 .flux.favorite:not(.current) .flux_header:hover,
 .flux.favorite.current .flux_header {
 	background-color: var(--background-color-favorite-hover);
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index 092cbd1ca..74ce77f0d 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -751,20 +751,20 @@ form th {
 .flux .current {
 	background-color: var(--color-background-hover);
 }
-.flux .flux_header:hover:not(.current):hover .item.title,
-.flux .current:not(.current):hover .item.title {
+.flux .flux_header:hover:not(.current):hover .item .title,
+.flux .current:not(.current):hover .item .title {
 	background-color: var(--color-background-hover);
 }
 .flux.favorite:not(.current) {
 	background-color: var(--color-background-stared);
 }
-.flux.favorite:not(.current):hover .item.title {
+.flux.favorite:not(.current):hover .item .title {
 	background-color: var(--color-background-stared);
 }
 .flux.not_read:not(.current) {
 	background-color: var(--color-background-unread);
 }
-.flux.not_read:not(.current):hover .item.title {
+.flux.not_read:not(.current):hover .item .title {
 	background-color: var(--color-background-unread);
 }
 .flux .item.date {
@@ -909,7 +909,7 @@ a.signin {
 }
 
 @media (max-width: 840px) {
-	body:not(.formLogin, .register) .header .item.title {
+	body:not(.formLogin, .register) .header .item .title {
 		display: none;
 	}
 	.form-group .group-name {
@@ -948,7 +948,7 @@ a.signin {
 		width: 35px;
 		text-align: center;
 	}
-	.flux:not(.current):hover .item.title {
+	.flux:not(.current):hover .item .title {
 		top: auto !important;
 	}
 	.aside {
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index 4a97b6375..8fb7b36dd 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -751,20 +751,20 @@ form th {
 .flux .current {
 	background-color: var(--color-background-hover);
 }
-.flux .flux_header:hover:not(.current):hover .item.title,
-.flux .current:not(.current):hover .item.title {
+.flux .flux_header:hover:not(.current):hover .item .title,
+.flux .current:not(.current):hover .item .title {
 	background-color: var(--color-background-hover);
 }
 .flux.favorite:not(.current) {
 	background-color: var(--color-background-stared);
 }
-.flux.favorite:not(.current):hover .item.title {
+.flux.favorite:not(.current):hover .item .title {
 	background-color: var(--color-background-stared);
 }
 .flux.not_read:not(.current) {
 	background-color: var(--color-background-unread);
 }
-.flux.not_read:not(.current):hover .item.title {
+.flux.not_read:not(.current):hover .item .title {
 	background-color: var(--color-background-unread);
 }
 .flux .item.date {
@@ -909,7 +909,7 @@ a.signin {
 }
 
 @media (max-width: 840px) {
-	body:not(.formLogin, .register) .header .item.title {
+	body:not(.formLogin, .register) .header .item .title {
 		display: none;
 	}
 	.form-group .group-name {
@@ -948,7 +948,7 @@ a.signin {
 		width: 35px;
 		text-align: center;
 	}
-	.flux:not(.current):hover .item.title {
+	.flux:not(.current):hover .item .title {
 		top: auto !important;
 	}
 	.aside {
diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss
index 33f3db81c..d23183445 100644
--- a/p/themes/Swage/swage.scss
+++ b/p/themes/Swage/swage.scss
@@ -969,7 +969,7 @@ form {
 	.current {
 		background-color: var(--color-background-hover);
 
-		&:not(.current):hover .item.title {
+		&:not(.current):hover .item .title {
 			background-color: var(--color-background-hover);
 		}
 	}
@@ -977,7 +977,7 @@ form {
 	&.favorite:not(.current) {
 		background-color: var(--color-background-stared);
 
-		&:hover .item.title {
+		&:hover .item .title {
 			background-color: var(--color-background-stared);
 		}
 	}
@@ -985,7 +985,7 @@ form {
 	&.not_read:not(.current) {
 		background-color: var(--color-background-unread);
 
-		&:hover .item.title {
+		&:hover .item .title {
 			background-color: var(--color-background-unread);
 		}
 	}
@@ -1166,7 +1166,7 @@ a.signin {
 @media (max-width: 840px) {
 	body:not(.formLogin, .register) {
 		.header {
-			.item.title {
+			.item .title {
 				display: none;
 			}
 		}
@@ -1218,7 +1218,7 @@ a.signin {
 		text-align: center;
 	}
 
-	.flux:not(.current):hover .item.title {
+	.flux:not(.current):hover .item .title {
 		top: auto !important;
 	}
 
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index 45c3def0f..5678f3e49 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -1263,47 +1263,42 @@ input[type="search"] {
 	width: 200px;
 }
 
-.flux:not(.current):hover .websitenone .item.title {
-	max-width: calc(100% - 3 * (2 * var(--frss-padding-flux-items) + 16px));
-}
-
 .flux .websiteicon .item.website {
 	width: calc(2 * var(--frss-padding-flux-items) + 16px);
 }
 
-.flux:not(.current):hover .websiteicon .item.title {
-	max-width: calc(100% - 4 * (2 * var(--frss-padding-flux-items) + 16px));
-}
-
 .flux .websitename .item.website {
 	width: 150px;
 }
 
-.flux:not(.current):hover .websitename .item.title {
-	max-width: calc(100% - 3 * (2 * var(--frss-padding-flux-items) + 16px) - 150px);
-}
-
 .website a:hover .favicon,
 a.website:hover .favicon {
 	filter: grayscale(100%);
 }
 
-.flux.not_read .item.title,
-.flux.current .item.title {
+.flux.not_read .item .title,
+.flux.current .item .title {
 	font-weight: bold;
 }
 
-.flux:not(.current):hover .item.title {
+.flux:not(.current):hover .flux_header .item .title:has(~ .date) {
+	padding-right: 0.5rem;
+	z-index: 2;
+}
+
+.flux:not(.current):hover .flux_header .item .date {
+	opacity: 0.3;
+}
+
+.flux:not(.current):hover .item .title {
 	background-color: inherit;
-	max-width: calc(100% - 320px);
-	position: absolute;
 }
 
-.flux:not(.current):hover .item.title.multiline {
-	position: initial;
+.flux .item:has(.multiline) {
+	vertical-align: top;
 }
 
-.flux .flux_header .item.title a {
+.flux .flux_header .item .title a {
 	color: var(--frss-font-color-dark);
 	text-decoration: none;
 }
@@ -1355,7 +1350,27 @@ a.website:hover .favicon {
 	object-fit: cover;
 }
 
-.flux .flux_header .item.title .summary {
+
+.flux .flux_header .item.titleAuthorSummaryDate {
+	position: relative;
+	overflow: hidden;
+}
+
+.flux .flux_header .item .title {
+	position: absolute;
+	top: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: inline-block;
+	box-sizing: border-box;
+	max-width: 100%;
+}
+
+.flux .flux_header .item .title:has(~.date) {
+	padding-right: 155px;
+}
+
+.flux .flux_header .item .summary {
 	display: -webkit-box;
 	color: var(--frss-font-color-grey-dark);
 	font-size: 0.9rem;
@@ -1365,18 +1380,28 @@ a.website:hover .favicon {
 	-webkit-line-clamp: 2;
 	-webkit-box-orient: vertical;
 	white-space: break-spaces;
+	margin-top: 2.25rem;
+	margin-bottom: 0.5rem;
+}
+
+.flux .flux_header .item .summary:has(~.date) {
+	max-width: 90%;
 }
 
-.flux .flux_header .item.title .author {
+.flux .flux_header .item .title .author {
 	padding-left: 1rem;
 	color: var(--frss-font-color-grey-dark);
 	font-weight: normal;
 }
 
-.flux .flux_header .item.date {
+.flux .flux_header .item .date {
+	position: absolute;
+	right: 0;
+	top: 0;
 	width: 155px;
 	text-align: right;
 	overflow: hidden;
+	z-index: 1;
 }
 
 .flux .flux_header .item > a {
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index c7266b644..509528f13 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -1263,47 +1263,42 @@ input[type="search"] {
 	width: 200px;
 }
 
-.flux:not(.current):hover .websitenone .item.title {
-	max-width: calc(100% - 3 * (2 * var(--frss-padding-flux-items) + 16px));
-}
-
 .flux .websiteicon .item.website {
 	width: calc(2 * var(--frss-padding-flux-items) + 16px);
 }
 
-.flux:not(.current):hover .websiteicon .item.title {
-	max-width: calc(100% - 4 * (2 * var(--frss-padding-flux-items) + 16px));
-}
-
 .flux .websitename .item.website {
 	width: 150px;
 }
 
-.flux:not(.current):hover .websitename .item.title {
-	max-width: calc(100% - 3 * (2 * var(--frss-padding-flux-items) + 16px) - 150px);
-}
-
 .website a:hover .favicon,
 a.website:hover .favicon {
 	filter: grayscale(100%);
 }
 
-.flux.not_read .item.title,
-.flux.current .item.title {
+.flux.not_read .item .title,
+.flux.current .item .title {
 	font-weight: bold;
 }
 
-.flux:not(.current):hover .item.title {
+.flux:not(.current):hover .flux_header .item .title:has(~ .date) {
+	padding-left: 0.5rem;
+	z-index: 2;
+}
+
+.flux:not(.current):hover .flux_header .item .date {
+	opacity: 0.3;
+}
+
+.flux:not(.current):hover .item .title {
 	background-color: inherit;
-	max-width: calc(100% - 320px);
-	position: absolute;
 }
 
-.flux:not(.current):hover .item.title.multiline {
-	position: initial;
+.flux .item:has(.multiline) {
+	vertical-align: top;
 }
 
-.flux .flux_header .item.title a {
+.flux .flux_header .item .title a {
 	color: var(--frss-font-color-dark);
 	text-decoration: none;
 }
@@ -1355,7 +1350,27 @@ a.website:hover .favicon {
 	object-fit: cover;
 }
 
-.flux .flux_header .item.title .summary {
+
+.flux .flux_header .item.titleAuthorSummaryDate {
+	position: relative;
+	overflow: hidden;
+}
+
+.flux .flux_header .item .title {
+	position: absolute;
+	top: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: inline-block;
+	box-sizing: border-box;
+	max-width: 100%;
+}
+
+.flux .flux_header .item .title:has(~.date) {
+	padding-left: 155px;
+}
+
+.flux .flux_header .item .summary {
 	display: -webkit-box;
 	color: var(--frss-font-color-grey-dark);
 	font-size: 0.9rem;
@@ -1365,18 +1380,28 @@ a.website:hover .favicon {
 	-webkit-line-clamp: 2;
 	-webkit-box-orient: vertical;
 	white-space: break-spaces;
+	margin-top: 2.25rem;
+	margin-bottom: 0.5rem;
+}
+
+.flux .flux_header .item .summary:has(~.date) {
+	max-width: 90%;
 }
 
-.flux .flux_header .item.title .author {
+.flux .flux_header .item .title .author {
 	padding-right: 1rem;
 	color: var(--frss-font-color-grey-dark);
 	font-weight: normal;
 }
 
-.flux .flux_header .item.date {
+.flux .flux_header .item .date {
+	position: absolute;
+	left: 0;
+	top: 0;
 	width: 155px;
 	text-align: left;
 	overflow: hidden;
+	z-index: 1;
 }
 
 .flux .flux_header .item > a {