From 233a952c04956af71cca88fa97571f053b5f1dda Mon Sep 17 00:00:00 2001
From: Johannes <git@digbox.de>
Date: Fri, 12 Sep 2025 18:16:56 +0200
Subject: [PATCH] fix: make mobile header truly fixed to prevent horizontal
 scrolling

- Change mobile header from sticky to fixed positioning
- Add left, right, and width properties for full viewport coverage
- Prevent header from scrolling horizontally with wide content
- Add top padding to mobile content to compensate for fixed header
- Ensure consistent behavior between mobile and desktop navigation
- Fix content being hidden behind fixed header on mobile devices
---
 frontend/src/global.css             | 10 +++++++++-
 frontend/src/pages/ProjectDetail.js |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/src/global.css b/frontend/src/global.css
index 69d3afa..6e6cf78 100644
--- a/frontend/src/global.css
+++ b/frontend/src/global.css
@@ -46,8 +46,11 @@ button.ant-btn-variant-outlined:disabled {
 /* Mobile project header */
 .mobile-project-header {
     padding: 0px 16px !important;
-    position: sticky !important;
+    position: fixed !important;
     top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    width: 100% !important;
     z-index: 100 !important;
     display: flex !important;
     align-items: center !important;
@@ -57,6 +60,11 @@ button.ant-btn-variant-outlined:disabled {
     min-height: 64px !important;
 }
 
+/* Mobile project content - add top padding to account for fixed header */
+.mobile-project-content {
+    padding-top: 64px !important;
+}
+
 /* Mobile select styling */
 @media (max-width: 768px) {
     .ant-select .ant-select-selector {
diff --git a/frontend/src/pages/ProjectDetail.js b/frontend/src/pages/ProjectDetail.js
index df7bbfc..42faa7b 100644
--- a/frontend/src/pages/ProjectDetail.js
+++ b/frontend/src/pages/ProjectDetail.js
@@ -289,7 +289,7 @@ function ProjectDetail({ user, darkMode, onLogout, onToggleDarkMode, overridePar
                   <UserMenu user={user} onLogout={onLogout} darkMode={darkMode} onToggleDarkMode={onToggleDarkMode} />
                 </div>
               </Layout.Header>
-              <Layout.Content style={{ padding: '0px 16px' }}>
+              <Layout.Content className="mobile-project-content" style={{ padding: '0px 16px' }}>
                 {activeTabContent}
               </Layout.Content>
             </Layout>