From d074ff1d4c4d6f759117203e2a073426fc45f138 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Mon, 8 Jul 2024 16:38:38 +0900
Subject: [PATCH] Fix accelerator error message positioning

---
 .../accelerate-checkout.component.html                    | 2 +-
 .../accelerate-checkout.component.scss                    | 8 +++++++-
 .../components/mempool-error/mempool-error.component.html | 2 +-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html
index 21488ff52..a7f652b7c 100644
--- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html
+++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html
@@ -564,7 +564,7 @@
         <span i18n="transaction.accelerate|Accelerate button label">Accelerate</span>
       </button>
       @if (quoteError || cantPayReason) {
-        <span class="btn-error"><app-mempool-error [error]="quoteError || cantPayReason" [textOnly]="true" alertClass=""></app-mempool-error></span>
+        <div class="btn-error-wrapper"><span class="btn-error"><app-mempool-error [error]="quoteError || cantPayReason" [textOnly]="true" alertClass=""></app-mempool-error></span></div>
       }
     </div>
   }
diff --git a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss
index ec0fc7e6e..4e7be2691 100644
--- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss
+++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss
@@ -195,5 +195,11 @@
   right: 0;
   font-size: 12px;
   color: var(--red);
-  white-space: nowrap;
+  text-align: center;
+  width: 200px;
+  white-space: normal;
+}
+
+.btn-error-wrapper {
+  height: 26px;
 }
\ No newline at end of file
diff --git a/frontend/src/app/shared/components/mempool-error/mempool-error.component.html b/frontend/src/app/shared/components/mempool-error/mempool-error.component.html
index 5ef745d37..a6c2d00f2 100644
--- a/frontend/src/app/shared/components/mempool-error/mempool-error.component.html
+++ b/frontend/src/app/shared/components/mempool-error/mempool-error.component.html
@@ -6,4 +6,4 @@
   </span>
 }
 
-<ng-template #lowBalance i18n="accelerator.low-balance">Your balance is too low. Please <a style="color:#105fb0" href="/services/accelerator/overview">top up your account</a>.</ng-template>
+<ng-template #lowBalance i18n="accelerator.low-balance">Your balance is too low.<br/>Please <a style="color:#105fb0" href="/services/accelerator/overview">top up your account</a>.</ng-template>