Forms: horizontal button align (#45188)

* better alignment for buttons sharing space with fields

* changelog

* use min-height so to allow buttons to grow with wrapping text and line jumps

* allow flex grow/shrink on form blocks to allow better layout handling

* match min-height and width when __link is on a row stack, doesn't affect the actual width which is handled by its wrapper

Author: CGastrell

projects/packages/forms/changelog/test-forms-horizontal-button-align

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Forms: improve button alignment when field width allows wrapping the submit button

projects/packages/forms/src/blocks/contact-form/editor.scss

@@ -55,13 +55,28 @@
 		}
 
 		.wp-block {
-			flex: 0 0 100%;
+			flex: 1 1 100%;
 			margin-top: 0;
 			margin-bottom: 0;
 			max-width: 100%;
 
 			&.wp-block-jetpack-button {
 				flex-basis: auto;
+				min-height: var(--jetpack--contact-form--input-height, auto);
+				align-self: flex-end;
+				line-height: 1;
+
+				.wp-block-button__link {
+					min-height: var(--jetpack--contact-form--input-height, auto);
+				}
+			}
+
+			&.wp-block-group-is-layout-flex:not(.is-vertical) {
+				// when the button is on a row stack, we expect it to fill the width of the
+				// button block container (which is filling the provided column width)
+				.wp-block.wp-block-jetpack-button .wp-block-button__link {
+					width: 100%;
+				}
 			}
 
 			&.jetpack-field__width-25,

projects/packages/forms/src/contact-form/css/grunion.scss

@@ -346,7 +346,14 @@ that needs to mimic the input element styles */
 }
 
 .wp-block-jetpack-contact-form .wp-block-jetpack-button {
-	width: fit-content;
+	min-height: var(--jetpack--contact-form--input-height, auto);
+	align-self: flex-end;
+
+	.wp-block-button__link {
+		min-height: var(--jetpack--contact-form--input-height, auto);
+		padding: var(--jetpack--contact-form--input-padding);
+	}
+
 }
 
 .wp-block-jetpack-contact-form .wp-block-jetpack-button.aligncenter {
@@ -371,6 +378,7 @@ that needs to mimic the input element styles */
 .wp-block-jetpack-contact-form .grunion-field-wrap {
 	box-sizing: border-box;
 	position: relative;
+	flex: 1 1 100%;
 }
 
 .wp-block-jetpack-contact-form .grunion-field-width-25-wrap {