From 652f88770e655992c398629879fb1f58928b2e11 Mon Sep 17 00:00:00 2001
From: Miguel Medeiros <miguel@miguelmedeiros.com.br>
Date: Wed, 7 Jul 2021 16:20:17 -0300
Subject: [PATCH] Fix mouse over tooltip width. (#614)

---
 .../app/components/fees-box/fees-box.component.html  | 12 ++++++------
 frontend/src/styles.scss                             |  6 ++++++
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/components/fees-box/fees-box.component.html b/frontend/src/app/components/fees-box/fees-box.component.html
index 9fe2e66e3..a00ca4395 100644
--- a/frontend/src/app/components/fees-box/fees-box.component.html
+++ b/frontend/src/app/components/fees-box/fees-box.component.html
@@ -2,20 +2,20 @@
   <div class="fee-estimation-container" *ngIf="(isLoadingWebSocket$ | async) === false && (feeEstimations$ | async) as feeEstimations; else loadingFees">
     <div class="item">
       <h5 class="card-title" i18n="fees-box.low-priority">Low priority</h5>
-      <div class="card-text">
-        <div class="fee-text">{{ feeEstimations.hourFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></div> <span class="fiat"><app-fiat [value]="feeEstimations.hourFee * 140" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat></span>
+      <div class="card-text" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom">
+        <div class="fee-text">{{ feeEstimations.hourFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></div> <span class="fiat"><app-fiat [value]="feeEstimations.hourFee * 140" ></app-fiat></span>
       </div>
     </div>
     <div class="item">
       <h5 class="card-title" i18n="fees-box.medium-priority">Medium priority</h5>
-      <div class="card-text">
-        <div class="fee-text">{{ feeEstimations.halfHourFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></div> <span class="fiat"><app-fiat [value]="feeEstimations.halfHourFee * 140" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat></span>
+      <div class="card-text" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom">
+        <div class="fee-text">{{ feeEstimations.halfHourFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></div> <span class="fiat"><app-fiat [value]="feeEstimations.halfHourFee * 140" ></app-fiat></span>
       </div>
     </div>
     <div class="item">
       <h5 class="card-title" i18n="fees-box.high-priority">High priority</h5>
-      <div class="card-text">
-        <div class="fee-text">{{ feeEstimations.fastestFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></div> <span class="fiat"><app-fiat [value]="feeEstimations.fastestFee * 140" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat></span>
+      <div class="card-text" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom">
+        <div class="fee-text">{{ feeEstimations.fastestFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></div> <span class="fiat"><app-fiat [value]="feeEstimations.fastestFee * 140" ></app-fiat></span>
       </div>
     </div>
   </div>
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 4d1d5072c..5b6f6b9d4 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -692,4 +692,10 @@ th {
       padding-left: 5px;
     }
   }
+}
+
+.fee-estimation-wrapper {
+  .tooltip.show {
+    width: 220px;
+  }
 }
\ No newline at end of file