From 43b10f1d709a79f3db2f9b8a6d206a591d7355f7 Mon Sep 17 00:00:00 2001
From: polybjorn <service@polybjorn.com>
Date: Mon, 11 May 2026 18:20:46 +0000
Subject: [PATCH] fix(themes): use has-date class for date-aware list layout
 (#8811)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace four :has(~.date) selectors with a has-date modifier class
on .flux_header, mirroring the existing has-thumbnail and has-summary
classes. The condition (whether the date is rendered) is known
server-side and can be exposed on the parent <ul> directly. Same
elements matched in modern browsers. The rules now also apply in
browsers without :has() support, fixing the date column overlapping
the title in SeaMonkey (#6776).

Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
---
 app/views/helpers/index/normal/entry_header.phtml | 3 +++
 p/themes/base-theme/frss.css                      | 8 ++++----
 p/themes/base-theme/frss.rtl.css                  | 8 ++++----
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/app/views/helpers/index/normal/entry_header.phtml b/app/views/helpers/index/normal/entry_header.phtml
index ac79757cf..58fa10ad0 100644
--- a/app/views/helpers/index/normal/entry_header.phtml
+++ b/app/views/helpers/index/normal/entry_header.phtml
@@ -19,6 +19,9 @@
 	if ($topline_summary) {
 		$headerClasses[] = 'has-summary';
 	}
+	if ($topline_date) {
+		$headerClasses[] = 'has-date';
+	}
 	if ($this->feed === null || $this->entry === null) {
 		return;
 	}
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index 618cf40b2..fbdd704f2 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -1504,7 +1504,7 @@ a.website:hover .favicon {
 	font-weight: bold;
 }
 
-.flux:not(.current):hover .flux_header .item .title:has(~ .date) {
+.flux:not(.current):hover .flux_header.has-date .item .title {
 	padding-right: 0.5rem;
 	z-index: 2;
 }
@@ -1583,7 +1583,7 @@ a.website:hover .favicon {
 	text-decoration: none;
 }
 
-.flux .flux_header .item .title:has(~.date) {
+.flux .flux_header.has-date .item .title {
 	padding-right: 155px;
 }
 
@@ -1601,7 +1601,7 @@ a.website:hover .favicon {
 	margin-bottom: 0.5rem;
 }
 
-.flux .flux_header .item .summary:has(~.date) {
+.flux .flux_header.has-date .item .summary {
 	max-width: 90%;
 }
 
@@ -2574,7 +2574,7 @@ html.slider-active {
 		padding-right: 1rem;
 	}
 
-	.flux .flux_header .item .title:has(~.date) {
+	.flux .flux_header.has-date .item .title {
 		padding-right: 1rem;
 	}
 
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index 071f07981..0f7d8dda2 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -1504,7 +1504,7 @@ a.website:hover .favicon {
 	font-weight: bold;
 }
 
-.flux:not(.current):hover .flux_header .item .title:has(~ .date) {
+.flux:not(.current):hover .flux_header.has-date .item .title {
 	padding-left: 0.5rem;
 	z-index: 2;
 }
@@ -1583,7 +1583,7 @@ a.website:hover .favicon {
 	text-decoration: none;
 }
 
-.flux .flux_header .item .title:has(~.date) {
+.flux .flux_header.has-date .item .title {
 	padding-left: 155px;
 }
 
@@ -1601,7 +1601,7 @@ a.website:hover .favicon {
 	margin-bottom: 0.5rem;
 }
 
-.flux .flux_header .item .summary:has(~.date) {
+.flux .flux_header.has-date .item .summary {
 	max-width: 90%;
 }
 
@@ -2574,7 +2574,7 @@ html.slider-active {
 		padding-left: 1rem;
 	}
 
-	.flux .flux_header .item .title:has(~.date) {
+	.flux .flux_header.has-date .item .title {
 		padding-left: 1rem;
 	}