Prevent search results horizontal scrolling and overflow

WordPress · Jun 10, 2022 · 668e6fd · 668e6fd
1 parent 186c975
commit 668e6fd
Showing 1 changed file with 14 additions and 3 deletions.
diff --git a/source/wp-content/themes/wporg-developer/stylesheets/autocomplete.css b/source/wp-content/themes/wporg-developer/stylesheets/autocomplete.css
@@ -25,20 +25,31 @@ div.awesomplete li[aria-selected="true"] mark {
 
 .search-wrap div.awesomplete > ul {
 	top: 40px;
+	max-width: 100%;
 	text-align: left;
 	max-height: 13.5em;
 	color: #404040;
-	overflow: auto;
+	overflow-x: hidden;
 	background: linear-gradient(to bottom right, #fff, hsla(0, 0%, 100%, 0.9));
 }
 
+@media (min-width: 400px) {
+	.search-wrap div.awesomplete > ul {
+		max-width: calc( 100vw - 50% - var(--wp--custom--alignment--scroll-bar-width) );
+	}
+}
+
+.search-wrap div.awesomplete > ul li {
+	padding-right: 20px;
+}
+
 .search-wrap-inline div.awesomplete > ul {
 	right: 0;
 	left: auto;
 }
 
 .search-wrap .searchform label div.awesomplete > input,
-.search-wrap div.awesomplete {	
+.search-wrap div.awesomplete {
 	width: 100%;
 }
 
@@ -51,7 +62,7 @@ div.awesomplete li[aria-selected="true"] mark {
 
 .search-wrap div.awesomplete {
 	/* This is for the input to expand */
-	display: flex; 
+	display: flex;
 }
 
 div.awesomplete > ul::before {