Fix: dropdowns' overflow (#5055)

3 files changed, 66 insertions, 24 deletions

diff --git a/app/views/index/reader.phtml b/app/views/index/reader.phtml
index a2ea0e989..9dcd07435 100644
--- a/app/views/index/reader.phtml
+++ b/app/views/index/reader.phtml
@@ -87,8 +87,8 @@ $MAX_TAGS_DISPLAYED = FreshRSS_Context::$user_conf->show_tags_max;
 								if (!empty($remainingTags)) { // more than 7 tags: show dropdown menu ?>
 									<li class="item tag">
 										<div class="dropdown">
-											<div id="dropdown-tags2-<?= $this->entry->id() ?>" class="dropdown-target"></div>
-											<a class="dropdown-toggle" href="#dropdown-tags2-<?= $this->entry->id() ?>"><?= _i('down') ?></a>
+											<div id="dropdown-tags-<?= $this->entry->id() ?>" class="dropdown-target"></div>
+											<a class="dropdown-toggle" href="#dropdown-tags-<?= $this->entry->id() ?>"><?= _i('down') ?></a>
 											<ul class="dropdown-menu">
 												<li class="dropdown-header"><?= _t('index.tag.related') ?></li>
 												<?php
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index d142308bc..84de40acb 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -1310,22 +1310,42 @@ a.website:hover .favicon {
 .content {
 	min-height: 20rem;
 	margin: auto;
-	padding: 0.75rem;
 	line-height: 1.5;
 	word-wrap: break-word;
-	overflow: auto;
+}
+
+.content .text {
+	overflow-x: auto;
+}
+
+.content .text div {
+	overflow-x: auto;
+}
+
+.content header,
+.content .text,
+.content footer {
+	padding: 0 3rem;
+}
+
+.content header {
+	padding-top: calc(2 * var(--frss-padding-top-bottom));
+}
+
+.content footer {
+	padding-bottom: calc(2 * var(--frss-padding-top-bottom));
 }
 
 .content.large {
-	max-width: 1000px;
+	max-width: 1100px;
 }
 
 .content.medium {
-	max-width: 800px;
+	max-width: 900px;
 }
 
 .content.thin {
-	max-width: 550px;
+	max-width: 650px;
 }
 
 .content .article-header-topline {
@@ -1339,14 +1359,13 @@ a.website:hover .favicon {
 }
 
 .content > footer {
-	margin: 2rem 0 2rem;
 	padding-top: 1rem;
-	border-top: 2px solid var(--frss-border-color);
 	clear: both;
 }
 
 .content > footer .subtitle {
-	padding-bottom: 1rem;
+	padding: 2rem 0 1rem;
+	border-top: 2px solid var(--frss-border-color);
 }
 
 .content > header .tags,
@@ -1987,7 +2006,7 @@ input:checked + .slide-container .properties {
 }
 
 .reader .flux .content {
-	padding: 3rem;
+	padding: 3rem 0;
 	background-color: var(--frss-background-color);
 	border: 1px solid var(--frss-border-color);
 }
@@ -2124,7 +2143,7 @@ input:checked + .slide-container .properties {
 	}
 
 	.dropdown-target:target ~ .dropdown-toggle:not(.btn) ~ .dropdown-menu {
-		margin-top: 0;
+		margin-top: 10px;
 	}
 
 	.configure .dropdown .dropdown-menu {
@@ -2214,7 +2233,9 @@ input:checked + .slide-container .properties {
 		top: 0;
 	}
 
-	.reader .flux .content {
+	.content header,
+	.content .text,
+	.content footer {
 		padding: 1rem;
 	}
 
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index 6353f1a39..bfc768b8e 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -1310,22 +1310,42 @@ a.website:hover .favicon {
 .content {
 	min-height: 20rem;
 	margin: auto;
-	padding: 0.75rem;
 	line-height: 1.5;
 	word-wrap: break-word;
-	overflow: auto;
+}
+
+.content .text {
+	overflow-x: auto;
+}
+
+.content .text div {
+	overflow-x: auto;
+}
+
+.content header,
+.content .text,
+.content footer {
+	padding: 0 3rem;
+}
+
+.content header {
+	padding-top: calc(2 * var(--frss-padding-top-bottom));
+}
+
+.content footer {
+	padding-bottom: calc(2 * var(--frss-padding-top-bottom));
 }
 
 .content.large {
-	max-width: 1000px;
+	max-width: 1100px;
 }
 
 .content.medium {
-	max-width: 800px;
+	max-width: 900px;
 }
 
 .content.thin {
-	max-width: 550px;
+	max-width: 650px;
 }
 
 .content .article-header-topline {
@@ -1339,14 +1359,13 @@ a.website:hover .favicon {
 }
 
 .content > footer {
-	margin: 2rem 0 2rem;
 	padding-top: 1rem;
-	border-top: 2px solid var(--frss-border-color);
 	clear: both;
 }
 
 .content > footer .subtitle {
-	padding-bottom: 1rem;
+	padding: 2rem 0 1rem;
+	border-top: 2px solid var(--frss-border-color);
 }
 
 .content > header .tags,
@@ -1987,7 +2006,7 @@ input:checked + .slide-container .properties {
 }
 
 .reader .flux .content {
-	padding: 3rem;
+	padding: 3rem 0;
 	background-color: var(--frss-background-color);
 	border: 1px solid var(--frss-border-color);
 }
@@ -2124,7 +2143,7 @@ input:checked + .slide-container .properties {
 	}
 
 	.dropdown-target:target ~ .dropdown-toggle:not(.btn) ~ .dropdown-menu {
-		margin-top: 0;
+		margin-top: 10px;
 	}
 
 	.configure .dropdown .dropdown-menu {
@@ -2214,7 +2233,9 @@ input:checked + .slide-container .properties {
 		top: 0;
 	}
 
-	.reader .flux .content {
+	.content header,
+	.content .text,
+	.content footer {
 		padding: 1rem;
 	}