refactor(themes): convert article-row inner layout to CSS Grid (#8824)

Replace absolute positioning inside `.titleAuthorSummaryDate` with CSS Grid. Title, date, and summary use `grid-area` instead of `position: absolute` + `margin-top: 2.25rem`.

Drops magic numbers that had to stay in sync:
- Three uses of `155px` (date width, title min, title padding) all describing the same column
- `2.25rem` margin-top on summary that had to clear the absolute title
- `90%` summary max-width to keep it off the date

Truncated-title hover-extend now uses `grid-column: 1 / -1` instead of `padding-right: 0.5rem`.

Depends on #8823: grid inside `display: table` mis-sizes in older Gecko, causing summary to misbehave. With the flex base from that PR, the grid sizes correctly in SeaMonkey 2.53.

## Test plan
- `make test-all` passes
- Verified in LibreWolf and SeaMonkey 2.53 with Nord and Origine themes
- Wide, narrow, and mobile viewports
- Toggle combinations: date on/off, summary on/off, hover-extend on truncated titles

Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>

p/themes/base-theme/frss.css

@@ -1506,7 +1506,7 @@ a.website:hover .favicon {
 }
 
 .flux:not(.current):hover .flux_header.has-date .item .title {
-	padding-right: 0.5rem;
+	grid-column: 1 / -1;
 	z-index: 2;
 }
 
@@ -1562,31 +1562,28 @@ a.website:hover .favicon {
 }
 
 .flux .flux_header .item.titleAuthorSummaryDate {
-	position: relative;
 	overflow: hidden;
 	flex: 1;
 	min-width: 0;
 	align-self: stretch;
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) auto;
+	grid-template-areas: "title date"
+		"summary .";
+	align-content: center;
 }
 
 .flux .flux_header .item .title {
-	display: inline-block;
-	max-width: 100%;
-	min-width: calc(100% - 155px);
+	grid-area: title;
 	color: var(--frss-font-color-dark);
-	position: absolute;
-	top: 0;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	box-sizing: border-box;
 	text-decoration: none;
 }
 
-.flux .flux_header.has-date .item .title {
-	padding-right: 155px;
-}
-
 .flux .flux_header .item .summary {
+	grid-area: summary;
 	display: -webkit-box;
 	color: var(--frss-font-color-grey-dark);
 	font-size: 0.9rem;
@@ -1596,14 +1593,9 @@ a.website:hover .favicon {
 	-webkit-line-clamp: 2;
 	-webkit-box-orient: vertical;
 	white-space: break-spaces;
-	margin-top: 2.25rem;
 	margin-bottom: 0.5rem;
 }
 
-.flux .flux_header.has-date .item .summary {
-	max-width: 90%;
-}
-
 .flux .flux_header .item .title .author {
 	padding-left: 1rem;
 	color: var(--frss-font-color-grey-dark);
@@ -1611,13 +1603,9 @@ a.website:hover .favicon {
 }
 
 .flux .flux_header .item .date {
-	position: absolute;
-	right: 0;
-	top: 0;
-	width: 155px;
+	grid-area: date;
 	text-align: right;
 	overflow: hidden;
-	z-index: 1;
 }
 
 .flux .flux_header .item > a {
@@ -2591,10 +2579,6 @@ html.slider-active {
 		padding-right: 1rem;
 	}
 
-	.flux .flux_header.has-date .item .title {
-		padding-right: 1rem;
-	}
-
 	.flux .flux_header.has-thumbnail.has-summary {
 		display: grid;
 		grid-template-columns: auto 1fr auto auto auto;

p/themes/base-theme/frss.rtl.css

@@ -1506,7 +1506,7 @@ a.website:hover .favicon {
 }
 
 .flux:not(.current):hover .flux_header.has-date .item .title {
-	padding-left: 0.5rem;
+	grid-column: 1 / -1;
 	z-index: 2;
 }
 
@@ -1562,31 +1562,28 @@ a.website:hover .favicon {
 }
 
 .flux .flux_header .item.titleAuthorSummaryDate {
-	position: relative;
 	overflow: hidden;
 	flex: 1;
 	min-width: 0;
 	align-self: stretch;
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) auto;
+	grid-template-areas: "title date"
+		"summary .";
+	align-content: center;
 }
 
 .flux .flux_header .item .title {
-	display: inline-block;
-	max-width: 100%;
-	min-width: calc(100% - 155px);
+	grid-area: title;
 	color: var(--frss-font-color-dark);
-	position: absolute;
-	top: 0;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	box-sizing: border-box;
 	text-decoration: none;
 }
 
-.flux .flux_header.has-date .item .title {
-	padding-left: 155px;
-}
-
 .flux .flux_header .item .summary {
+	grid-area: summary;
 	display: -webkit-box;
 	color: var(--frss-font-color-grey-dark);
 	font-size: 0.9rem;
@@ -1596,14 +1593,9 @@ a.website:hover .favicon {
 	-webkit-line-clamp: 2;
 	-webkit-box-orient: vertical;
 	white-space: break-spaces;
-	margin-top: 2.25rem;
 	margin-bottom: 0.5rem;
 }
 
-.flux .flux_header.has-date .item .summary {
-	max-width: 90%;
-}
-
 .flux .flux_header .item .title .author {
 	padding-right: 1rem;
 	color: var(--frss-font-color-grey-dark);
@@ -1611,13 +1603,9 @@ a.website:hover .favicon {
 }
 
 .flux .flux_header .item .date {
-	position: absolute;
-	left: 0;
-	top: 0;
-	width: 155px;
+	grid-area: date;
 	text-align: left;
 	overflow: hidden;
-	z-index: 1;
 }
 
 .flux .flux_header .item > a {
@@ -2591,10 +2579,6 @@ html.slider-active {
 		padding-left: 1rem;
 	}
 
-	.flux .flux_header.has-date .item .title {
-		padding-left: 1rem;
-	}
-
 	.flux .flux_header.has-thumbnail.has-summary {
 		display: grid;
 		grid-template-columns: auto 1fr auto auto auto;