From 7c9ffa6db0d001c5edcf836b0143601a8f7548aa Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Mon, 18 Sep 2023 14:51:19 -0400
Subject: [PATCH] Query Filters: Filters should scroll horizontally on very
 small screens

---
 .../patterns/_site-grid-featured.php                   |  4 ++--
 .../themes/wporg-showcase-2022/patterns/_site-grid.php |  4 ++--
 .../themes/wporg-showcase-2022/src/style/style.scss    | 10 ++++++++++
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/source/wp-content/themes/wporg-showcase-2022/patterns/_site-grid-featured.php b/source/wp-content/themes/wporg-showcase-2022/patterns/_site-grid-featured.php
index 454fb3b0..452a683e 100644
--- a/source/wp-content/themes/wporg-showcase-2022/patterns/_site-grid-featured.php
+++ b/source/wp-content/themes/wporg-showcase-2022/patterns/_site-grid-featured.php
@@ -20,8 +20,8 @@
 		</div>
 		<!-- /wp:group -->
 
-		<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
-		<div class="wp-block-group">
+		<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","flexWrap":"nowrap"},"className":"wporg-query-filters"} -->
+		<div class="wp-block-group wporg-query-filters">
 			<!-- wp:wporg/query-filter {"key":"post_tag"} /-->
 			<!-- wp:wporg/query-filter {"key":"flavor"} /-->
 			<!-- wp:wporg/query-filter {"key":"category"} /-->
diff --git a/source/wp-content/themes/wporg-showcase-2022/patterns/_site-grid.php b/source/wp-content/themes/wporg-showcase-2022/patterns/_site-grid.php
index 1cf90b67..45eb77e5 100644
--- a/source/wp-content/themes/wporg-showcase-2022/patterns/_site-grid.php
+++ b/source/wp-content/themes/wporg-showcase-2022/patterns/_site-grid.php
@@ -14,8 +14,8 @@
 	<div class="wp-block-group alignwide">
 		<!-- wp:search {"showLabel":false,"placeholder":"<?php esc_html_e( 'Search sites…', 'wporg' ); ?>","width":100,"widthUnit":"%","buttonText":"<?php esc_html_e( 'Search', 'wporg' ); ?>","buttonPosition":"button-inside","buttonUseIcon":true} /-->
 
-		<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
-		<div class="wp-block-group">
+		<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","flexWrap":"nowrap"},"className":"wporg-query-filters"} -->
+		<div class="wp-block-group wporg-query-filters">
 			<!-- wp:wporg/query-filter {"key":"post_tag"} /-->
 			<!-- wp:wporg/query-filter {"key":"flavor"} /-->
 			<!-- wp:wporg/query-filter {"key":"category"} /-->
diff --git a/source/wp-content/themes/wporg-showcase-2022/src/style/style.scss b/source/wp-content/themes/wporg-showcase-2022/src/style/style.scss
index 3fdeec88..93f1e9aa 100644
--- a/source/wp-content/themes/wporg-showcase-2022/src/style/style.scss
+++ b/source/wp-content/themes/wporg-showcase-2022/src/style/style.scss
@@ -65,6 +65,7 @@ a:where(:not(.wp-element-button)):focus-visible {
 .wp-block-query .is-layout-grid {
 	.wp-block-post-title {
 		flex-shrink: 0;
+		max-width: 100%;
 	}
 
 	.wp-block-post-terms {
@@ -92,6 +93,15 @@ a:where(:not(.wp-element-button)):focus-visible {
 	}
 }
 
+.wp-block-search {
+	max-width: 100%;
+}
+
+.wporg-query-filters {
+	overflow-y: scroll;
+	max-width: 100%;
+}
+
 /* Page footer */
 @media (max-width: 781px) {
 	.wp-block-columns.is-page-footer > .wp-block-column:first-child {