Prevent search results horizontal scrolling and overflow

WordPress · Jun 10, 2022 · e13bbdb · e13bbdb
1 parent 186c975
commit e13bbdb
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 3 deletions.
diff --git a/source/wp-content/themes/wporg-developer/scss/main.scss b/source/wp-content/themes/wporg-developer/scss/main.scss
@@ -1686,6 +1686,7 @@ a.screen-reader-text:focus,
 		}
 
 		.site-title {
+			margin-right: 20px;
 
 			@media screen and (max-width: 500px) {
 				margin-bottom: 2rem;
@@ -2911,8 +2912,13 @@ button.code-tab.is-active {
 	}
 
 	&.search-wrap-inline .search-field {
+		width: calc(100vw - 60px);
 		margin: 0;
 		border: none;
+
+		@media ( min-width: 501px ) {
+			width: 100%;
+		}
 	}
 
 	&.search-wrap-embedded .search-field {

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 {

diff --git a/source/wp-content/themes/wporg-developer/stylesheets/main.css b/source/wp-content/themes/wporg-developer/stylesheets/main.css