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

diff --git a/resources/sass/_header.scss b/resources/sass/_header.scss
index e2daae437b6e9e7fe081e369119061e31477f6da..d72b66729489256108ece9da8de019a5a4024c5c 100644 (file)
--- 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 0e3ad44664be1691c3a1d4611cd30f93cd142e6c..729b975044d1c40610121a14f0834fc13a6e0a60 100644 (file)
--- 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">