Convert feed view into grid where appropriate (#8631)

* Convert feed view into grid where appropriate
This makes the feed view prettier on mobile, if thumbnails and summary are shown, as discussed in https://github.com/FreshRSS/FreshRSS/discussions/8629

**Changes proposed in this pull request:**

- Converts Feed Item list into multiple lines
- But only if both thumbnails and summaries are shown

The code is quite different from what I had done in my own hack: There I had used `display: flex` and then counted items, but that only works for my own hack: here we don't know how many items a given user may have, so we use `display:grid` instead with name grid areas.

**How to test the feature manually:**

1. Ensure you enable both thumbnails and summaries
2. Check out the feed view on mobile
3. Play around with enabling and disabling bookmarks, share button, etc.

**Pull request checklist:**

- [x] clear commit messages
- [x] code manually tested
- [ ] unit tests written (optional if too hard)
- [ ] documentation updated

**Screenshots:**

<img width="458" height="1173" alt="SCR-20260324-jnte" src="https://github.com/user-attachments/assets/1d5c1615-961a-4953-8157-f9f8a5470545" />
<img width="459" height="1172" alt="SCR-20260324-jnwf" src="https://github.com/user-attachments/assets/96ffcea3-384f-4de9-9c50-3366022713d8" />


* remove gap

* fix lint errors

* fix style errors

* remove whitespaces

* Reduce use of slow `:has()` CSS selector

---------

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

app/views/helpers/index/normal/entry_header.phtml

@@ -12,10 +12,17 @@
 	$topline_date = FreshRSS_Context::userConf()->topline_date;
 	$topline_link = FreshRSS_Context::userConf()->topline_link;
 	$lazyload = FreshRSS_Context::userConf()->lazyload;
+	$headerClasses = ['horizontal-list', 'flux_header', 'website' . $topline_website];
+	if ($topline_thumbnail !== 'none') {
+		$headerClasses[] = 'has-thumbnail';
+	}
+	if ($topline_summary) {
+		$headerClasses[] = 'has-summary';
+	}
 	if ($this->feed === null || $this->entry === null) {
 		return;
 	}
-?><ul class="horizontal-list flux_header website<?= $topline_website ?>" data-website-name="<?= $this->feed->name() ?>" data-article-authors="<?= implode(' · ', $this->entry->authors()) ?>"><?php
+?><ul class="<?= implode(' ', $headerClasses) ?>" data-website-name="<?= $this->feed->name() ?>" data-article-authors="<?= implode(' · ', $this->entry->authors()) ?>"><?php
 	if (FreshRSS_Auth::hasAccess()) {
 		if ($topline_read) {
 			?><li class="item manage"><?php

p/themes/base-theme/frss.css

@@ -2541,6 +2541,55 @@ html.slider-active {
 		padding-right: 1rem;
 	}
 
+	.flux .flux_header.has-thumbnail.has-summary {
+		display: grid;
+		grid-template-columns: auto 1fr auto auto auto;
+		grid-template-rows: auto auto;
+		grid-template-areas: "website website manage-read manage-bookmark manage-share manage-labels link"
+			"thumbnail content content content content content content";
+		align-items: start;
+		list-style: none;
+	}
+
+	.flux .flux_header.has-thumbnail.has-summary li.website .websiteName {
+		display: inline;
+	}
+
+	/** place all the elements in their respective template areas */
+	.flux .flux_header.has-thumbnail.has-summary li.website {
+		grid-area: website;
+		/** Show feed name */
+		width: auto;
+	}
+
+	.flux .flux_header.has-thumbnail.has-summary li.thumbnail {
+		grid-area: thumbnail;
+	}
+
+	.flux .flux_header.has-thumbnail.has-summary li.titleAuthorSummaryDate {
+		grid-area: content;
+	}
+
+	.flux .flux_header.has-thumbnail.has-summary li.manage:has(.read) {
+		grid-area: manage-read;
+	}
+
+	.flux .flux_header.has-thumbnail.has-summary li.manage:has(.bookmark) {
+		grid-area: manage-bookmark;
+	}
+
+	.flux .flux_header.has-thumbnail.has-summary li.link {
+		grid-area: link;
+	}
+
+	.flux .flux_header.has-thumbnail.has-summary li.labels {
+		grid-area: manage-labels
+	}
+
+	.flux .flux_header.has-thumbnail.has-summary li.share {
+		grid-area: manage-share
+	}
+
 	#overlay .close {
 		position: relative;
 	}

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

@@ -2541,6 +2541,55 @@ html.slider-active {
 		padding-left: 1rem;
 	}
 
+	.flux .flux_header.has-thumbnail.has-summary {
+		display: grid;
+		grid-template-columns: auto 1fr auto auto auto;
+		grid-template-rows: auto auto;
+		grid-template-areas: "website website manage-read manage-bookmark manage-share manage-labels link"
+			"thumbnail content content content content content content";
+		align-items: start;
+		list-style: none;
+	}
+
+	.flux .flux_header.has-thumbnail.has-summary li.website .websiteName {
+		display: inline;
+	}
+
+	/** place all the elements in their respective template areas */
+	.flux .flux_header.has-thumbnail.has-summary li.website {
+		grid-area: website;
+		/** Show feed name */
+		width: auto;
+	}
+
+	.flux .flux_header.has-thumbnail.has-summary li.thumbnail {
+		grid-area: thumbnail;
+	}
+
+	.flux .flux_header.has-thumbnail.has-summary li.titleAuthorSummaryDate {
+		grid-area: content;
+	}
+
+	.flux .flux_header.has-thumbnail.has-summary li.manage:has(.read) {
+		grid-area: manage-read;
+	}
+
+	.flux .flux_header.has-thumbnail.has-summary li.manage:has(.bookmark) {
+		grid-area: manage-bookmark;
+	}
+
+	.flux .flux_header.has-thumbnail.has-summary li.link {
+		grid-area: link;
+	}
+
+	.flux .flux_header.has-thumbnail.has-summary li.labels {
+		grid-area: manage-labels
+	}
+
+	.flux .flux_header.has-thumbnail.has-summary li.share {
+		grid-area: manage-share
+	}
+
 	#overlay .close {
 		position: relative;
 	}