Fix: menu item overflow (#4218)

* fix item width

* better hover background

* fixed template.css

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;
-				}
 			}
 		}
 

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;

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;