From 9d0bfdfa88e22e64a192ef702bf7b017f6683233 Mon Sep 17 00:00:00 2001
From: ncois <nat.coisne@gmail.com>
Date: Fri, 17 Nov 2023 13:47:28 +0100
Subject: [PATCH 1/2] Increase tooltip width in mempool graphs

---
 .../incoming-transactions-graph.component.ts                  | 2 +-
 .../app/components/mempool-graph/mempool-graph.component.ts   | 2 +-
 frontend/src/styles.scss                                      | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts b/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
index 10fe22067..620e26857 100644
--- a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
+++ b/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
@@ -209,7 +209,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, On
           obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 80;
           return obj;
         },
-        extraCssText: `width: ${(['2h', '24h'].includes(this.windowPreference) || this.template === 'widget') ? '125px' : '135px'};
+        extraCssText: `width: ${(['2h', '24h'].includes(this.windowPreference) || this.template === 'widget') ? '125px' : '215px'};
                       background: transparent;
                       border: none;
                       box-shadow: none;`,
diff --git a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
index 435711e48..43a58a420 100644
--- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
+++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
@@ -230,7 +230,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
           positions[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 100;
           return positions;
         },
-        extraCssText: `width: ${(this.template === 'advanced') ? '275px' : '200px'};
+        extraCssText: `width: ${(this.template === 'advanced') ? '310px' : '200px'};
                       background: transparent;
                       border: none;
                       box-shadow: none;`,
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 078b6b30a..e4e8220b0 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -519,7 +519,7 @@ html:lang(ru) .card-title {
 .fees-wrapper-tooltip-chart-advanced,
 .tx-wrapper-tooltip-chart-advanced {
   background: rgba(#1d1f31, 0.98);
-  width: 275px;
+  width: 310px;
 
   thead {
     th {
@@ -606,7 +606,7 @@ html:lang(ru) .card-title {
 }
 
 .tx-wrapper-tooltip-chart-advanced {
-  width: 140px;
+  width: 215px;
   .indicator-container {
     .indicator {
       margin-right: 5px;

From 1eb425897ed04a128cdc36e6fdf96a78f4f35092 Mon Sep 17 00:00:00 2001
From: ncois <nat.coisne@gmail.com>
Date: Sun, 19 Nov 2023 16:42:09 +0100
Subject: [PATCH 2/2] Adjust the width of the incoming tx tooltip for 2h
 timeframe

---
 .../incoming-transactions-graph.component.ts                | 6 +++---
 frontend/src/styles.scss                                    | 1 -
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts b/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
index 620e26857..703181eba 100644
--- a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
+++ b/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
@@ -209,8 +209,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, On
           obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 80;
           return obj;
         },
-        extraCssText: `width: ${(['2h', '24h'].includes(this.windowPreference) || this.template === 'widget') ? '125px' : '215px'};
-                      background: transparent;
+        extraCssText: `background: transparent;
                       border: none;
                       box-shadow: none;`,
         axisPointer: {
@@ -233,7 +232,8 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, On
               }
             }
           });
-          return `<div class="tx-wrapper-tooltip-chart ${(this.template === 'advanced') ? 'tx-wrapper-tooltip-chart-advanced' : ''}">${itemFormatted}</div>`;
+          return `<div class="tx-wrapper-tooltip-chart ${(this.template === 'advanced') ? 'tx-wrapper-tooltip-chart-advanced' : ''}" 
+                  style="width: ${(this.windowPreference === '2h' || this.template === 'widget') ? '125px' : '215px'}">${itemFormatted}</div>`;
         }
       },
       xAxis: [
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index e4e8220b0..10b366601 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -606,7 +606,6 @@ html:lang(ru) .card-title {
 }
 
 .tx-wrapper-tooltip-chart-advanced {
-  width: 215px;
   .indicator-container {
     .indicator {
       margin-right: 5px;