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

@@ -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 {

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>