From 0571b7366b8bfd8c06666eb4599ff7867bc8c2c9 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Mon, 17 Apr 2023 09:33:09 +0100
Subject: [PATCH] Increase pattern modal dimensions when creating a new
 template (#49722)

* Increase pattern modal dimensions

* grid -> flex

* 3 columns on medium, 4 columns on wide

* modal height
---
 .../start-template-options/style.scss         | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/edit-site/src/components/start-template-options/style.scss b/packages/edit-site/src/components/start-template-options/style.scss
index 78688fef4efbd4..ebbc1d7421941e 100644
--- a/packages/edit-site/src/components/start-template-options/style.scss
+++ b/packages/edit-site/src/components/start-template-options/style.scss
@@ -3,28 +3,36 @@
 	// and height are used instead of max-(width/height).
 	@include break-small() {
 		width: calc(100% - #{ $grid-unit-20 * 2 });
-		height: calc(100% - #{ $header-height * 2 });
+		height: auto;
 	}
 	@include break-medium() {
-		width: 50%;
+		width: 95%;
 	}
 	@include break-large() {
-		height: fit-content;
+		max-height: 95%;
 	}
 }
 
 .edit-site-start-template-options__modal-content .block-editor-block-patterns-list {
-	display: grid;
+	display: flex;
+	flex-wrap: wrap;
+	gap: $grid-unit-30;
 	width: 100%;
 	margin-top: $grid-unit-05;
-	gap: $grid-unit-30;
-	grid-template-columns: repeat(auto-fit, minmax(min(100%/2, max(240px, 100%/10)), 1fr));
 
 	.block-editor-block-patterns-list__list-item {
 		break-inside: avoid-column;
 		margin-bottom: 0;
-		width: 100%;
 		aspect-ratio: 3/4;
+		width: calc(50% - #{ $grid-unit-30 * 1 } / 2);
+
+		@include break-medium() {
+			width: calc(33.333% - #{ $grid-unit-30 * 2 } / 3);
+		}
+
+		@include break-wide() {
+			width: calc(25% - #{ $grid-unit-30 * 3 } / 4);
+		}
 
 		.block-editor-block-preview__container {
 			height: 100%;