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

* change HTML structure

* CSS

1 files changed, 48 insertions, 23 deletions

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 {