From 483f017d8ddecd4c49b46fee100f9a796876203c Mon Sep 17 00:00:00 2001
From: Daniel Dudzic <d.dudzic@syde.com>
Date: Tue, 17 Sep 2024 14:13:29 +0200
Subject: [PATCH] Make submit button full width on mobile

---
 .../ppcp-axo-block/resources/css/gateway.scss | 39 +++++++++++++++----
 1 file changed, 32 insertions(+), 7 deletions(-)

diff --git a/modules/ppcp-axo-block/resources/css/gateway.scss b/modules/ppcp-axo-block/resources/css/gateway.scss
index 072b90d83..24987cf52 100644
--- a/modules/ppcp-axo-block/resources/css/gateway.scss
+++ b/modules/ppcp-axo-block/resources/css/gateway.scss
@@ -138,11 +138,12 @@ $fast-transition-duration: 0.5s;
 	.wp-block-woocommerce-checkout-contact-information-block .wc-block-components-text-input {
 		display: grid;
 		grid-template-areas:
-      "input button"
-      "watermark watermark"
-      "error error";
-		grid-template-columns: 1fr auto;
-		gap: 6px 8px;
+     "input"
+     "button"
+     "watermark"
+     "error";
+		grid-template-columns: 1fr;
+		gap: 6px;
 		align-items: start;
 
 		input[type="email"] {
@@ -152,16 +153,17 @@ $fast-transition-duration: 0.5s;
 	}
 
 	#email {
-		align-self: center;
+		align-self: stretch;
 	}
 
 	// 4.5 Email Submit Button
 	.wc-block-axo-email-submit-button-container {
 		grid-area: button;
-		align-self: center;
+		align-self: stretch;
 
 		.wc-block-components-button {
 			white-space: nowrap;
+			width: 100%;
 		}
 	}
 
@@ -177,6 +179,29 @@ $fast-transition-duration: 0.5s;
 		width: 100%;
 		margin-top: 4px;
 	}
+
+	@media (min-width: 783px) {
+		.wp-block-woocommerce-checkout-contact-information-block .wc-block-components-text-input {
+			grid-template-areas:
+         "input button"
+         "watermark watermark"
+         "error error";
+			grid-template-columns: 1fr auto;
+			gap: 6px 8px;
+		}
+
+		#email {
+			align-self: center;
+		}
+
+		.wc-block-axo-email-submit-button-container {
+			align-self: center;
+
+			.wc-block-components-button {
+				width: auto;
+			}
+		}
+	}
 }
 
 // 5. Shipping/Card Change Link