Merge pull request #63 from BEDOLAGA-DEV/dev

Dev

src/components/layout/Layout.tsx

@@ -353,7 +353,7 @@ export default function Layout({ children }: LayoutProps) {
 
       {/* Header */}
       <header
-        className="sticky top-0 z-50 glass border-b border-dark-800/50"
+        className="fixed top-0 left-0 right-0 z-50 glass border-b border-dark-800/50"
         style={{
           // In fullscreen mode, add padding for safe area + Telegram native controls (close/menu buttons in corners)
           paddingTop: isFullscreen ? `${Math.max(safeAreaInset.top, contentSafeAreaInset.top) + 45}px` : undefined,
@@ -500,6 +500,16 @@ export default function Layout({ children }: LayoutProps) {
 
       </header>
 
+      {/* Spacer for fixed header - matches header height */}
+      {isFullscreen ? (
+        <div 
+          className="flex-shrink-0"
+          style={{ height: `${64 + Math.max(safeAreaInset.top, contentSafeAreaInset.top) + 45}px` }}
+        />
+      ) : (
+        <div className="flex-shrink-0 h-16 lg:h-20" />
+      )}
+
       {/* Mobile menu - fixed overlay below header */}
       {mobileMenuOpen && (
         <div

src/styles/globals.css

@@ -203,6 +203,10 @@
     background-color: rgba(254, 249, 240, 0.5) !important; /* champagne-100/50 */
   }
 
+  .light .bg-dark-900\/95 {
+    background-color: rgba(254, 249, 240, 0.95) !important; /* champagne-100/95 - mobile menu sticky header */
+  }
+
   .light .bg-dark-950 {
     background-color: #F7E7CE !important; /* champagne-200 */
   }