Explorar o código

refactor(themes): convert .horizontal-list from display:table to flex (#8823)

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>
polybjorn hai 9 horas
pai
achega
be3606102a
Modificáronse 2 ficheiros con 16 adicións e 20 borrados
  1. 8 10
      p/themes/base-theme/frss.css
  2. 8 10
      p/themes/base-theme/frss.rtl.css

+ 8 - 10
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,

+ 8 - 10
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,