From 186c975be8e51dc6cc445663df5fa5ffd2d7d0da Mon Sep 17 00:00:00 2001
From: Ian Dunn <ian@iandunn.name>
Date: Fri, 10 Jun 2022 13:56:03 -0700
Subject: [PATCH 1/2] Move search filters above input so not hidden behind
 autocomplete.

---
 .../themes/wporg-developer/scss/main.scss     |  2 +-
 .../themes/wporg-developer/searchform.php     | 29 +++++++++----------
 .../wporg-developer/stylesheets/main.css      |  2 +-
 3 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/source/wp-content/themes/wporg-developer/scss/main.scss b/source/wp-content/themes/wporg-developer/scss/main.scss
index 9f4790a8e..dbce1b404 100644
--- a/source/wp-content/themes/wporg-developer/scss/main.scss
+++ b/source/wp-content/themes/wporg-developer/scss/main.scss
@@ -2922,7 +2922,7 @@ button.code-tab.is-active {
 	}
 
 	&.search-wrap-embedded .search-post-type {
-		margin-top: 2rem;
+		margin-bottom: 2rem;
 		justify-content: space-between;
 		color: $color-white;
 		max-width: 450px;
diff --git a/source/wp-content/themes/wporg-developer/searchform.php b/source/wp-content/themes/wporg-developer/searchform.php
index 40e26d17c..19f260f1b 100644
--- a/source/wp-content/themes/wporg-developer/searchform.php
+++ b/source/wp-content/themes/wporg-developer/searchform.php
@@ -30,17 +30,11 @@
 ?>
 <div class="search-wrap <?php echo esc_attr( $classes ); ?>">
 	<form role="search" method="get" class="searchform <?php echo esc_attr( $form_class ); ?>" action="<?php echo esc_url( $search_url ); ?>">
-		<div class="search-field">
-			<input type="search" id="search-field" placeholder="<?php echo esc_attr( $placeholder ); ?>" value="<?php echo esc_attr( get_search_query() ); ?>" name="s">
-			<button class="button-search" aria-label="<?php esc_html_e( 'Search', 'wporg' ); ?>">
-				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" role="img" aria-hidden="true" focusable="false"><path d="M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z"></path></svg>	
-			</button>
-		</div>
-	<?php if ( $show_filters ) : ?>
 
-		<div class="search-post-type">
-			<span><?php _e( 'Filter by type:', 'wporg' ); ?></span>
-			<?php
+		<?php if ( $show_filters ) : ?>
+			<div class="search-post-type">
+				<span><?php _e( 'Filter by type:', 'wporg' ); ?></span>
+				<?php
 				$search_post_types = array(
 					'wp-parser-function' => __( 'Functions', 'wporg' ),
 					'wp-parser-hook'     => __( 'Hooks', 'wporg' ),
@@ -61,13 +55,18 @@
 					?>
 					<div>
 						<input id="<?php echo esc_attr( $post_type ); ?>" type="checkbox" name="post_type[]" value="<?php echo esc_attr( $post_type ); ?>" <?php echo $checked; ?> />
-						<label for="<?php echo esc_attr( $post_type ); ?>"><?php echo $label; ?></label>	
+						<label for="<?php echo esc_attr( $post_type ); ?>"><?php echo $label; ?></label>
 					</div>
-						
-			<?php } ?>
-		</div>
+				<?php } ?>
+			</div>
+		<?php endif; ?>
 
-	<?php endif; ?>
+		<div class="search-field">
+			<input type="search" id="search-field" placeholder="<?php echo esc_attr( $placeholder ); ?>" value="<?php echo esc_attr( get_search_query() ); ?>" name="s">
+			<button class="button-search" aria-label="<?php esc_html_e( 'Search', 'wporg' ); ?>">
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" role="img" aria-hidden="true" focusable="false"><path d="M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z"></path></svg>
+			</button>
+		</div>
 
 	</form>
 </div>
diff --git a/source/wp-content/themes/wporg-developer/stylesheets/main.css b/source/wp-content/themes/wporg-developer/stylesheets/main.css
index 22d97ca23..c1fc0c5cd 100644
--- a/source/wp-content/themes/wporg-developer/stylesheets/main.css
+++ b/source/wp-content/themes/wporg-developer/stylesheets/main.css
@@ -3563,7 +3563,7 @@ button.code-tab.is-active {
 }
 
 .search-wrap.search-wrap-embedded .search-post-type {
-  margin-top: 2rem;
+  margin-bottom: 2rem;
   justify-content: space-between;
   color: #fff;
   max-width: 450px;

From e13bbdbff4016a74027d060c680210a6769ced4b Mon Sep 17 00:00:00 2001
From: Ian Dunn <ian@iandunn.name>
Date: Fri, 10 Jun 2022 13:57:08 -0700
Subject: [PATCH 2/2] Prevent search results horizontal scrolling and overflow

---
 .../themes/wporg-developer/scss/main.scss       |  6 ++++++
 .../stylesheets/autocomplete.css                | 17 ++++++++++++++---
 .../themes/wporg-developer/stylesheets/main.css | 11 +++++++++++
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/source/wp-content/themes/wporg-developer/scss/main.scss b/source/wp-content/themes/wporg-developer/scss/main.scss
index dbce1b404..e62e0ab13 100644
--- 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
index 571fcd1f8..ee590f5b6 100644
--- 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
index c1fc0c5cd..bb23fb7bf 100644
--- a/source/wp-content/themes/wporg-developer/stylesheets/main.css
+++ b/source/wp-content/themes/wporg-developer/stylesheets/main.css
@@ -2382,6 +2382,10 @@ a.screen-reader-text:focus,
   }
 }
 
+.site-branding.has-actions .site-title {
+  margin-right: 20px;
+}
+
 @media screen and (max-width: 500px) {
   .site-branding.has-actions .site-title {
     margin-bottom: 2rem;
@@ -3552,10 +3556,17 @@ button.code-tab.is-active {
 }
 
 .search-wrap.search-wrap-inline .search-field {
+  width: calc(100vw - 60px);
   margin: 0;
   border: none;
 }
 
+@media (min-width: 501px) {
+  .search-wrap.search-wrap-inline .search-field {
+    width: 100%;
+  }
+}
+
 .search-wrap.search-wrap-embedded .search-field {
   margin-bottom: 0;
   max-width: 400px;