fix(themes): use has-date class for date-aware list layout (#8811)

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

@@ -19,6 +19,9 @@
 	if ($topline_summary) {
 		$headerClasses[] = 'has-summary';
 	}
+	if ($topline_date) {
+		$headerClasses[] = 'has-date';
+	}
 	if ($this->feed === null || $this->entry === null) {
 		return;
 	}

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

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