Merge branch 'master' into nymkappa/bugfix/channel-map-rendering

frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.scss

@@ -30,21 +30,28 @@
 }
 
 .widget {
-  width: 99vw;
+  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 {
-  -webkit-mask: linear-gradient(180deg, #11131f00 0%, #11131fff 20%);
   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%;
   height: 100%;
-  padding-right: 10px;
   @media (max-width: 992px) {
     padding-bottom: 25px;
   }

frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts

@@ -8,6 +8,7 @@ import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.
 import { StateService } from 'src/app/services/state.service';
 import { EChartsOption, registerMap } from 'echarts';
 import 'echarts-gl';
+import { isMobile } from 'src/app/shared/common.utils';
 
 @Component({
   selector: 'app-nodes-channels-map',
@@ -50,8 +51,15 @@ export class NodesChannelsMap implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.center = this.style === 'widget' ? [0, 40] : [0, 5];
-    this.zoom = this.style === 'widget' ? 3.5 : 1.3;
-
+    this.zoom = 1.3;
+    if (this.style === 'widget' && !isMobile()) {
+      this.zoom = 3.5;
+    }
+    if (this.style === 'widget' && isMobile()) {
+      this.zoom = 1.4;
+      this.center = [0, 10];
+    }
+    
     if (this.style === 'graph') {
       this.seoService.setTitle($localize`Lightning nodes channels world map`);
     }