Try adding some additional padding to the modal component. (#16690)

* Add additional padding to the modal component.

* Update block manager padding to match the new modal padding.

* Make ($grid-size * 3) into a variable

assets/stylesheets/_variables.scss

@@ -19,6 +19,7 @@ $mobile-text-min-font-size: 16px; // Any font size below 16px will cause Mobile
 $grid-size-small: 4px;
 $grid-size: 8px;
 $grid-size-large: 16px;
+$grid-size-xlarge: 24px;
 
 // Widths, heights & dimensions
 $panel-padding: 16px;

packages/components/src/modal/style.scss

@@ -61,7 +61,7 @@
 .components-modal__header {
 	box-sizing: border-box;
 	border-bottom: $border-width solid $light-gray-500;
-	padding: 0 $grid-size-large;
+	padding: 0 $grid-size-xlarge;
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
@@ -71,7 +71,7 @@
 	position: sticky;
 	top: 0;
 	z-index: z-index(".components-modal__header");
-	margin: 0 -#{ $grid-size-large } $grid-size-large;
+	margin: 0 -#{$grid-size-xlarge} $grid-size-xlarge;
 
 	// Rules inside this query are only run by Microsoft Edge.
 	// Edge has bugs around position: sticky;, so it needs a separate top rule.
@@ -114,7 +114,7 @@
 .components-modal__content {
 	box-sizing: border-box;
 	height: 100%;
-	padding: 0 $grid-size-large $grid-size-large;
+	padding: 0 $grid-size-xlarge $grid-size-xlarge;
 
 	// Rules inside this query are only run by Microsoft Edge.
 	// This is a companion top padding to the fixed rule in line 77.

packages/edit-post/src/components/manage-blocks-modal/style.scss

@@ -109,9 +109,9 @@
 .edit-post-manage-blocks-modal__results {
 	height: 100%;
 	overflow: auto;
-	margin-left: -1 * $grid-size-large;
-	margin-right: -1 * $grid-size-large;
-	padding-left: $grid-size-large;
-	padding-right: $grid-size-large;
+	margin-left: -$grid-size-xlarge;
+	margin-right: -$grid-size-xlarge;
+	padding-left: $grid-size-xlarge;
+	padding-right: $grid-size-xlarge;
 	border-top: $border-width solid $light-gray-500;
 }