Increase dimensions of the pattern modal that appears when creating a…

… new page (#49859)

packages/edit-post/src/components/start-page-options/style.scss

@@ -2,14 +2,14 @@
 	// To keep modal dimensions consistent as subsections are navigated, width
 	// 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 });
+		width: 95vw;
+		height: 95vh;
+		max-height: none;
 	}
 	@include break-medium() {
-		width: $break-medium - $grid-unit-20 * 2;
-	}
-	@include break-large() {
-		height: 70%;
+		width: 90vw;
+		height: 90vh;
+		max-width: none;
 	}
 }
 
@@ -18,6 +18,17 @@
 	column-count: 2;
 	column-gap: $grid-unit-30;
 
+	// Small top padding required to avoid cutting off the visible outline when hovering items
+	padding-top: $border-width-focus;
+
+	@include break-medium() {
+		column-count: 3;
+	}
+
+	@include break-wide() {
+		column-count: 4;
+	}
+
 	.block-editor-block-patterns-list__list-item {
 		break-inside: avoid-column;
 		margin-bottom: $grid-unit-30;