From f94ec779e66ca7203cd3cf1e807bcf3c983ed736 Mon Sep 17 00:00:00 2001
From: maTh <math-home@web.de>
Date: Tue, 11 Jan 2022 23:53:40 +0100
Subject: [PATCH] Improve dropdown menu mobile (#4141)

* Theme template.css

* theme adark

* theme ansum

* theme bluelagoon

* theme dark

* theme template.css RTL fix

* theme flat

* theme Origine

* theme Origine-compact

* theme Pafat

* theme Screwdriver

* theme Swage

* theme Mapco

* dropdown menu with thin scrollbar

* Fix CI foundings

* Fix RTL

* Fix CSS semicolons

* Fix CSS RTL

* Fix SCSS

* Update _mobile.scss
---
 .../helpers/index/normal/entry_bottom.phtml   |  2 +-
 p/themes/Alternative-Dark/adark.css           |  6 +++
 p/themes/Alternative-Dark/adark.rtl.css       |  6 +++
 p/themes/Ansum/_components.scss               |  7 +--
 p/themes/Ansum/_layout.scss                   |  1 -
 p/themes/Ansum/_mobile.scss                   | 20 +++++++
 p/themes/Ansum/ansum.css                      | 22 ++++++--
 p/themes/Ansum/ansum.rtl.css                  | 22 ++++++--
 p/themes/BlueLagoon/BlueLagoon.css            |  7 +++
 p/themes/BlueLagoon/BlueLagoon.rtl.css        |  7 +++
 p/themes/Dark/dark.css                        |  6 +++
 p/themes/Dark/dark.rtl.css                    |  6 +++
 p/themes/Flat/flat.css                        | 10 ++++
 p/themes/Flat/flat.rtl.css                    | 10 ++++
 p/themes/Mapco/_components.scss               |  7 +--
 p/themes/Mapco/_mobile.scss                   | 20 +++++++
 p/themes/Mapco/mapco.css                      | 21 ++++++--
 p/themes/Mapco/mapco.rtl.css                  | 21 ++++++--
 p/themes/Origine-compact/origine-compact.css  | 10 ++++
 .../Origine-compact/origine-compact.rtl.css   | 10 ++++
 p/themes/Origine/origine.css                  |  6 +++
 p/themes/Origine/origine.rtl.css              |  6 +++
 p/themes/Pafat/pafat.css                      |  5 ++
 p/themes/Pafat/pafat.rtl.css                  |  5 ++
 p/themes/Screwdriver/screwdriver.css          |  6 +++
 p/themes/Screwdriver/screwdriver.rtl.css      |  6 +++
 p/themes/Swage/swage.css                      |  4 ++
 p/themes/Swage/swage.rtl.css                  |  4 ++
 p/themes/Swage/swage.scss                     |  4 ++
 p/themes/base-theme/template.css              | 54 ++++++++++++++++---
 p/themes/base-theme/template.rtl.css          | 54 ++++++++++++++++---
 31 files changed, 337 insertions(+), 38 deletions(-)

diff --git a/app/views/helpers/index/normal/entry_bottom.phtml b/app/views/helpers/index/normal/entry_bottom.phtml
index 5f105c6c9..1b6180c47 100644
--- a/app/views/helpers/index/normal/entry_bottom.phtml
+++ b/app/views/helpers/index/normal/entry_bottom.phtml
@@ -44,7 +44,7 @@
 			<a class="dropdown-toggle" href="#dropdown-labels-<?= $this->entry->id() ?>"><?php
 				echo _t('index.menu.tags');
 			?></a>
-			<ul class="dropdown-menu dropdown-menu-scrollable">
+			<ul class="dropdown-menu dropdown-menu-scrollable scrollbar-thin">
 				<li class="dropdown-close"><a href="#close">❌</a></li>
 				<!-- Ajax -->
 			</ul>
diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index 0d83af6f2..827c0c730 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -1149,6 +1149,12 @@ a.btn {
 		width: 400px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #333;
+		border-top: 2px solid #262626;
+		border-left: 2px solid #262626;
+	}
+
 	.day .name {
 		display: none!important;
 		font-size: 1.1rem;
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index a146afef2..52966cc03 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -1149,6 +1149,12 @@ a.btn {
 		width: 400px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #333;
+		border-top: 2px solid #262626;
+		border-right: 2px solid #262626;
+	}
+
 	.day .name {
 		display: none!important;
 		font-size: 1.1rem;
diff --git a/p/themes/Ansum/_components.scss b/p/themes/Ansum/_components.scss
index b89821df3..9e78456a2 100644
--- a/p/themes/Ansum/_components.scss
+++ b/p/themes/Ansum/_components.scss
@@ -20,7 +20,7 @@
 
 /*=== Dropdown */
 .dropdown-menu {
-	margin: 0;
+	margin: 9px 0 0 0;
 	padding: 0.5rem 0 1rem 0;
 	background: $grey-lighter;
 	font-size: 1rem;
@@ -30,13 +30,14 @@
 	text-align: left;
 
 	&::after {
-		background: white;
+		background: $grey-lighter;
 		width: 10px;
 		height: 10px;
 		content: "";
 		position: absolute;
 		top: -4px;
-		right: 13px;
+		right: 18px;
+		bottom: -14px;
 		z-index: -10;
 		transform: rotate(45deg);
 		// border-top: 1px solid #95a5a6;
diff --git a/p/themes/Ansum/_layout.scss b/p/themes/Ansum/_layout.scss
index 56fe97a54..0cd81fa5e 100644
--- a/p/themes/Ansum/_layout.scss
+++ b/p/themes/Ansum/_layout.scss
@@ -306,7 +306,6 @@
 
 #dropdown-query ~ .dropdown-menu .dropdown-header .icon {
 	vertical-align: middle;
-	background-color: $grey-medium-dark;
 	border-radius: 3px;
 }
 
diff --git a/p/themes/Ansum/_mobile.scss b/p/themes/Ansum/_mobile.scss
index f74331de5..824bb1056 100644
--- a/p/themes/Ansum/_mobile.scss
+++ b/p/themes/Ansum/_mobile.scss
@@ -147,7 +147,27 @@
 		}
 	}
 
+	.dropdown-target:target {
+		~ .dropdown-toggle::after {
+			background-color: $grey-lighter;
+			border-top: 1px solid $grey-light;
+			border-left: 1px solid $grey-light;
+			right: 21px;
+			bottom: -14px;
+		}
 
+		~ a.dropdown-toggle {
+			&:not(.btn) {
+				~ .dropdown-menu {
+					margin-top: 0;
+				}
+
+				&::after {
+					bottom: -17px;
+				}
+			}
+		}
+	}
 
 	.day {
 		text-align: center;
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index 8f41f9b78..4a565d031 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -227,7 +227,7 @@ form th {
 
 /*=== Dropdown */
 .dropdown-menu {
-	margin: 0;
+	margin: 9px 0 0 0;
 	padding: 0.5rem 0 1rem 0;
 	background: #fcfaf8;
 	font-size: 1rem;
@@ -237,13 +237,14 @@ form th {
 	text-align: left;
 }
 .dropdown-menu::after {
-	background: white;
+	background: #fcfaf8;
 	width: 10px;
 	height: 10px;
 	content: "";
 	position: absolute;
 	top: -4px;
-	right: 13px;
+	right: 18px;
+	bottom: -14px;
 	z-index: -10;
 	transform: rotate(45deg);
 }
@@ -1038,7 +1039,6 @@ form th {
 
 #dropdown-query ~ .dropdown-menu .dropdown-header .icon {
 	vertical-align: middle;
-	background-color: #ba9;
 	border-radius: 3px;
 }
 
@@ -1554,6 +1554,20 @@ form th {
 		padding: 0.5rem 0;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #fcfaf8;
+		border-top: 1px solid #f5f0ec;
+		border-left: 1px solid #f5f0ec;
+		right: 21px;
+		bottom: -14px;
+	}
+	.dropdown-target:target ~ a.dropdown-toggle:not(.btn) ~ .dropdown-menu {
+		margin-top: 0;
+	}
+	.dropdown-target:target ~ a.dropdown-toggle:not(.btn)::after {
+		bottom: -17px;
+	}
+
 	.day {
 		text-align: center;
 		padding: 1rem 0;
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index 0142968ce..f51507030 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -227,7 +227,7 @@ form th {
 
 /*=== Dropdown */
 .dropdown-menu {
-	margin: 0;
+	margin: 9px 0 0 0;
 	padding: 0.5rem 0 1rem 0;
 	background: #fcfaf8;
 	font-size: 1rem;
@@ -237,13 +237,14 @@ form th {
 	text-align: right;
 }
 .dropdown-menu::after {
-	background: white;
+	background: #fcfaf8;
 	width: 10px;
 	height: 10px;
 	content: "";
 	position: absolute;
 	top: -4px;
-	left: 13px;
+	left: 18px;
+	bottom: -14px;
 	z-index: -10;
 	transform: rotate(-45deg);
 }
@@ -1038,7 +1039,6 @@ form th {
 
 #dropdown-query ~ .dropdown-menu .dropdown-header .icon {
 	vertical-align: middle;
-	background-color: #ba9;
 	border-radius: 3px;
 }
 
@@ -1554,6 +1554,20 @@ form th {
 		padding: 0.5rem 0;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #fcfaf8;
+		border-top: 1px solid #f5f0ec;
+		border-right: 1px solid #f5f0ec;
+		left: 21px;
+		bottom: -14px;
+	}
+	.dropdown-target:target ~ a.dropdown-toggle:not(.btn) ~ .dropdown-menu {
+		margin-top: 0;
+	}
+	.dropdown-target:target ~ a.dropdown-toggle:not(.btn)::after {
+		bottom: -17px;
+	}
+
 	.day {
 		text-align: center;
 		padding: 1rem 0;
diff --git a/p/themes/BlueLagoon/BlueLagoon.css b/p/themes/BlueLagoon/BlueLagoon.css
index 98de631e3..3540fb67c 100644
--- a/p/themes/BlueLagoon/BlueLagoon.css
+++ b/p/themes/BlueLagoon/BlueLagoon.css
@@ -1322,6 +1322,13 @@ a.btn {
 		width: 400px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #222;
+		border-top: 1px solid #171717;
+		border-left: 1px solid #171717;
+		right: 13px;
+	}
+
 	.day .name {
 		display: none;
 	}
diff --git a/p/themes/BlueLagoon/BlueLagoon.rtl.css b/p/themes/BlueLagoon/BlueLagoon.rtl.css
index c8e9d7462..b77d9923e 100644
--- a/p/themes/BlueLagoon/BlueLagoon.rtl.css
+++ b/p/themes/BlueLagoon/BlueLagoon.rtl.css
@@ -1322,6 +1322,13 @@ a.btn {
 		width: 400px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #222;
+		border-top: 1px solid #171717;
+		border-right: 1px solid #171717;
+		left: 13px;
+	}
+
 	.day .name {
 		display: none;
 	}
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index 10af7bb7e..9950a79d5 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -1172,6 +1172,12 @@ a.btn {
 		width: 400px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #1a1a1a;
+		border-top: 1px solid #888;
+		border-left: 1px solid #888;
+	}
+
 	.day .name {
 		font-size: 1.1rem;
 	}
diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css
index 6c6830a3f..f693e9e48 100644
--- a/p/themes/Dark/dark.rtl.css
+++ b/p/themes/Dark/dark.rtl.css
@@ -1172,6 +1172,12 @@ a.btn {
 		width: 400px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #1a1a1a;
+		border-top: 1px solid #888;
+		border-right: 1px solid #888;
+	}
+
 	.day .name {
 		font-size: 1.1rem;
 	}
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index 304f27b8b..1131f67ac 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -1165,6 +1165,16 @@ a.btn {
 		width: 400px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #fafafa;
+		border-top: 1px solid #95a5a6;
+		border-left: 1px solid #95a5a6;
+	}
+
+	.dropdown-target:target ~ .btn.dropdown-toggle::after {
+		bottom: -19px;
+	}
+
 	.day .name {
 		font-size: 1.1rem;
 	}
diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css
index b78536316..e64e861c7 100644
--- a/p/themes/Flat/flat.rtl.css
+++ b/p/themes/Flat/flat.rtl.css
@@ -1165,6 +1165,16 @@ a.btn {
 		width: 400px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #fafafa;
+		border-top: 1px solid #95a5a6;
+		border-right: 1px solid #95a5a6;
+	}
+
+	.dropdown-target:target ~ .btn.dropdown-toggle::after {
+		bottom: -19px;
+	}
+
 	.day .name {
 		font-size: 1.1rem;
 	}
diff --git a/p/themes/Mapco/_components.scss b/p/themes/Mapco/_components.scss
index 840da5258..6441ac0fb 100644
--- a/p/themes/Mapco/_components.scss
+++ b/p/themes/Mapco/_components.scss
@@ -20,7 +20,7 @@
 
 /*=== Dropdown */
 .dropdown-menu {
-	margin: 0;
+	margin: 9px 0 0 0;
 	padding: 0.5rem 0 1rem 0;
 	background: $grey-lighter;
 	font-size: 1rem;
@@ -30,13 +30,14 @@
 	text-align: left;
 
 	&::after {
-		background: white;
+		background: $grey-lighter;
 		width: 10px;
 		height: 10px;
 		content: "";
 		position: absolute;
 		top: -4px;
-		right: 13px;
+		right: 18px;
+		bottom: -14px;
 		z-index: -10;
 		transform: rotate(45deg);
 		// border-top: 1px solid #95a5a6;
diff --git a/p/themes/Mapco/_mobile.scss b/p/themes/Mapco/_mobile.scss
index 65b31fb89..068cb1d18 100644
--- a/p/themes/Mapco/_mobile.scss
+++ b/p/themes/Mapco/_mobile.scss
@@ -147,7 +147,27 @@
 		}
 	}
 
+	.dropdown-target:target {
+		~ .dropdown-toggle::after {
+			background-color: $grey-lighter;
+			border-top: 1px solid $grey-light;
+			border-left: 1px solid $grey-light;
+			right: 21px;
+			bottom: -14px;
+		}
 
+		~ a.dropdown-toggle {
+			&:not(.btn) {
+				~ .dropdown-menu {
+					margin-top: 0;
+				}
+
+				&::after {
+					bottom: -17px;
+				}
+			}
+		}
+	}
 
 	.day {
 		text-align: center;
diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index 8edaf81c4..a050cc32d 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -228,7 +228,7 @@ form th {
 
 /*=== Dropdown */
 .dropdown-menu {
-	margin: 0;
+	margin: 9px 0 0 0;
 	padding: 0.5rem 0 1rem 0;
 	background: #f9fafb;
 	font-size: 1rem;
@@ -238,13 +238,14 @@ form th {
 	text-align: left;
 }
 .dropdown-menu::after {
-	background: white;
+	background: #f9fafb;
 	width: 10px;
 	height: 10px;
 	content: "";
 	position: absolute;
 	top: -4px;
-	right: 13px;
+	right: 18px;
+	bottom: -14px;
 	z-index: -10;
 	transform: rotate(45deg);
 }
@@ -1566,6 +1567,20 @@ form th {
 		padding: 0.5rem 0;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #f9fafb;
+		border-top: 1px solid #eff0f2;
+		border-left: 1px solid #eff0f2;
+		right: 21px;
+		bottom: -14px;
+	}
+	.dropdown-target:target ~ a.dropdown-toggle:not(.btn) ~ .dropdown-menu {
+		margin-top: 0;
+	}
+	.dropdown-target:target ~ a.dropdown-toggle:not(.btn)::after {
+		bottom: -17px;
+	}
+
 	.day {
 		text-align: center;
 		padding: 1rem 0;
diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index 868766236..23fc886db 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -228,7 +228,7 @@ form th {
 
 /*=== Dropdown */
 .dropdown-menu {
-	margin: 0;
+	margin: 9px 0 0 0;
 	padding: 0.5rem 0 1rem 0;
 	background: #f9fafb;
 	font-size: 1rem;
@@ -238,13 +238,14 @@ form th {
 	text-align: right;
 }
 .dropdown-menu::after {
-	background: white;
+	background: #f9fafb;
 	width: 10px;
 	height: 10px;
 	content: "";
 	position: absolute;
 	top: -4px;
-	left: 13px;
+	left: 18px;
+	bottom: -14px;
 	z-index: -10;
 	transform: rotate(-45deg);
 }
@@ -1566,6 +1567,20 @@ form th {
 		padding: 0.5rem 0;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #f9fafb;
+		border-top: 1px solid #eff0f2;
+		border-right: 1px solid #eff0f2;
+		left: 21px;
+		bottom: -14px;
+	}
+	.dropdown-target:target ~ a.dropdown-toggle:not(.btn) ~ .dropdown-menu {
+		margin-top: 0;
+	}
+	.dropdown-target:target ~ a.dropdown-toggle:not(.btn)::after {
+		bottom: -17px;
+	}
+
 	.day {
 		text-align: center;
 		padding: 1rem 0;
diff --git a/p/themes/Origine-compact/origine-compact.css b/p/themes/Origine-compact/origine-compact.css
index b035b0b3d..0f4af625c 100644
--- a/p/themes/Origine-compact/origine-compact.css
+++ b/p/themes/Origine-compact/origine-compact.css
@@ -1247,6 +1247,16 @@ a.btn,
 		width: 400px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #fff;
+		border-top: 1px solid #ddd;
+		border-left: 1px solid #ddd;
+	}
+
+	.dropdown-target:target ~ .dropdown-toggle:not(.btn) ~ .dropdown-menu {
+		margin-top: 5px;
+	}
+
 	.day .name {
 		font-size: 1.1rem;
 		text-shadow: none;
diff --git a/p/themes/Origine-compact/origine-compact.rtl.css b/p/themes/Origine-compact/origine-compact.rtl.css
index a7cc0998c..a061f46f3 100644
--- a/p/themes/Origine-compact/origine-compact.rtl.css
+++ b/p/themes/Origine-compact/origine-compact.rtl.css
@@ -1247,6 +1247,16 @@ a.btn,
 		width: 400px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #fff;
+		border-top: 1px solid #ddd;
+		border-right: 1px solid #ddd;
+	}
+
+	.dropdown-target:target ~ .dropdown-toggle:not(.btn) ~ .dropdown-menu {
+		margin-top: 5px;
+	}
+
 	.day .name {
 		font-size: 1.1rem;
 		text-shadow: none;
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index e13b68915..496254c83 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -1188,6 +1188,12 @@ a.btn {
 		width: 400px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #fff;
+		border-top: 1px solid #ddd;
+		border-left: 1px solid #ddd;
+	}
+
 	.form-group.form-actions {
 		margin-left: -15px;
 		margin-right: -15px;
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index 9c71eed3b..8dcde6b76 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -1188,6 +1188,12 @@ a.btn {
 		width: 400px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #fff;
+		border-top: 1px solid #ddd;
+		border-right: 1px solid #ddd;
+	}
+
 	.form-group.form-actions {
 		margin-right: -15px;
 		margin-left: -15px;
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index a5428b216..19794585c 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -1176,6 +1176,11 @@ a.signin {
 		width: 400px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		border-top: 1px solid #aaa;
+		border-left: 1px solid #aaa;
+	}
+
 	.day .name {
 		font-size: 1.1rem;
 		text-shadow: none;
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index 913a6512c..d3efed136 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -1176,6 +1176,11 @@ a.signin {
 		width: 400px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		border-top: 1px solid #aaa;
+		border-right: 1px solid #aaa;
+	}
+
 	.day .name {
 		font-size: 1.1rem;
 		text-shadow: none;
diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css
index a7b8511d3..72df5d7ea 100644
--- a/p/themes/Screwdriver/screwdriver.css
+++ b/p/themes/Screwdriver/screwdriver.css
@@ -1307,6 +1307,12 @@ a.btn {
 		width: 400px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #222;
+		border-top: 1px solid #171717;
+		border-left: 1px solid #171717;
+	}
+
 	.day .name {
 		display: none;
 	}
diff --git a/p/themes/Screwdriver/screwdriver.rtl.css b/p/themes/Screwdriver/screwdriver.rtl.css
index 24068a534..34aea5d3b 100644
--- a/p/themes/Screwdriver/screwdriver.rtl.css
+++ b/p/themes/Screwdriver/screwdriver.rtl.css
@@ -1307,6 +1307,12 @@ a.btn {
 		width: 400px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #222;
+		border-top: 1px solid #171717;
+		border-right: 1px solid #171717;
+	}
+
 	.day .name {
 		display: none;
 	}
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index 5e45997b2..a02000d02 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -1011,6 +1011,10 @@ form th {
 		padding-right: 10px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle.btn::after {
+		display: none;
+	}
+
 	.day .name {
 		font-size: 1.1rem;
 	}
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index b55da2632..1ea6dd236 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -1011,6 +1011,10 @@ form th {
 		padding-left: 10px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle.btn::after {
+		display: none;
+	}
+
 	.day .name {
 		font-size: 1.1rem;
 	}
diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss
index ded23b381..de71c5fdf 100644
--- a/p/themes/Swage/swage.scss
+++ b/p/themes/Swage/swage.scss
@@ -1253,6 +1253,10 @@ form {
 		padding-right: 10px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle.btn::after {
+		display: none;
+	}
+
 	.day .name {
 		font-size: 1.1rem;
 	}
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index 42d023375..1c3b0490c 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -1394,25 +1394,63 @@ input:checked + .slide-container .properties {
 		margin-left: 0;
 	}
 
+	.dropdown {
+		position: inherit;
+	}
+
 	.dropdown .dropdown-menu {
-		width: 100%;
+		width: 94%;
 		border-radius: 0;
-		bottom: 0;
-		position: fixed;
+		left: 3%;
+		right: 3%;
+		position: absolute;
+	}
+
+	.dropdown .dropdown-menu .item {
+		margin: 2px 0;
+	}
+
+	.dropdown .dropdown-menu .item button.as-link,
+	.dropdown .dropdown-menu .item button.as-link:hover, button.as-link:active {
+		width: 100%;
+	}
+
+	.dropdown-target:target ~ .dropdown-toggle {
+		position: relative;
+		overflow: visible;
+	}
+
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #fff;
+		width: 10px;
+		height: 10px;
+		content: "";
+		position: absolute;
+		right: 8px;
+		bottom: -17px;
+		transform: rotate(45deg);
+		z-index: 9999;
+		cursor: default;
+	}
+
+	.dropdown-target:target ~ .dropdown-toggle:not(.btn) ~ .dropdown-menu {
+		margin-top: 0;
 	}
 
 	.configure .dropdown .dropdown-menu {
 		width: 90%;
 		height: 100vh;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: auto;
+		position: fixed;
+		padding-top: 0;
+		margin-top: 0;
 		overflow: auto;
 		box-shadow: -3px 0 3px #aaa;
 	}
 
-	.dropdown-target ~ .dropdown-menu {
-		width: 0;
-
-	}
-
 	.dropdown-target:target ~ .dropdown-menu {
 		display: table-cell;
 		z-index: 1000;
diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/template.rtl.css
index 22851985a..78d4e45af 100644
--- a/p/themes/base-theme/template.rtl.css
+++ b/p/themes/base-theme/template.rtl.css
@@ -1394,25 +1394,63 @@ input:checked + .slide-container .properties {
 		margin-right: 0;
 	}
 
+	.dropdown {
+		position: inherit;
+	}
+
 	.dropdown .dropdown-menu {
-		width: 100%;
+		width: 94%;
 		border-radius: 0;
-		bottom: 0;
-		position: fixed;
+		right: 3%;
+		left: 3%;
+		position: absolute;
+	}
+
+	.dropdown .dropdown-menu .item {
+		margin: 2px 0;
+	}
+
+	.dropdown .dropdown-menu .item button.as-link,
+	.dropdown .dropdown-menu .item button.as-link:hover, button.as-link:active {
+		width: 100%;
+	}
+
+	.dropdown-target:target ~ .dropdown-toggle {
+		position: relative;
+		overflow: visible;
+	}
+
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #fff;
+		width: 10px;
+		height: 10px;
+		content: "";
+		position: absolute;
+		left: 8px;
+		bottom: -17px;
+		transform: rotate(-45deg);
+		z-index: 9999;
+		cursor: default;
+	}
+
+	.dropdown-target:target ~ .dropdown-toggle:not(.btn) ~ .dropdown-menu {
+		margin-top: 0;
 	}
 
 	.configure .dropdown .dropdown-menu {
 		width: 90%;
 		height: 100vh;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: auto;
+		position: fixed;
+		padding-top: 0;
+		margin-top: 0;
 		overflow: auto;
 		box-shadow: 3px 0 3px #aaa;
 	}
 
-	.dropdown-target ~ .dropdown-menu {
-		width: 0;
-
-	}
-
 	.dropdown-target:target ~ .dropdown-menu {
 		display: table-cell;
 		z-index: 1000;