mirror/FreshRSS
0
0
Fork 0
mirror of https://github.com/FreshRSS/FreshRSS.git synced 2026-06-10 16:45:14 -04:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
polybjorn
2026-05-20 18:11:25 +00:00
committed by GitHub
parent 93f989b977
commit be3606102a
2 changed files with 16 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
p/themes/base-theme/frss.css
View File

@@ -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,

18
p/themes/base-theme/frss.rtl.css
View File

@@ -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,