From be3606102aa6eb787f880f3c1664ea75fbcff49b Mon Sep 17 00:00:00 2001
From: polybjorn <service@polybjorn.com>
Date: Wed, 20 May 2026 18:11:25 +0000
Subject: [PATCH] refactor(themes): convert .horizontal-list from display:table
 to flex (#8823)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Convert `.horizontal-list` from `display: table` to `display: flex`. The title item gets `flex: 1; min-width: 0; align-self: stretch` to match the implicit sizing it got from table-cell.

Class name kept so `main.js` `.closest('.horizontal-list')` calls and theme overrides still match. No `gap` or logical properties, so it works back to Firefox 28 / SeaMonkey 2.53.

Prep for #8824 which converts article rows to CSS Grid (#6776). Grid inside `display: table` mis-sizes in older Gecko, so the outer table has to go first.

## Test plan
- `make test-all` passes
- Verified in LibreWolf and SeaMonkey 2.53 with Nord and Origine themes
- Wide, narrow, and mobile viewports
- Bundled themes (Ansum, Origine-compact, Mapco, Swage) checked: no overrides depend on `display: table`

Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
---
 p/themes/base-theme/frss.css     | 18 ++++++++----------
 p/themes/base-theme/frss.rtl.css | 18 ++++++++----------
 2 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index 6d7e7bf94..e184c6a25 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -755,14 +755,14 @@ input[type="checkbox"]:focus-visible {
 .horizontal-list {
 	margin: 0;
 	padding: 0;
-	display: table;
-	table-layout: fixed;
+	display: flex;
+	align-items: center;
 	width: 100%;
+	list-style: none;
 }
 
 .horizontal-list .item {
-	display: table-cell;
-	vertical-align: middle;
+	flex: 0 0 auto;
 }
 
 .horizontal-list .item .item-element {
@@ -1514,11 +1514,6 @@ a.website:hover .favicon {
 	background-color: inherit;
 }
 
-.flux .flux_header.has-thumbnail .item.titleAuthorSummaryDate,
-.flux .flux_header.has-summary .item.titleAuthorSummaryDate {
-	vertical-align: top;
-}
-
 .flux .flux_header .item.thumbnail {
 	line-height: 0;
 	padding: var(--frss-padding-top-bottom) var(--frss-padding-flux-items);
@@ -1569,6 +1564,9 @@ a.website:hover .favicon {
 .flux .flux_header .item.titleAuthorSummaryDate {
 	position: relative;
 	overflow: hidden;
+	flex: 1;
+	min-width: 0;
+	align-self: stretch;
 }
 
 .flux .flux_header .item .title {
@@ -1768,7 +1766,7 @@ a.website:hover .favicon {
 
 .content .article-header-topline.horizontal-list .item,
 .content .subtitle.horizontal-list .item {
-	vertical-align: top;
+	align-self: flex-start;
 }
 
 .content .article-header-topline.horizontal-list .item .website,
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index 9c9e86943..71c581077 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -755,14 +755,14 @@ input[type="checkbox"]:focus-visible {
 .horizontal-list {
 	margin: 0;
 	padding: 0;
-	display: table;
-	table-layout: fixed;
+	display: flex;
+	align-items: center;
 	width: 100%;
+	list-style: none;
 }
 
 .horizontal-list .item {
-	display: table-cell;
-	vertical-align: middle;
+	flex: 0 0 auto;
 }
 
 .horizontal-list .item .item-element {
@@ -1514,11 +1514,6 @@ a.website:hover .favicon {
 	background-color: inherit;
 }
 
-.flux .flux_header.has-thumbnail .item.titleAuthorSummaryDate,
-.flux .flux_header.has-summary .item.titleAuthorSummaryDate {
-	vertical-align: top;
-}
-
 .flux .flux_header .item.thumbnail {
 	line-height: 0;
 	padding: var(--frss-padding-top-bottom) var(--frss-padding-flux-items);
@@ -1569,6 +1564,9 @@ a.website:hover .favicon {
 .flux .flux_header .item.titleAuthorSummaryDate {
 	position: relative;
 	overflow: hidden;
+	flex: 1;
+	min-width: 0;
+	align-self: stretch;
 }
 
 .flux .flux_header .item .title {
@@ -1768,7 +1766,7 @@ a.website:hover .favicon {
 
 .content .article-header-topline.horizontal-list .item,
 .content .subtitle.horizontal-list .item {
-	vertical-align: top;
+	align-self: flex-start;
 }
 
 .content .article-header-topline.horizontal-list .item .website,