Fix credit card validation errors alignment (#2662)

* Use same margin-bottom in credit card input as in checkout inputs

* Set cursor:text for Checkout input labels

* Increase line height of expiry and cvc input validation errors in large viewports

* Increase height of expiry and cvc input validation errors in small viewports

Author: Aljullu

assets/js/base/components/payment-methods/style.scss

@@ -55,7 +55,7 @@
 
 .wc-block-gateway-container {
 	position: relative;
-	margin-bottom: $gap;
+	margin-bottom: em($gap-large);
 	white-space: nowrap;
 
 	&.wc-card-number-element {
@@ -81,6 +81,7 @@
 		box-sizing: border-box;
 		height: 3em;
 		color: $input-text-active;
+		cursor: text;
 
 		&:focus {
 			background-color: #fff;
@@ -106,6 +107,7 @@
 		overflow: hidden;
 		text-overflow: ellipsis;
 		max-width: calc(100% - #{2 * $gap});
+		cursor: text;
 
 		@media screen and (prefers-reduced-motion: reduce) {
 			transition: none;
@@ -149,6 +151,29 @@
 	}
 }
 
+// These elements have available space below, so we can display errors with a
+// larger line height.
+.is-medium,
+.is-large {
+	.wc-card-expiry-element,
+	.wc-card-cvc-element {
+		.wc-block-form-input-validation-error > p {
+			line-height: 16px;
+			padding-top: 4px;
+		}
+	}
+}
+
+.is-mobile,
+.is-small {
+	.wc-card-expiry-element,
+	.wc-card-cvc-element {
+		.wc-block-form-input-validation-error > p {
+			min-height: 28px;
+		}
+	}
+}
+
 .wc-blocks-credit-card-images {
 	padding-top: $gap-small;
 	display: flex;

assets/js/base/components/text-input/style.scss

@@ -18,6 +18,7 @@
 		overflow: hidden;
 		text-overflow: ellipsis;
 		max-width: calc(100% - #{2 * $gap});
+		cursor: text;
 
 		@media screen and (prefers-reduced-motion: reduce) {
 			transition: none;