Fix: menu item overflow (#4218)

* fix item width

* better hover background

* fixed template.css

19 files changed, 50 insertions, 102 deletions

diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index 6f315ddd6..52f24b915 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -322,7 +322,8 @@ a.btn {
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item:hover {
+.dropdown-menu > .item > a:hover,
+.dropdown-menu > .item > button:hover {
 	background: #262626;
 	color: #fff;
 }
@@ -332,11 +333,6 @@ a.btn {
 	margin: 0 0 0 -14px;
 }
 
-.dropdown-menu > .item:hover > a {
-	color: #fff;
-	text-decoration: none;
-}
-
 .dropdown-menu .input select,
 .dropdown-menu .input input {
 	margin: 0 auto 5px;
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index 98d450273..9d949f76a 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -322,7 +322,8 @@ a.btn {
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item:hover {
+.dropdown-menu > .item > a:hover,
+.dropdown-menu > .item > button:hover {
 	background: #262626;
 	color: #fff;
 }
@@ -332,11 +333,6 @@ a.btn {
 	margin: 0 -14px 0 0;
 }
 
-.dropdown-menu > .item:hover > a {
-	color: #fff;
-	text-decoration: none;
-}
-
 .dropdown-menu .input select,
 .dropdown-menu .input input {
 	margin: 0 auto 5px;
diff --git a/p/themes/BlueLagoon/BlueLagoon.css b/p/themes/BlueLagoon/BlueLagoon.css
index 5f0257e99..44c2c001f 100644
--- a/p/themes/BlueLagoon/BlueLagoon.css
+++ b/p/themes/BlueLagoon/BlueLagoon.css
@@ -413,7 +413,8 @@ a.btn {
 	color: #ccc;
 }
 
-.dropdown-menu > .item:hover {
+.dropdown-menu > .item > a:hover,
+.dropdown-menu > .item > button:hover {
 	background: linear-gradient(180deg,  #0090ff 0%, #0062be 100%) #e4992c;
 	background: -webkit-linear-gradient(top,  #0090ff 0%, #0062be 100%);
 	color: #fff;
@@ -424,11 +425,6 @@ a.btn {
 	margin: 0 0 0 -14px;
 }
 
-.dropdown-menu > .item:hover > a {
-	color: #fff;
-	text-decoration: none;
-}
-
 .separator {
 	margin: 5px 0;
 	border-bottom: 1px solid #171717;
diff --git a/p/themes/BlueLagoon/BlueLagoon.rtl.css b/p/themes/BlueLagoon/BlueLagoon.rtl.css
index 9b5257680..5ed6788fe 100644
--- a/p/themes/BlueLagoon/BlueLagoon.rtl.css
+++ b/p/themes/BlueLagoon/BlueLagoon.rtl.css
@@ -413,7 +413,8 @@ a.btn {
 	color: #ccc;
 }
 
-.dropdown-menu > .item:hover {
+.dropdown-menu > .item > a:hover,
+.dropdown-menu > .item > button:hover {
 	background: linear-gradient(-180deg,  #0090ff 0%, #0062be 100%) #e4992c;
 	background: -webkit-linear-gradient(top,  #0090ff 0%, #0062be 100%);
 	color: #fff;
@@ -424,11 +425,6 @@ a.btn {
 	margin: 0 -14px 0 0;
 }
 
-.dropdown-menu > .item:hover > a {
-	color: #fff;
-	text-decoration: none;
-}
-
 .separator {
 	margin: 5px 0;
 	border-bottom: 1px solid #171717;
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index fc6cd4ccb..f94a26b2b 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -358,7 +358,8 @@ a.btn {
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item:hover {
+.dropdown-menu > .item > a:hover,
+.dropdown-menu > .item > button:hover {
 	background: #26303f;
 	color: #888;
 }
@@ -368,11 +369,6 @@ a.btn {
 	margin: 0 0 0 -14px;
 }
 
-.dropdown-menu > .item:hover > a {
-	text-decoration: none;
-	color: #888;
-}
-
 .dropdown-menu .input select,
 .dropdown-menu .input input {
 	margin: 0 auto 5px;
diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css
index 869498e9c..fa7adfb06 100644
--- a/p/themes/Dark/dark.rtl.css
+++ b/p/themes/Dark/dark.rtl.css
@@ -358,7 +358,8 @@ a.btn {
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item:hover {
+.dropdown-menu > .item > a:hover,
+.dropdown-menu > .item > button:hover {
 	background: #26303f;
 	color: #888;
 }
@@ -368,11 +369,6 @@ a.btn {
 	margin: 0 -14px 0 0;
 }
 
-.dropdown-menu > .item:hover > a {
-	text-decoration: none;
-	color: #888;
-}
-
 .dropdown-menu .input select,
 .dropdown-menu .input input {
 	margin: 0 auto 5px;
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index 71af37796..e985171c6 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -359,7 +359,8 @@ a.btn {
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item:hover {
+.dropdown-menu > .item > a:hover,
+.dropdown-menu > .item > button:hover {
 	background: #2980b9;
 	color: #fff;
 }
@@ -369,11 +370,6 @@ a.btn {
 	margin: 0 0 0 -14px;
 }
 
-.dropdown-menu > .item:hover > a {
-	text-decoration: none;
-	color: #fff;
-}
-
 .dropdown-menu .input select,
 .dropdown-menu .input input {
 	margin: 0 auto 5px;
diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css
index bfa52815a..f1fa89d13 100644
--- a/p/themes/Flat/flat.rtl.css
+++ b/p/themes/Flat/flat.rtl.css
@@ -359,7 +359,8 @@ a.btn {
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item:hover {
+.dropdown-menu > .item > a:hover,
+.dropdown-menu > .item > button:hover {
 	background: #2980b9;
 	color: #fff;
 }
@@ -369,11 +370,6 @@ a.btn {
 	margin: 0 -14px 0 0;
 }
 
-.dropdown-menu > .item:hover > a {
-	text-decoration: none;
-	color: #fff;
-}
-
 .dropdown-menu .input select,
 .dropdown-menu .input input {
 	margin: 0 auto 5px;
diff --git a/p/themes/Origine-compact/origine-compact.css b/p/themes/Origine-compact/origine-compact.css
index 011934d55..953376790 100644
--- a/p/themes/Origine-compact/origine-compact.css
+++ b/p/themes/Origine-compact/origine-compact.css
@@ -396,7 +396,8 @@ a.btn,
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item:hover {
+.dropdown-menu > .item > a:hover,
+.dropdown-menu > .item > button:hover {
 	background: #0062be;
 	color: #fff;
 }
@@ -410,11 +411,6 @@ a.btn,
 	margin: 0 0 0 -14px;
 }
 
-.dropdown-menu > .item:hover > a {
-	color: #fff;
-	text-decoration: none;
-}
-
 .dropdown-menu .input select,
 .dropdown-menu .input input {
 	margin: 0 auto 5px;
diff --git a/p/themes/Origine-compact/origine-compact.rtl.css b/p/themes/Origine-compact/origine-compact.rtl.css
index 2a464410c..15063b8b2 100644
--- a/p/themes/Origine-compact/origine-compact.rtl.css
+++ b/p/themes/Origine-compact/origine-compact.rtl.css
@@ -396,7 +396,8 @@ a.btn,
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item:hover {
+.dropdown-menu > .item > a:hover,
+.dropdown-menu > .item > button:hover {
 	background: #0062be;
 	color: #fff;
 }
@@ -410,11 +411,6 @@ a.btn,
 	margin: 0 -14px 0 0;
 }
 
-.dropdown-menu > .item:hover > a {
-	color: #fff;
-	text-decoration: none;
-}
-
 .dropdown-menu .input select,
 .dropdown-menu .input input {
 	margin: 0 auto 5px;
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index d28dac24b..ca75f3414 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -378,7 +378,8 @@ a.btn {
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item:hover {
+.dropdown-menu > .item > a:hover,
+.dropdown-menu > .item > button:hover {
 	background: #0062be;
 	color: #fff;
 }
@@ -392,11 +393,6 @@ a.btn {
 	margin: 0 0 0 -14px;
 }
 
-.dropdown-menu > .item:hover > a {
-	color: #fff;
-	text-decoration: none;
-}
-
 .dropdown-menu .input select,
 .dropdown-menu .input input {
 	margin: 0 auto 5px;
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index 37f5453e7..14ee46bd9 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -378,7 +378,8 @@ a.btn {
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item:hover {
+.dropdown-menu > .item > a:hover,
+.dropdown-menu > .item > button:hover {
 	background: #0062be;
 	color: #fff;
 }
@@ -392,11 +393,6 @@ a.btn {
 	margin: 0 -14px 0 0;
 }
 
-.dropdown-menu > .item:hover > a {
-	color: #fff;
-	text-decoration: none;
-}
-
 .dropdown-menu .input select,
 .dropdown-menu .input input {
 	margin: 0 auto 5px;
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index 587bcedeb..04d406459 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -347,7 +347,8 @@ a.btn {
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item:hover {
+.dropdown-menu > .item > a:hover,
+.dropdown-menu > .item > button:hover {
 	background: #eee;
 	color: #666;
 }
@@ -357,11 +358,6 @@ a.btn {
 	margin: 0 0 0 -14px;
 }
 
-.dropdown-menu > .item:hover > a {
-	color: #666;
-	text-decoration: none;
-}
-
 .dropdown-menu .input select,
 .dropdown-menu .input input {
 	margin: 0 auto 5px;
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index 3a097d22a..164cd4f9a 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -347,7 +347,8 @@ a.btn {
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item:hover {
+.dropdown-menu > .item > a:hover,
+.dropdown-menu > .item > button:hover {
 	background: #eee;
 	color: #666;
 }
@@ -357,11 +358,6 @@ a.btn {
 	margin: 0 -14px 0 0;
 }
 
-.dropdown-menu > .item:hover > a {
-	color: #666;
-	text-decoration: none;
-}
-
 .dropdown-menu .input select,
 .dropdown-menu .input input {
 	margin: 0 auto 5px;
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index be973ea26..ab31b5de0 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -307,14 +307,11 @@ form th {
 	min-width: initial;
 	white-space: nowrap;
 }
-.dropdown-menu > .item:hover {
+.dropdown-menu > .item > a:hover,
+.dropdown-menu > .item > button:hover {
 	background: #0062be;
 	color: #fcfcfc;
 }
-.dropdown-menu > .item:hover > a {
-	text-decoration: none;
-	color: #fcfcfc;
-}
 .dropdown-menu > .item[aria-checked=true] > a::before {
 	font-weight: bold;
 	margin: 0 0 0 -14px;
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index 887dcd9d9..ea673b91d 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -307,14 +307,11 @@ form th {
 	min-width: initial;
 	white-space: nowrap;
 }
-.dropdown-menu > .item:hover {
+.dropdown-menu > .item > a:hover,
+.dropdown-menu > .item > button:hover {
 	background: #0062be;
 	color: #fcfcfc;
 }
-.dropdown-menu > .item:hover > a {
-	text-decoration: none;
-	color: #fcfcfc;
-}
 .dropdown-menu > .item[aria-checked=true] > a::before {
 	font-weight: bold;
 	margin: 0 -14px 0 0;
diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss
index fa37f6698..fedabf09d 100644
--- a/p/themes/Swage/swage.scss
+++ b/p/themes/Swage/swage.scss
@@ -402,14 +402,10 @@ form {
 				white-space: nowrap;
 			}
 
-			&:hover {
+			> a:hover,
+			> button:hover {
 				background: $color_nav;
 				color: $color_light;
-
-				> a {
-					text-decoration: none;
-					color: $color_light;
-				}
 			}
 		}
 
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index bea287653..65befae01 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -167,6 +167,11 @@ input[type="checkbox"] {
 	width: calc(99% - 5em);
 }
 
+.dropdown-menu > .item > a:hover,
+.dropdown-menu > .item > button:hover {
+	text-decoration: none;
+}
+
 .dropdown-menu input[type="checkbox"] {
 	margin-left: 1em;
 	margin-right: .5em;
@@ -373,8 +378,9 @@ input[type="checkbox"]:focus-visible {
 .dropdown-menu > .item > .as-link,
 .dropdown-menu > .item > span {
 	display: block;
-	min-width: 200px;
+	width: 100%;
 	white-space: nowrap;
+	box-sizing: border-box;
 }
 
 .dropdown-menu > .item[aria-checked="true"] > a::before {
@@ -460,6 +466,7 @@ input[type="checkbox"]:focus-visible {
 /*=== Icons */
 .icon {
 	display: inline-block;
+	max-width: none;
 	width: 16px;
 	height: 16px;
 	vertical-align: middle;
diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/template.rtl.css
index 696dd4e3c..c816179b1 100644
--- a/p/themes/base-theme/template.rtl.css
+++ b/p/themes/base-theme/template.rtl.css
@@ -167,6 +167,11 @@ input[type="checkbox"] {
 	width: calc(99% - 5em);
 }
 
+.dropdown-menu > .item > a:hover,
+.dropdown-menu > .item > button:hover {
+	text-decoration: none;
+}
+
 .dropdown-menu input[type="checkbox"] {
 	margin-right: 1em;
 	margin-left: .5em;
@@ -373,8 +378,9 @@ input[type="checkbox"]:focus-visible {
 .dropdown-menu > .item > .as-link,
 .dropdown-menu > .item > span {
 	display: block;
-	min-width: 200px;
+	width: 100%;
 	white-space: nowrap;
+	box-sizing: border-box;
 }
 
 .dropdown-menu > .item[aria-checked="true"] > a::before {
@@ -460,6 +466,7 @@ input[type="checkbox"]:focus-visible {
 /*=== Icons */
 .icon {
 	display: inline-block;
+	max-width: none;
 	width: 16px;
 	height: 16px;
 	vertical-align: middle;