🩹 Fix main content alignment under menu overlay

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- Main content misaligned when hamburger menu is opened at large viewport sizes
+
 ## [2.3.0] - 2022-06-27
 
 ### Added

assets/css/compiled/main.css

@@ -1018,8 +1018,7 @@ body button {
 /* Hamburger menu */
 
 body:has(#menu-controller:checked) {
-  position: fixed;
+  overflow-y: hidden;
-  overflow-y: scroll;
 }
 
 #menu-button:has(#menu-controller:checked) {
@@ -1772,11 +1771,6 @@ body:has(#menu-controller:checked) {
   margin-bottom: 0px;
 }
 
-.mx-4 {
-  margin-left: 1rem;
-  margin-right: 1rem;
-}
-
 .mb-3 {
   margin-bottom: 0.75rem;
 }

assets/css/main.css

@@ -23,7 +23,7 @@ body button {
 
 /* Hamburger menu */
 body:has(#menu-controller:checked) {
-  @apply fixed overflow-y-scroll;
+  @apply overflow-y-hidden;
 }
 #menu-button:has(#menu-controller:checked) {
   @apply invisible;

layouts/partials/header/hamburger.html

@@ -34,10 +34,10 @@
         </div>
         <div
           id="menu-wrapper"
-          class="fixed inset-0 z-30 invisible w-screen h-screen px-6 py-6 overflow-auto transition-opacity opacity-0 cursor-default sm:px-14 md:px-24 lg:px-32 sm:py-10 sm:pt-10 bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50"
+          class="fixed inset-0 z-30 invisible w-screen h-screen m-auto overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50"
         >
           <ul
-            class="flex flex-col m-auto mx-4 overflow-visible list-none ltr:text-right rtl:text-left max-w-7xl"
+            class="flex flex-col w-full px-6 py-6 mx-auto overflow-visible list-none ltr:text-right rtl:text-left max-w-7xl sm:px-14 md:px-24 lg:px-32 sm:py-10 sm:pt-10"
           >
             <li class="mb-1">
               <span class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400"