From fd46ea82bf783966f7b08c54bd400de41caba328 Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Mon, 22 Aug 2022 22:06:31 +0200
Subject: [PATCH] Fix channel map size

---
 .../nodes-channels-map.component.html         |  2 +-
 .../nodes-channels-map.component.scss         | 59 +++++++++++--------
 2 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.html b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.html
index cc66fb158..7eda48b2b 100644
--- a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.html
+++ b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.html
@@ -8,7 +8,7 @@
         <small style="color: #ffffff66" i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</small>
       </div>
 
-      <div class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)"
+      <div class="chart" [class]="style" echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)"
         (chartFinished)="onChartFinished($event)">
       </div>
     </div>
diff --git a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.scss b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.scss
index bf2b9b79e..fd93b09c5 100644
--- a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.scss
+++ b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.scss
@@ -10,7 +10,7 @@
 .full-container {
   padding: 0px 15px;
   width: 100%;
-  min-height: 500px;
+  min-height: 600px;
   height: calc(100% - 150px);
 
   @media (max-width: 992px) {
@@ -18,17 +18,20 @@
     padding-bottom: 100px;
   }
 }
-
 .full-container.nodepage {
+  min-height: 400px;
+  margin-top: 25px;
+  margin-bottom: 25px;
+}
+.full-container.channelpage {
+  min-height: 400px;
   margin-top: 25px;
   margin-bottom: 25px;
 }
-
 .full-container.widget {
   height: 250px;
   min-height: 250px;
 }
-
 .full-container.fit-container {
   margin: 0;
   padding: 0;
@@ -41,25 +44,6 @@
   }
 }
 
-.widget {
-  width: 90vw;
-  margin-left: auto;
-  margin-right: auto;
-  height: 250px;
-  -webkit-mask: linear-gradient(0deg, #11131f00 5%, #11131fff 25%);
-  @media (max-width: 767.98px) {
-    width: 100vw;
-  }
-}
-
-.widget > .chart {
-  min-height: 250px;
-  -webkit-mask: linear-gradient(180deg, #11131f00 0%, #11131fff 20%);
-  @media (max-width: 767.98px) {
-    padding-bottom: 0px;
-  }
-}
-
 .chart {
   min-height: 500px;
   width: 100%;
@@ -80,6 +64,33 @@
     padding-bottom: 55px;
   }
 }
+.chart.graph {
+  min-height: 600px;
+}
+.chart.nodepage {
+  min-height: 400px;
+}
+.chart.channelpage {
+  min-height: 400px;
+}
+
+.widget {
+  width: 90vw;
+  margin-left: auto;
+  margin-right: auto;
+  height: 250px;
+  -webkit-mask: linear-gradient(0deg, #11131f00 5%, #11131fff 25%);
+  @media (max-width: 767.98px) {
+    width: 100vw;
+  }
+}
+.widget > .chart {
+  min-height: 250px;
+  -webkit-mask: linear-gradient(180deg, #11131f00 0%, #11131fff 20%);
+  @media (max-width: 767.98px) {
+    padding-bottom: 0px;
+  }
+}
 
 .loading-spinner {
   position: absolute;
@@ -96,4 +107,4 @@
   @media (max-width: 767.98px) {
     top: 250px;
   }
-}
\ No newline at end of file
+}