Align logo and title to same vertical height on responsive views

Author: Clemens Vasters

assets/css/style.scss

@@ -155,23 +155,24 @@ body {
     margin-bottom: 20px;
     display: flex;
     flex-wrap: wrap;
-    align-items: flex-start;
-    gap: 10px 15px;
+    align-items: center;  /* Vertically center logo and title */
+    gap: 10px 12px;
   }
 
-  /* Show smaller logo on left side of header - use order to put it first */
+  /* Show smaller logo matching title height */
   .wrapper header img {
     display: block !important;
-    width: 60px !important;
-    height: auto !important;
-    max-width: 60px !important;
+    width: auto !important;
+    height: 28px !important;  /* Match the visual height of the title */
+    max-height: 28px !important;
     flex-shrink: 0;
     order: -1;  /* Put image before h1 */
   }
 
   /* Header title next to logo */
   .wrapper header h1 {
     font-size: 22px;
+    line-height: 1;
     margin-bottom: 0;
     margin-top: 0;
     display: flex;
@@ -281,14 +282,16 @@ body {
     padding: 0 10px !important;
   }
 
-  /* Smaller logo on mobile */
+  /* Smaller logo on mobile matching smaller title */
   .wrapper header img {
-    width: 50px !important;
-    max-width: 50px !important;
+    height: 24px !important;  /* Match the smaller title height */
+    max-height: 24px !important;
+    width: auto !important;
   }
 
   .wrapper header h1 {
     font-size: 20px;
+    line-height: 1;
   }
 }