From 67d2c9efbc7ee2edc509270d6bc5f1cea4b15724 Mon Sep 17 00:00:00 2001
From: mparvazi <m.parvazi@yahoo.com>
Date: Fri, 8 Jul 2022 20:50:01 +0430
Subject: [PATCH 1/2] Fix email subscription form UX on XS screen

---
 src/scss/custom/modules/_emailsubscriptions.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/scss/custom/modules/_emailsubscriptions.scss b/src/scss/custom/modules/_emailsubscriptions.scss
index 763251b9b..728c0a104 100644
--- a/src/scss/custom/modules/_emailsubscriptions.scss
+++ b/src/scss/custom/modules/_emailsubscriptions.scss
@@ -22,6 +22,12 @@ $email-input-border-color: $input-border-color !default;
       display: flex;
       align-items: center;
 
+      @include media-breakpoint-down(sm) {
+        flex-direction: column;
+        row-gap: 0.5rem;
+        align-items: start;
+      }
+
       input[type="email"] {
         padding: 0.5rem 1.25rem;
         margin-right: 0.5rem;

From 7c3ceee87d45d263040326007a80f709e83f54f9 Mon Sep 17 00:00:00 2001
From: mparvazi <m.parvazi@yahoo.com>
Date: Mon, 25 Jul 2022 11:30:00 +0430
Subject: [PATCH 2/2] Remove spaces to make container wider for XS media

---
 .../views/templates/hook/ps_emailsubscription.tpl          | 4 ++--
 src/scss/custom/modules/_emailsubscriptions.scss           | 7 -------
 2 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/modules/ps_emailsubscription/views/templates/hook/ps_emailsubscription.tpl b/modules/ps_emailsubscription/views/templates/hook/ps_emailsubscription.tpl
index 5ad97c26d..11561f371 100644
--- a/modules/ps_emailsubscription/views/templates/hook/ps_emailsubscription.tpl
+++ b/modules/ps_emailsubscription/views/templates/hook/ps_emailsubscription.tpl
@@ -5,8 +5,8 @@
 
 {$componentName = 'email-subscription'}
 
-<div class="{$componentName} py-4">
-  <div class="container">
+<div class="{$componentName} px-0 py-4">
+  <div class="container px-1">
     <div class="{$componentName}__content row">
       <div class="{$componentName}__content__left col-md-5">
         <p class="{$componentName}__label">{l s='Get our latest news and special sales' d='Shop.Theme.Global'}</p>
diff --git a/src/scss/custom/modules/_emailsubscriptions.scss b/src/scss/custom/modules/_emailsubscriptions.scss
index 728c0a104..fffc6cbcc 100644
--- a/src/scss/custom/modules/_emailsubscriptions.scss
+++ b/src/scss/custom/modules/_emailsubscriptions.scss
@@ -22,14 +22,7 @@ $email-input-border-color: $input-border-color !default;
       display: flex;
       align-items: center;
 
-      @include media-breakpoint-down(sm) {
-        flex-direction: column;
-        row-gap: 0.5rem;
-        align-items: start;
-      }
-
       input[type="email"] {
-        padding: 0.5rem 1.25rem;
         margin-right: 0.5rem;
         color: $email-input-color;
         border: 1px solid $email-input-color;