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

Author: ssddanbrown

resources/sass/_header.scss

@@ -205,30 +205,22 @@ 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;
   svg {
     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;

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">