fix spacing if promo-banner is visible

Author: marle3003

webui/src/assets/main.css

@@ -33,6 +33,10 @@ body {
   min-height: 100%;
 }
 
+#app:has(header .promo-banner) {
+  --header-height: calc(4rem + 22px);
+}
+
 main {
   flex: 1;
 }

webui/src/assets/vars.css

@@ -1,4 +1,6 @@
 :root{
+    --header-height: 4rem;
+
     --color-background: #323743;
     --color-background-mute:  #2e2e31;
     --color-background-soft: rgb(40,43,51);

webui/src/components/Header.vue

@@ -205,12 +205,12 @@ function navigateAndClose(params: Record<string, string>) {
   <header>
 <!-- Promotion banner -->
 <div class="promo-banner" v-if="isPromoEnabled && promo.activePromotion.value">
-  <strong>Shop discount!</strong>
-  Get <strong>{{ promo.activePromotion.value.discount }}% off</strong> Mokapi Gear —
-  <span class="d-none d-md-inline">
-    support Mokapi with code in your heart and style on your sleeve.
+  <strong class="d-none d-md-inline">Shop discount!</strong>
+  Get <strong>{{ promo.activePromotion.value.discount }}% off</strong> Mokapi Gear
+  <span class="d-none d-lg-inline">
+    — support Mokapi with code in your heart and style on your sleeve.
   </span>
-  <a href="https://mokapi.myspreadshop.net" class="promo-link ms-2">Visit shop →</a>
+  <a href="https://mokapi.myspreadshop.net" class="promo-link ms-1">Visit shop →</a>
 </div>
     <nav class="navbar navbar-expand-lg">
       <div class="container-fluid">
@@ -366,7 +366,7 @@ header {
     left: 0;
     z-index: 99;
     background-color: var(--color-background);
-    height: 4rem;
+    height: var(--header-height);
     display: block;
 }
 header .container-fluid {
@@ -379,7 +379,6 @@ header .container-fluid {
   text-align: center;
   padding: 0.5rem 1rem;
   font-size: 0.95rem;
-  margin-bottom: 5px;
 }
 
 .promo-banner strong {

webui/src/views/DocsView.vue

@@ -185,9 +185,10 @@ function formatParam(label: any): string {
 .doc {
   margin-top: 20px;
 }
+
 .sidebar {
   position: sticky;
-  top: 4rem;
+  top: var(--header-height);
   align-self: flex-start;
   width: 290px;
   padding-top: 2rem;