From 12daa1c2b982522d31bcc422477708a39aea9c92 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Tue, 13 Feb 2024 14:00:34 +0000
Subject: [PATCH] Header: Fixed mobile menu falling out of header

Changed button to be within-DOM rather than absolute positioned.
Also improves RTL handling by showing menu on the right side.

Fixes #4841
---
 resources/sass/_header.scss                    | 10 +---------
 resources/views/layouts/parts/header.blade.php | 14 ++++++++------
 2 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/resources/sass/_header.scss b/resources/sass/_header.scss
index e2daae437..d72b66729 100644
--- a/resources/sass/_header.scss
+++ b/resources/sass/_header.scss
@@ -205,9 +205,6 @@ header .search-box.search-active:focus-within {
   border: 2px solid rgba(255, 255, 255, 0.8);
   border-radius: 4px;
   padding: 0 $-xs;
-  position: absolute;
-  right: $-m;
-  top: 13px;
   line-height: 1;
   cursor: pointer;
   user-select: none;
@@ -215,20 +212,15 @@ header .search-box.search-active:focus-within {
     margin: 0;
     bottom: -2px;
   }
-  @include rtl() {
-    left: $-m;
-    right: auto;
-  }
 }
 
 
-
 @include smaller-than($l) {
   header .header-links {
     @include lightDark(background-color, #fff, #333);
     display: none;
     z-index: 10;
-    right: $-m;
+    inset-inline-end: $-m;
     border-radius: 4px;
     overflow: hidden;
     position: absolute;
diff --git a/resources/views/layouts/parts/header.blade.php b/resources/views/layouts/parts/header.blade.php
index 0e3ad4466..729b97504 100644
--- a/resources/views/layouts/parts/header.blade.php
+++ b/resources/views/layouts/parts/header.blade.php
@@ -1,11 +1,13 @@
 <header id="header" component="header-mobile-toggle" class="primary-background px-xl grid print-hidden">
-    <div>
+    <div class="flex-container-row justify-space-between gap-s items-center">
         @include('layouts.parts.header-logo')
-        <button type="button"
-                refs="header-mobile-toggle@toggle"
-                title="{{ trans('common.header_menu_expand') }}"
-                aria-expanded="false"
-                class="mobile-menu-toggle hide-over-l">@icon('more')</button>
+        <div class="hide-over-l py-s">
+            <button type="button"
+                    refs="header-mobile-toggle@toggle"
+                    title="{{ trans('common.header_menu_expand') }}"
+                    aria-expanded="false"
+                    class="mobile-menu-toggle">@icon('more')</button>
+        </div>
     </div>
 
     <div class="flex-container-column items-center justify-center hide-under-l">