Edit Post: Fix Welcome Guide modal display for Internet Explorer (#19201

)

* Components: Remove guide contents centering

Doesn't appear to be needed, and causes overflow issues in IE due to Flexbox bug

See: https://github.com/philipwalton/flexbugs#flexbug-2

* Components: Use explicit display for guide finish button

* Components: Ensure modal is styled as positioned element

* Edit Post: Vertically center welcome guide image

packages/components/src/guide/style.scss

@@ -11,7 +11,6 @@
 	}
 
 	&__container {
-		align-items: center;
 		display: flex;
 		flex-direction: column;
 		margin-top: -$header-height;
@@ -107,7 +106,7 @@
 		right: 0;
 
 		@include break-small() {
-			display: unset;
+			display: block;
 		}
 	}
 

packages/components/src/modal/style.scss

@@ -68,9 +68,13 @@
 	background: $white;
 	align-items: center;
 	height: $header-height;
+	z-index: z-index(".components-modal__header");
+	// For z-index to take effect, the element must be positioned. A "sticky"
+	// element is positioned, but since this is not supported in IE11,
+	// "relative" is used as a fallback.
+	position: relative;
 	position: sticky;
 	top: 0;
-	z-index: z-index(".components-modal__header");
 	margin: 0 -#{$grid-size-xlarge} $grid-size-xlarge;
 
 	// Rules inside this query are only run by Microsoft Edge.

packages/edit-post/src/components/welcome-guide/style.scss

@@ -28,10 +28,12 @@
 		margin: $grid-size 0;
 
 		@include break-small() {
-			height: $image-height;
-			left: 0;
 			position: absolute;
+			left: 0;
+			top: 50%;
+			height: $image-height;
 			width: $image-width;
+			margin-top: -0.5 * $image-height;
 		}
 	}