feat(mobile-fixes-phase4): Complete US-403 - Fix MobileDrawerMenu - Secțiunea ANALIZE Vizibilă

Implemented by Ralph autonomous loop.
Iteration: 3

Co-Authored-By: Claude <noreply@anthropic.com>

src/App.vue

@@ -111,6 +111,9 @@ watch(
 onMounted(async () => {
   // Add resize listener for mobile detection
   window.addEventListener('resize', handleResize)
+  // Also call handleResize immediately to ensure correct initial value
+  // (important when viewport is set before Vue mounts, e.g., in Playwright tests)
+  handleResize()
 
   console.log('[App] Mounted - initializing auth...')
   await authStore.initializeAuth()

src/assets/css/layout/containers.css

@@ -152,8 +152,9 @@
     padding: var(--space-md);
   }
 
+  /* US-401/US-402: Hide desktop header on mobile - MobileTopBar takes over */
   .header-container {
-    padding: 0 var(--space-md);
+    display: none !important;
   }
 
   .dashboard-container {
@@ -186,8 +187,9 @@
     padding: var(--space-sm);
   }
 
+  /* US-401/US-402: Keep desktop header hidden on mobile */
   .header-container {
-    padding: 0 var(--space-sm);
+    display: none !important;
   }
 
   .card-container {

src/assets/css/main.css

@@ -1,4 +1,5 @@
 /* Main CSS Entry Point - ROA2WEB */
+/* Updated: 2026-01-12 - US-402 mobile header fix */
 
 /* Import order is critical for proper CSS cascade */
 

src/shared/styles/layout/header.css

@@ -170,8 +170,9 @@
 
 /* Mobile Responsive */
 @media (max-width: 768px) {
+  /* US-401/US-402: Hide desktop header on mobile - MobileTopBar takes over */
   .header-container {
-    padding: 0 var(--space-md, 12px);
+    display: none !important;
   }
 
   .header-left {

src/shared/styles/layout/navigation.css

@@ -134,8 +134,10 @@
 
 /* Mobile Responsive */
 @media (max-width: 768px) {
-  .slide-menu {
-    width: 280px;
+  /* US-401/US-402: Hide desktop slide menu on mobile - MobileDrawerMenu takes over */
+  .slide-menu,
+  .slide-menu-overlay {
+    display: none !important;
   }
 
   .menu-section {