From 9ff8487feb56f5bfb66efc48aac9fdb510f97ec2 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Sun, 24 Jul 2022 23:01:31 +0200
Subject: [PATCH] Fix for mempool logo jumping with various sizes of enterprise
 logo

---
 .../components/master-page/master-page.component.html  |  2 +-
 .../components/master-page/master-page.component.scss  | 10 +++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/master-page/master-page.component.html b/frontend/src/app/components/master-page/master-page.component.html
index 7be41f233..1458e762b 100644
--- a/frontend/src/app/components/master-page/master-page.component.html
+++ b/frontend/src/app/components/master-page/master-page.component.html
@@ -9,7 +9,7 @@
   </ng-template>
     <ng-container *ngIf="{ val: connectionState$ | async } as connectionState">
       <img *ngIf="!officialMempoolSpace" src="/resources/mempool-logo.png" height="35" width="140" class="logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }" alt="The Mempool Open Source Project logo">
-      <app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" style="width: 140px; height: 35px" width="500" height="126" viewBox="0 0 500 126"></app-svg-images>
+      <app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" viewBox="0 0 500 126"></app-svg-images>
       <div class="connection-badge">
         <div class="badge badge-warning" *ngIf="connectionState.val === 0" i18n="master-page.offline">Offline</div>
         <div class="badge badge-warning" *ngIf="connectionState.val === 1" i18n="master-page.reconnecting">Reconnecting...</div>
diff --git a/frontend/src/app/components/master-page/master-page.component.scss b/frontend/src/app/components/master-page/master-page.component.scss
index f251215fb..0f7e56828 100644
--- a/frontend/src/app/components/master-page/master-page.component.scss
+++ b/frontend/src/app/components/master-page/master-page.component.scss
@@ -78,6 +78,7 @@ li.nav-item {
 
 .navbar-brand {
   position: relative;
+  height: 65px;
 }
 
 nav {
@@ -86,7 +87,7 @@ nav {
 
 .connection-badge {
   position: absolute;
-  top: 13px;
+  top: 22px;
   width: 100%;
 }
 
@@ -150,6 +151,7 @@ nav {
   width: 140px;
   margin-right: 15px;
   text-align: center;
+  align-self: center;
 }
 
 .logo-holder {
@@ -161,3 +163,9 @@ nav {
   flex-direction: row;
   display: flex;
 }
+
+app-svg-images {
+  align-self: center;
+  width: 140px;
+  height: 35px;
+}