From 48cbf6087ff01e1574459aff0ca03a9fd00fa021 Mon Sep 17 00:00:00 2001
From: Vasyl Ivanchuk <vasyl.ivanchuk@gmail.com>
Date: Sat, 16 Dec 2023 21:23:55 +0200
Subject: [PATCH] fix: header height when warning message is shown

---
 packages/app/src/components/IssuesBanner.vue  |  2 +-
 .../app/src/components/NetworkDeprecated.vue  |  2 +-
 .../app/src/components/header/TheHeader.vue   | 22 ++++++++++++++++++-
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/components/IssuesBanner.vue b/packages/app/src/components/IssuesBanner.vue
index 0a06801d57..fdc7044353 100644
--- a/packages/app/src/components/IssuesBanner.vue
+++ b/packages/app/src/components/IssuesBanner.vue
@@ -20,7 +20,7 @@
   @apply flex text-white rounded-2xl border border-amber-400/50 bg-amber-400/10 mb-6 py-3 px-4;
 
   svg {
-    @apply mr-2;
+    @apply mr-2 shrink-0;
   }
 
   a {
diff --git a/packages/app/src/components/NetworkDeprecated.vue b/packages/app/src/components/NetworkDeprecated.vue
index 919261b58f..4bd027695c 100644
--- a/packages/app/src/components/NetworkDeprecated.vue
+++ b/packages/app/src/components/NetworkDeprecated.vue
@@ -48,7 +48,7 @@ const newNetworkUrl = computed(() => {
   @apply flex text-white rounded-2xl border border-amber-400/50 bg-amber-400/10 mb-6 py-3 px-4;
 
   svg {
-    @apply mr-2;
+    @apply mr-2 shrink-0;
   }
 
   a {
diff --git a/packages/app/src/components/header/TheHeader.vue b/packages/app/src/components/header/TheHeader.vue
index 34f96b357e..b87b4cdffd 100644
--- a/packages/app/src/components/header/TheHeader.vue
+++ b/packages/app/src/components/header/TheHeader.vue
@@ -48,7 +48,11 @@
         </div>
       </div>
     </div>
-    <div v-if="hasContent" class="hero-banner-container" :class="{ 'home-banner': route.path === '/' }">
+    <div
+      v-if="hasContent"
+      class="hero-banner-container"
+      :class="[`${currentNetwork.name}`, { 'home-banner': route.path === '/' }]"
+    >
       <hero-arrows class="hero-image" />
     </div>
     <transition
@@ -301,12 +305,28 @@ const hasContent = computed(() => {
   .hero-banner-container {
     @apply absolute left-0 top-full flex h-64 w-full items-end justify-end overflow-hidden bg-primary-900;
 
+    &.mainnet {
+      @apply h-[27rem] md:h-[23rem] lg:h-[20rem];
+    }
+
+    &.goerli {
+      @apply h-[25rem] md:h-[23rem] lg:h-[19rem];
+    }
+
     .hero-image {
       @apply h-5/6 w-auto;
     }
   }
   .home-banner {
     @apply h-80;
+
+    &.mainnet {
+      @apply h-[32rem] md:h-[28rem] lg:h-[25rem];
+    }
+
+    &.goerli {
+      @apply h-[30rem] md:h-[27rem] lg:h-[24rem];
+    }
   }
 }
 .header-mobile-popover {