From 0f004b877c0f8096b1c775bb9c2195794131ba1e Mon Sep 17 00:00:00 2001
From: Ren <18050944+renintw@users.noreply.github.com>
Date: Mon, 11 Dec 2023 14:44:03 +0800
Subject: [PATCH] Events: Breakpoint change for a cleaner cover (#1151)

---
 .../postcss/base/breakpoints.pcss             |  2 +-
 .../postcss/blocks/wporg-google-map.pcss      | 36 +++++++++++++------
 .../postcss/page/front-page/cover.pcss        | 18 ++++++++--
 3 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/public_html/wp-content/themes/wporg-events-2023/postcss/base/breakpoints.pcss b/public_html/wp-content/themes/wporg-events-2023/postcss/base/breakpoints.pcss
index f1be55bb19..06d7e3e256 100644
--- a/public_html/wp-content/themes/wporg-events-2023/postcss/base/breakpoints.pcss
+++ b/public_html/wp-content/themes/wporg-events-2023/postcss/base/breakpoints.pcss
@@ -22,7 +22,7 @@
  * wporg-parent-2021
  * @link https://github.com/WordPress/wporg-parent-2021/blob/trunk/source/wp-content/themes/wporg-parent-2021/sass/base/_breakpoints.scss
  */
-@custom-media --small-only (max-width: 559px);
+@custom-media --small-only (max-width: 599px);
 @custom-media --giant (min-width: 2000px);
 
 /*
diff --git a/public_html/wp-content/themes/wporg-events-2023/postcss/blocks/wporg-google-map.pcss b/public_html/wp-content/themes/wporg-events-2023/postcss/blocks/wporg-google-map.pcss
index 6767b7f865..d653987eab 100644
--- a/public_html/wp-content/themes/wporg-events-2023/postcss/blocks/wporg-google-map.pcss
+++ b/public_html/wp-content/themes/wporg-events-2023/postcss/blocks/wporg-google-map.pcss
@@ -9,15 +9,14 @@
 	list-style: none;
 	font-size: var(--wp--preset--font-size--small);
 
-	@media (--medium) {
+	@media (--large) {
 		display: grid;
 		align-items: start;
 		gap: var(--wp--preset--spacing--20);
-		grid-template-columns: 45% 1fr 1fr;
+		grid-template-columns: 45% 1fr 2fr;
 	}
 
 	@media (--xlarge) {
-		grid-template-columns: 50% 1fr 1fr;
 		font-size: var(--wp--preset--font-size--normal);
 	}
 
@@ -54,18 +53,27 @@
 		text-decoration: none;
 	}
 
-	@media (--medium-small) {
-		.wporg-marker-list-item__location {
+
+	.wporg-marker-list-item__location {
+
+		@media (--medium-small) {
 			margin-top: 2px;
 			margin-bottom: -2px;
 		}
+
+		@media (--small) {
+			display: inline;
+		}
 	}
 
 	.wporg-marker-list-item__date-time {
-		@media (--medium) {
-			display: block;
-			text-align: right;
 
+		@media (--small) {
+			display: inline-flex;
+			justify-content: right;
+		}
+
+		@media (--medium) {
 			.wporg-google-map__date {
 				display: block;
 			}
@@ -84,7 +92,8 @@
 		position: relative;
 	}
 
-	.wporg-google-map__date:after {
+	.wporg-marker-list-item__location::after,
+	.wporg-google-map__date::after {
 		content: '';
 		margin-top: -1px; /* vertical-middle doesn't subtract the size of the element */
 		margin-left: 10px;
@@ -97,8 +106,13 @@
 		vertical-align: middle;
 	}
 
-	@media (--medium) {
-		.wporg-google-map__date:after {
+	.wporg-marker-list-item__location::after {
+
+		@media (--small-only) {
+			display: none;
+		}
+
+		@media (--large) {
 			display: none;
 		}
 	}
diff --git a/public_html/wp-content/themes/wporg-events-2023/postcss/page/front-page/cover.pcss b/public_html/wp-content/themes/wporg-events-2023/postcss/page/front-page/cover.pcss
index 3b97cf7dd9..034d959e18 100644
--- a/public_html/wp-content/themes/wporg-events-2023/postcss/page/front-page/cover.pcss
+++ b/public_html/wp-content/themes/wporg-events-2023/postcss/page/front-page/cover.pcss
@@ -6,7 +6,22 @@
 	}
 
 	@media (--medium) {
+		.wp-block-columns {
+			flex-wrap: wrap !important;
+
+			.wp-block-column {
+				flex-grow: 1 !important;
+			}
+		}
+	}
+
+	@media (--large) {
 		padding-left: var(--wp--preset--spacing--edge-space);
+		padding-right: var(--wp--preset--spacing--edge-space);
+
+		.wp-block-columns {
+			flex-wrap: nowrap !important;
+		}
 
 		.wp-block-columns .wp-block-column:first-child {
 			padding-left: 0;
@@ -23,9 +38,6 @@
 	}
 
 	@media (--huge) {
-
-		padding-right: var(--wp--preset--spacing--edge-space);
-
 		.wp-block-columns .wp-block-column:first-child {
 			flex-basis: 33% !important;
 		}