Fixer la barre de menu en haut de page

ChessCubing.App/Layout/MainLayout.razor

@@ -4,9 +4,14 @@
 @if (!HideGlobalMenu)
 {
     <SiteMenu />
+    <main class="site-layout-body">
+        @Body
+    </main>
+}
+else
+{
+    @Body
 }
-
-@Body
 
 @code {
     private bool HideGlobalMenu

styles.css

@@ -18,6 +18,7 @@
   --success: #ffb13a;
   --shadow: 0 18px 48px rgba(0, 0, 0, 0.38);
   --radius: 28px;
+  --site-menu-offset: calc(6.9rem + var(--safe-top));
   --safe-top: env(safe-area-inset-top, 0px);
   --safe-right: env(safe-area-inset-right, 0px);
   --safe-bottom: env(safe-area-inset-bottom, 0px);
@@ -1023,29 +1024,34 @@ body[data-page="cube"] .zone-button.cube-hold-ready::after {
   padding: 1.2rem 0 2rem;
 }
 
+.site-layout-body {
+  padding-top: var(--site-menu-offset);
+}
+
 .site-menu-shell {
-  position: sticky;
-  top: calc(var(--safe-top) + 0.75rem);
+  position: fixed;
+  inset: 0 0 auto 0;
   z-index: 40;
-  width: min(1220px, calc(100% - 2rem));
-  margin: 0 auto;
-  padding: 1rem 0 0;
+  width: 100%;
+  margin: 0;
+  padding: var(--safe-top) 0 0;
 }
 
 .site-menu-bar {
-  border: 1px solid var(--panel-border);
-  border-radius: 26px;
+  border-bottom: 1px solid var(--panel-border);
   background: rgba(14, 16, 21, 0.9);
-  box-shadow: var(--shadow);
+  box-shadow: none;
   backdrop-filter: blur(18px);
 }
 
 .site-menu-main {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;
+  width: min(1220px, calc(100% - 2rem));
+  margin: 0 auto;
   align-items: center;
   gap: 1rem;
-  padding: 1rem 1.2rem;
+  padding: 1rem 0;
 }
 
 .site-menu-brand {
@@ -1474,6 +1480,10 @@ body[data-page="cube"] .zone-button.cube-hold-ready::after {
 }
 
 @media (max-width: 900px) {
+  :root {
+    --site-menu-offset: calc(12.5rem + var(--safe-top));
+  }
+
   .phase-body {
     overflow-y: auto;
   }
@@ -1483,7 +1493,6 @@ body[data-page="cube"] .zone-button.cube-hold-ready::after {
     overscroll-behavior: none;
   }
 
-  .site-menu-shell,
   .setup-shell,
   .phase-shell,
   .rules-shell {