From c1afee57e9672a6044c1b38b0e516520705fc62c Mon Sep 17 00:00:00 2001
From: Sam Najian <sam.najian@automattic.com>
Date: Fri, 20 Jan 2023 12:14:29 +0100
Subject: [PATCH] Fix bug causing the percent sign to move on scroll

[MAILPOET-4678]
---
 .../css/src/components-editor/content-blocks/_coupon.scss   | 6 +++++-
 .../views/newsletter/templates/blocks/coupon/settings.hbs   | 4 ++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/mailpoet/assets/css/src/components-editor/content-blocks/_coupon.scss b/mailpoet/assets/css/src/components-editor/content-blocks/_coupon.scss
index 4701d5c35b..9637975104 100644
--- a/mailpoet/assets/css/src/components-editor/content-blocks/_coupon.scss
+++ b/mailpoet/assets/css/src/components-editor/content-blocks/_coupon.scss
@@ -27,10 +27,14 @@
   }
 }
 
+.coupon_amount_wrapper {
+  position: relative;
+}
+
 .amount_percentage_sign {
   font-size: 18px;
   font-weight: bold;
-  left: 140px;
+  left: 160px; // .mailpoet_input_medium width + 10px
   line-height: 30px;
   position: absolute;
 }
diff --git a/mailpoet/views/newsletter/templates/blocks/coupon/settings.hbs b/mailpoet/views/newsletter/templates/blocks/coupon/settings.hbs
index 9b4553ab97..ddc48c19d4 100644
--- a/mailpoet/views/newsletter/templates/blocks/coupon/settings.hbs
+++ b/mailpoet/views/newsletter/templates/blocks/coupon/settings.hbs
@@ -12,9 +12,9 @@
 <div class="mailpoet_form_field">
     <label>
         <div class="mailpoet_form_field_title mailpoet_form_field_title_inline"><%= __('Coupon amount') %></div>
-        <div>
+        <div class="coupon_amount_wrapper">
             {{#ifCond model.amountMax '===' 100}}
-                <span class="amount_percentage_sign">%</div>
+                <span class="amount_percentage_sign">%</span>
             {{/ifCond}}
             <input type="text" name="amount"  data-parsley-validate data-parsley-validation-threshold="0" data-parsley-required data-parsley-trigger="input"  data-parsley-type="digits" {{#ifCond model.amountMax '!==' null }} data-parsley-maxlength="{{ model.amountMax }}" max="{{ model.amountMax }}" {{/ifCond}}   class="mailpoet_input mailpoet_field_coupon_amount mailpoet_input_medium" value="{{ model.amount }}" min="0" />
         </div>