From 71fa2d67cbd207a4226be79b2744265d1f525a01 Mon Sep 17 00:00:00 2001
From: Miguel Medeiros <miguel@miguelmedeiros.com.br>
Date: Tue, 18 May 2021 11:56:42 -0300
Subject: [PATCH] Fix rbf alert css. (#525)

---
 .../components/transaction/transaction.component.html |  4 +++-
 .../components/transaction/transaction.component.scss |  3 +++
 frontend/src/styles.scss                              | 11 +++++++++++
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html
index 00a645379..2479861b2 100644
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@@ -2,13 +2,14 @@
 
   <div class="title-block">
     <div *ngIf="rbfTransaction" class="alert alert-mempool" role="alert">
-      <span i18n="transaction.rbf.replacement|RBF replacement">This transaction has been replaced by:</span>&nbsp;
+      <span i18n="transaction.rbf.replacement|RBF replacement">This transaction has been replaced by:</span>
       <a class="alert-link" [routerLink]="['/tx/' | relativeUrl, rbfTransaction.txid]" [state]="{ data: rbfTransaction }">
         <span class="d-inline d-lg-none">{{ rbfTransaction.txid | shortenString : 24 }}</span>
         <span class="d-none d-lg-inline">{{ rbfTransaction.txid }}</span>
       </a>
     </div>
   
+  <div class="flex">
     <h1 i18n="shared.transaction">Transaction</h1>
 
     <div class="tx-link">
@@ -31,6 +32,7 @@
         <button type="button" class="btn btn-sm btn-danger" i18n="transaction.unconfirmed|Transaction unconfirmed state">Unconfirmed</button>
       </ng-template>
     </div>
+  </div>
 
     <div class="clearfix"></div>
   </div>
diff --git a/frontend/src/app/components/transaction/transaction.component.scss b/frontend/src/app/components/transaction/transaction.component.scss
index f007735a5..719f06b5b 100644
--- a/frontend/src/app/components/transaction/transaction.component.scss
+++ b/frontend/src/app/components/transaction/transaction.component.scss
@@ -8,6 +8,9 @@
   border-top: 3px solid #FFF;
   width: 100%;
   padding-bottom: 30px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
   @media (min-width: 768px) {
   	padding-bottom: 0px;
   }
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 0c76ad6b1..4dd23d137 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -500,6 +500,17 @@ h1, h2, h3 {
   color: #ffffff;
   background-color: #653b9c;
   border-color: #3a1c61;
+  width: 100%;
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: space-between;
+  @media (min-width: 676px){
+    flex-direction: row;
+  }
+}
+
+.flex{
+	display: flex;
 }
 
 th {