Make all notice-list notices the same min-height (#16891)

* Make all notice-list notices the same min-height.

* Undo all the absolute positioning changes.

This reverts commit ef2af48.

* Try using flexbox to properly center things.

* Minor: Adjust dismiss button margin.

* Add code comments.

packages/components/src/notice/style.scss

@@ -1,10 +1,12 @@
 .components-notice {
+	display: flex;
 	font-family: $default-font;
 	font-size: $default-font-size;
 	background-color: $blue-medium-100;
 	border-left: 4px solid $blue-medium-500;
 	margin: 5px 15px 2px;
 	padding: 8px 12px;
+	align-items: center;
 
 	&.is-dismissible {
 		padding-right: 36px;
@@ -28,6 +30,7 @@
 }
 
 .components-notice__content {
+	flex-grow: 1;
 	margin: $grid-size-small #{ $icon-button-size-small + $border-width } $grid-size-small 0;
 }
 
@@ -42,10 +45,11 @@
 }
 
 .components-notice__dismiss {
-	position: absolute;
-	top: 0;
-	right: 0;
-	color: $dark-gray-500;
+	color: $dark-gray-300;
+
+	// Place the dismiss button at the top of the container, even when text wraps onto two lines.
+	align-self: flex-start;
+	flex-shrink: 0;
 
 	&:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover,
 	&:not(:disabled):not([aria-disabled="true"]):not(.is-default):active,
@@ -65,7 +69,14 @@
 	z-index: z-index(".components-notice-list");
 
 	.components-notice__content {
-		margin-top: 1em;
-		margin-bottom: 1em;
+		margin-top: $grid-size + $grid-size-small;
+		margin-bottom: $grid-size + $grid-size-small;
+		line-height: 1.6;
+	}
+
+	// Reduce margins on inline buttons so that they don't add too much extra line-height.
+	.components-notice__action.components-button {
+		margin-top: -2px;
+		margin-bottom: -2px;
 	}
 }

packages/editor/src/components/editor-notices/style.scss

@@ -25,10 +25,13 @@
 		box-sizing: border-box;
 		margin: 0 0 5px;
 		padding: 6px 12px;
-		min-height: $panel-header-height;
 
+		// Min-height matches the height of a single-line notice with an action button.
+		min-height: $header-height + $grid-size-small;
+
+		// Margins ensure that the dismiss button aligns to the center of the first line of text.
 		.components-notice__dismiss {
-			margin: 10px 5px;
+			margin: 6px -5px 6px 5px;
 		}
 	}
 }