From f8857ed623a6367efd86876422f07373d36af5a1 Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Fri, 24 Feb 2023 10:43:41 +0100
Subject: [PATCH] Fix issue where logo and mobil menu button touch targets
 overlap.

---
 assets/sass/_colors.scss                   |  2 +-
 assets/sass/components/header/_header.scss | 15 +++++++--------
 assets/sass/mobile.scss                    |  2 +-
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/assets/sass/_colors.scss b/assets/sass/_colors.scss
index 2bc69d1..1adba3f 100644
--- a/assets/sass/_colors.scss
+++ b/assets/sass/_colors.scss
@@ -51,7 +51,7 @@ $colors: (
   autocomplete-select-bg: $blue,
 
   body-bg:                $white,
-  header-bg:              $brand,
+  header-bg:              $white,
   backdrop:               $grey-extra-light,
 
   mobile-menu:            $brand,
diff --git a/assets/sass/components/header/_header.scss b/assets/sass/components/header/_header.scss
index 0f79323..f6a0bc9 100644
--- a/assets/sass/components/header/_header.scss
+++ b/assets/sass/components/header/_header.scss
@@ -2,19 +2,18 @@
 
 .header,
 %header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gutters);
+  background-color: var(--color-header-bg);
+
   @include respond-to(s) {
-    display: flex;
+    flex-direction: row;
   }
 
   // Wrapping link for logo.
   &__logo {
-    @include respond-to(s) {
-      margin: 0 var(--gutters) 0 0;
-
-      @include rtl() {
-        margin: 0 0 0 var(--gutters);
-      }
-    }
+    width: fit-content;
   }
 
   // Logo image.
diff --git a/assets/sass/mobile.scss b/assets/sass/mobile.scss
index bf3bc6c..dd4d0f2 100644
--- a/assets/sass/mobile.scss
+++ b/assets/sass/mobile.scss
@@ -56,7 +56,7 @@
     right: var(--gutters);
     margin: 0;
     font-weight: var(--fw-bold);
-    background-color: transparent;
+    background-color: var(--color-text-bg);
     color: var(--color-text);
     z-index: 22;
     border: 1px solid var(--color-border);