Fix date issue in mobile view (#6385)

* font-size: 0.7rem; in frss.css

* fix date issue in mobile view

* better CSS for date in header and footer

* RTL

* padding in mobile view

4 files changed, 20 insertions, 10 deletions

diff --git a/p/themes/base-theme/base.css b/p/themes/base-theme/base.css
index 99a98b50e..f2807ceee 100644
--- a/p/themes/base-theme/base.css
+++ b/p/themes/base-theme/base.css
@@ -555,10 +555,6 @@ th {
 	padding: 5px;
 }
 
-.flux .item.date {
-	font-size: 0.7rem;
-}
-
 .flux:not(.current):hover .item.title {
 }
 
diff --git a/p/themes/base-theme/base.rtl.css b/p/themes/base-theme/base.rtl.css
index 892cefe33..5809a1e6c 100644
--- a/p/themes/base-theme/base.rtl.css
+++ b/p/themes/base-theme/base.rtl.css
@@ -555,10 +555,6 @@ th {
 	padding: 5px;
 }
 
-.flux .item.date {
-	font-size: 0.7rem;
-}
-
 .flux:not(.current):hover .item.title {
 }
 
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index 5678f3e49..8d319cd2d 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -1411,6 +1411,11 @@ a.website:hover .favicon {
 	overflow: hidden;
 }
 
+.flux .flux_header .date,
+.flux .flux_content .bottom .date {
+	font-size: 0.7rem;
+}
+
 .item.query > a {
 	display: list-item;
 	list-style-position: inside;
@@ -2205,7 +2210,7 @@ html.slider-active {
 	}
 
 	.flux_header .item.website span,
-	.item.date, .day .date,
+	.item .date, .day .date,
 	.dropdown-menu > .no-mobile,
 	.no-mobile {
 		display: none;
@@ -2248,6 +2253,10 @@ html.slider-active {
 		text-align: center;
 	}
 
+	.flux .flux_header .item .title:has(~.date) {
+		padding-right: 1rem;
+	}
+
 	#overlay .close {
 		position: relative;
 	}
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index 509528f13..7b7c8b0fb 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -1411,6 +1411,11 @@ a.website:hover .favicon {
 	overflow: hidden;
 }
 
+.flux .flux_header .date,
+.flux .flux_content .bottom .date {
+	font-size: 0.7rem;
+}
+
 .item.query > a {
 	display: list-item;
 	list-style-position: inside;
@@ -2205,7 +2210,7 @@ html.slider-active {
 	}
 
 	.flux_header .item.website span,
-	.item.date, .day .date,
+	.item .date, .day .date,
 	.dropdown-menu > .no-mobile,
 	.no-mobile {
 		display: none;
@@ -2248,6 +2253,10 @@ html.slider-active {
 		text-align: center;
 	}
 
+	.flux .flux_header .item .title:has(~.date) {
+		padding-left: 1rem;
+	}
+
 	#overlay .close {
 		position: relative;
 	}