Fix modals in Edge. (#12241)

This PR fixes #11585.

Edge has a buggy implementation of `position: sticky;`, which includes issues with flickering, z-index, and parent container paddings. See more at https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17555420/.

This is mainly an issue in deeply nested elements, it seems.

This PR includes an edge only hack that overrides the sticky and uses `position: fixed;` instead.

packages/components/src/modal/style.scss

@@ -66,13 +66,20 @@
 	justify-content: space-between;
 	background: $white;
 	align-items: center;
-	box-sizing: border-box;
 	height: $header-height;
 	position: sticky;
 	top: 0;
 	z-index: z-index(".components-modal__header");
 	margin: 0 -#{ $grid-size-large } $grid-size-large;
 
+	// Rules inside this query are only run by Microsoft Edge.
+	// Edge has bugs around position: sticky;, so it needs a separate top rule.
+	// See also https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17555420/.
+	@supports (-ms-ime-align:auto) {
+		position: fixed;
+		width: 100%;
+	}
+
 	.components-modal__header-heading {
 		font-size: 1em;
 		font-weight: 400;
@@ -107,4 +114,10 @@
 	box-sizing: border-box;
 	height: 100%;
 	padding: 0 $grid-size-large $grid-size-large;
+
+	// Rules inside this query are only run by Microsoft Edge.
+	// This is a companion top padding to the fixed rule in line 77.
+	@supports (-ms-ime-align:auto) {
+		padding-top: $header-height;
+	}
 }