From 6d595dcdb63cbddb0fd01622ed07e44640fda577 Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Sat, 4 May 2024 16:56:02 +0200
Subject: [PATCH] Fix graph menu styling

---
 .../src/app/components/graphs/graphs.component.html   | 11 +++++------
 .../src/app/components/graphs/graphs.component.scss   |  4 ++--
 .../src/app/components/graphs/graphs.component.ts     |  6 +++---
 .../components/statistics/statistics.component.scss   |  2 +-
 4 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/components/graphs/graphs.component.html b/frontend/src/app/components/graphs/graphs.component.html
index c72aa8eb8..53d18bbc2 100644
--- a/frontend/src/app/components/graphs/graphs.component.html
+++ b/frontend/src/app/components/graphs/graphs.component.html
@@ -1,9 +1,9 @@
-<div *ngIf="stateService.env.MINING_DASHBOARD || stateService.env.LIGHTNING || stateService.env.ACCELERATOR" class="mb-3 d-flex menu">
+<div *ngIf="stateService.env.MINING_DASHBOARD || stateService.env.LIGHTNING || stateService.env.ACCELERATOR" class="mb-3 d-flex menu" [style]="{'flex-wrap': flexWrap ? 'wrap' : ''}">
 
-  <a routerLinkActive="active" class="btn btn-primary" [class]="padding"
+  <a routerLinkActive="active" class="btn btn-primary w-33"
     [routerLink]="['/graphs/mempool' | relativeUrl]">Mempool</a>
 
-  <div ngbDropdown [class]="padding" *ngIf="stateService.env.MINING_DASHBOARD">
+  <div ngbDropdown class="w-33" *ngIf="stateService.env.MINING_DASHBOARD">
     <button class="btn btn-primary w-100" id="dropdownBasic1" ngbDropdownToggle i18n="mining">Mining</button>
     <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
       <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/mining/pools' | relativeUrl]"
@@ -28,7 +28,7 @@
     </div>
   </div>
 
-  <div ngbDropdown [class]="padding" *ngIf="stateService.env.LIGHTNING">
+  <div ngbDropdown class="w-33" *ngIf="stateService.env.LIGHTNING">
     <button class="btn btn-primary w-100" id="dropdownBasic1" ngbDropdownToggle i18n="lightning">Lightning</button>
     <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
       <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/lightning/nodes-networks' | relativeUrl]"
@@ -46,12 +46,11 @@
     </div>
   </div>
 
-  <div ngbDropdown [class]="padding" *ngIf="stateService.env.ACCELERATOR">
+  <div ngbDropdown class="w-33" *ngIf="stateService.env.ACCELERATOR">
     <button class="btn btn-primary w-100" id="dropdownBasic1" ngbDropdownToggle i18n="accelerator.accelerations">Accelerations</button>
     <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
       <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/acceleration/fees' | relativeUrl]"
         i18n="accelerator.acceleration-fees">Acceleration Fees</a>
-      
     </div>
   </div>
 </div>
diff --git a/frontend/src/app/components/graphs/graphs.component.scss b/frontend/src/app/components/graphs/graphs.component.scss
index 715ec1b42..c1944d3ae 100644
--- a/frontend/src/app/components/graphs/graphs.component.scss
+++ b/frontend/src/app/components/graphs/graphs.component.scss
@@ -1,5 +1,5 @@
 .menu {
-  flex-wrap: wrap;
+  flex-grow: 1;
   padding: 0 35px;
   @media (min-width: 576px) {
     max-width: 600px;
@@ -11,6 +11,6 @@
     &.last-child {
       margin-inline-end: 0;
     }
-    margin-bottom: 5px; 
+    margin-bottom: 5px;
   }
 }
\ No newline at end of file
diff --git a/frontend/src/app/components/graphs/graphs.component.ts b/frontend/src/app/components/graphs/graphs.component.ts
index 050b69848..95eb28d5e 100644
--- a/frontend/src/app/components/graphs/graphs.component.ts
+++ b/frontend/src/app/components/graphs/graphs.component.ts
@@ -8,7 +8,7 @@ import { WebsocketService } from '../../services/websocket.service';
   styleUrls: ['./graphs.component.scss'],
 })
 export class GraphsComponent implements OnInit {
-  padding = 'w-50';
+  flexWrap = false;
 
   constructor(
     public stateService: StateService,
@@ -18,8 +18,8 @@ export class GraphsComponent implements OnInit {
   ngOnInit(): void {
     this.websocketService.want(['blocks']);
 
-    if (this.stateService.env.MINING_DASHBOARD === true && this.stateService.env.LIGHTNING === true) {
-      this.padding = 'w-33';
+    if (this.stateService.env.ACCELERATOR === true && (this.stateService.env.MINING_DASHBOARD === true || this.stateService.env.LIGHTNING === true)) {
+      this.flexWrap = true;
     }
   }
 }
diff --git a/frontend/src/app/components/statistics/statistics.component.scss b/frontend/src/app/components/statistics/statistics.component.scss
index 835a170cc..468d00ed7 100644
--- a/frontend/src/app/components/statistics/statistics.component.scss
+++ b/frontend/src/app/components/statistics/statistics.component.scss
@@ -53,7 +53,7 @@
   }
 }
 .formRadioGroup.mining {
-  @media (min-width: 1035px) {
+  @media (min-width: 1200px) {
     position: relative;
     top: -100px;
   }