4
0
Эх сурвалжийг харах

Keep the reader view article date on one line (#9388)

Follow-up to #9369, as discussed in https://github.com/FreshRSS/FreshRSS/pull/9369#issuecomment-5954861516

Changes proposed in this pull request:

- In the reader view, the date in the line under the article title had a fixed `width: 155px`. A long date such as "28 September 2026 at 18:30" needs about 190px, so at desktop width it broke into two lines. This was already the case before #9369.
- `.content .subtitle.horizontal-list .item.date` now uses the 155px as `min-width` and has `white-space: nowrap`, so the box grows to fit the date and the date stays on one line.
- Short dates are unchanged: they keep the 155px box and the same position.
- If the feed name, authors and date do not fit on one row, the date moves to the next line as a whole (the `flex-wrap` from #9369), instead of breaking in the middle.
- In the `max-width: 840px` block the date is reset to `min-width: 0; white-space: normal`, so nothing can overflow on very narrow screens. The phone layout from #9369 is unchanged.
- `frss.rtl.css` was regenerated with `rtlcss`.
Abdelrhman Mohamed 3 өдөр өмнө
parent
commit
820687e78c

+ 4 - 2
p/themes/base-theme/frss.css

@@ -1800,8 +1800,9 @@ a.website:hover .favicon {
 
 .content .subtitle.horizontal-list .item.date {
 	padding: 0.25rem;
-	width: 155px;
+	min-width: 155px;
 	text-align: right;
+	white-space: nowrap;
 }
 
 .content .article-header-topline.horizontal-list .item.link,
@@ -2868,8 +2869,9 @@ html.slider-active {
 	}
 
 	.content .subtitle.horizontal-list .item.date {
-		width: auto;
+		min-width: 0;
 		text-align: left;
+		white-space: normal;
 	}
 
 	table {

+ 4 - 2
p/themes/base-theme/frss.rtl.css

@@ -1800,8 +1800,9 @@ a.website:hover .favicon {
 
 .content .subtitle.horizontal-list .item.date {
 	padding: 0.25rem;
-	width: 155px;
+	min-width: 155px;
 	text-align: left;
+	white-space: nowrap;
 }
 
 .content .article-header-topline.horizontal-list .item.link,
@@ -2868,8 +2869,9 @@ html.slider-active {
 	}
 
 	.content .subtitle.horizontal-list .item.date {
-		width: auto;
+		min-width: 0;
 		text-align: right;
+		white-space: normal;
 	}
 
 	table {