From c16ad813aac13ef9fb873f5c8e19be9bdb64fdda Mon Sep 17 00:00:00 2001
From: Maximilian Harz <maxharz@gmail.com>
Date: Sun, 27 Oct 2024 15:33:05 +0100
Subject: [PATCH] Adapt to different logo sizes, including fixes for Safari

---
 webapp/components/HeaderMenu/HeaderMenu.vue | 17 ++++++++++++++---
 webapp/components/Logo/Logo.vue             |  1 +
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/webapp/components/HeaderMenu/HeaderMenu.vue b/webapp/components/HeaderMenu/HeaderMenu.vue
index f4d48220e..1a8650957 100644
--- a/webapp/components/HeaderMenu/HeaderMenu.vue
+++ b/webapp/components/HeaderMenu/HeaderMenu.vue
@@ -109,7 +109,7 @@
       <div v-else class="mobil-header-box">
         <!-- logo, hamburger-->
         <ds-flex style="align-items: center">
-          <ds-flex-item :width="{ base: LOGOS.LOGO_HEADER_WIDTH }" style="margin-right: 20px">
+          <ds-flex-item :width="{ base: LOGOS.LOGO_HEADER_WIDTH }" class="logo-container">
             <div @click="toggleMobileMenu ? toggleMobileMenuView() : ''">
               <a
                 v-if="LOGOS.LOGO_HEADER_CLICK.externalLink"
@@ -136,12 +136,12 @@
                 <chat-notification-menu />
               </div>
               <!-- notification menu -->
-              <div style="display: inline-flex; padding-right: 20px">
+              <div style="display: inline-flex; padding-right: clamp(10px, 2.5vw, 20px)">
                 <notification-menu />
               </div>
             </client-only>
             <!-- hamburger menu -->
-            <base-button icon="bars" @click="toggleMobileMenuView" circle />
+            <base-button icon="bars" @click="toggleMobileMenuView" circle class="hamburger-button" />
           </ds-flex-item>
         </ds-flex>
         <!-- search, filter -->
@@ -368,6 +368,7 @@ export default {
 }
 .main-navigation-flex {
   align-items: center;
+  flex-wrap: nowrap !important;
 }
 .main-navigation-right {
   display: flex;
@@ -379,6 +380,10 @@ export default {
 .ds-flex-item.mobile-hamburger-menu {
   margin-left: auto;
   text-align: right;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: flex-end;
 }
 .mobile-menu {
   margin: 0 20px;
@@ -397,4 +402,10 @@ export default {
 .hide-mobile-menu {
   display: none;
 }
+.logo-container {
+  max-width: calc(100vw - 140px) !important;
+}
+.hamburger-button {
+  flex-shrink: 0;
+}
 </style>
diff --git a/webapp/components/Logo/Logo.vue b/webapp/components/Logo/Logo.vue
index 3d7d336ce..fee0d9140 100644
--- a/webapp/components/Logo/Logo.vue
+++ b/webapp/components/Logo/Logo.vue
@@ -113,6 +113,7 @@ export default {
 .ds-logo-svg {
   height: auto;
   fill: #000000;
+  max-width: 100%;
 }
 </style>