From eedc2bca673698443a0615aa9fad0d3d14b7c268 Mon Sep 17 00:00:00 2001
From: Claude Agent <claude-agent@romfast.ro>
Date: Wed, 14 Jan 2026 16:25:44 +0000
Subject: [PATCH] =?UTF-8?q?feat(ui-fixes-phase6):=20Fix=20SpeedDial=20Bulk?=
 =?UTF-8?q?=20Upload=20=C8=99i=20Mobile=20Spacing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- SpeedDial: Redus la 2 opțiuni (Bon Nou + Bulk Upload)
- SpeedDial: Eliminat masca gri (:mask="false")
- Bulk Upload: Acum deschide file picker direct (openBulkFileInput)
- Mobile spacing: Eliminat margin-top excesiv pe .mobile-layout
- MaturityAnalysisCard: Redus padding/margin pe mobil
- MaturityAnalysisView: Redus gap pe mobil

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 scripts/ralph/progress.txt                    |   8 +
 src/assets/css/layout/containers.css          |  22 +-
 .../views/receipts/ReceiptsListView.vue       | 379 +++++++++---------
 .../dashboard/cards/MaturityAnalysisCard.vue  |  54 +--
 .../reports/views/MaturityAnalysisView.vue    |  14 +-
 5 files changed, 261 insertions(+), 216 deletions(-)

diff --git a/scripts/ralph/progress.txt b/scripts/ralph/progress.txt
index 5830e3e..42273b4 100644
--- a/scripts/ralph/progress.txt
+++ b/scripts/ralph/progress.txt
@@ -405,3 +405,11 @@ PRD: tasks/prd-mobile-ui-fixes-phase5.md
 [2026-01-13 22:36:11] Working on story: US-705
 [2026-01-13 22:36:11] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_5_US-705.log)
 [2026-01-13 22:39:06] SUCCESS: Story US-705 passed!
+[2026-01-13 22:39:07] Changes committed
+[2026-01-13 22:39:07] Progress: 15/15 stories completed
+[2026-01-13 22:39:09] === Iteration 6/15 ===
+[2026-01-13 22:39:09] SUCCESS: All stories completed! 🎉
+[2026-01-13 22:39:09] === Ralph Session Complete ===
+[2026-01-13 22:39:09] Final progress: 15/15 stories completed
+[2026-01-13 22:39:09] Branch: ralph/ui-fixes-phase6
+[2026-01-13 22:39:09] Logs: /workspace/roa2web/scripts/ralph/logs
diff --git a/src/assets/css/layout/containers.css b/src/assets/css/layout/containers.css
index 46735a1..8b1c7d9 100644
--- a/src/assets/css/layout/containers.css
+++ b/src/assets/css/layout/containers.css
@@ -46,9 +46,17 @@
 }
 
 /* Main Content with Header Offset */
+/* US-705: Reduced padding from space-lg (24px) to space-xs (4px) since .app-container
+   inside already provides content padding. This eliminates excessive top spacing. */
 .main-content {
   margin-top: var(--header-height);
-  padding: var(--space-lg);
+  padding: var(--space-xs);
+}
+
+/* US-706: Mobile layout uses padding-top for fixed bars, not margin-top
+   This prevents gap between sticky tabs and content */
+.main-content.mobile-layout {
+  margin-top: 0;
 }
 
 /* Dashboard Container */
@@ -147,11 +155,15 @@
 /* Mobile Container Adjustments */
 @media (max-width: 768px) {
   .app-container,
-  .main-content,
   .page-container {
     padding: var(--space-md);
   }
 
+  /* US-705: Keep main-content padding minimal - app-container handles content spacing */
+  .main-content {
+    padding: var(--space-xs);
+  }
+
   /* US-401/US-402: Hide desktop header on mobile - MobileTopBar takes over */
   .header-container {
     display: none !important;
@@ -181,12 +193,16 @@
 
 @media (max-width: 480px) {
   .app-container,
-  .main-content,
   .page-container,
   .dashboard-container {
     padding: var(--space-sm);
   }
 
+  /* US-705: Keep main-content padding minimal on small screens too */
+  .main-content {
+    padding: var(--space-xs);
+  }
+
   /* US-401/US-402: Keep desktop header hidden on mobile */
   .header-container {
     display: none !important;
diff --git a/src/modules/data-entry/views/receipts/ReceiptsListView.vue b/src/modules/data-entry/views/receipts/ReceiptsListView.vue
index 23a8c23..7acd8bb 100644
--- a/src/modules/data-entry/views/receipts/ReceiptsListView.vue
+++ b/src/modules/data-entry/views/receipts/ReceiptsListView.vue
@@ -655,39 +655,8 @@
           />
         </div>
 
-        <!-- US-103: Mobile Selection Bottom Bar (using shared component) -->
-        <MobileSelectionFooter
-          :visible="mobileSelectionMode && selectedReceipts.length > 0"
-          :actions="mobileSelectionActions"
-        />
       </div>
 
-      <!-- US-608: Mobile FAB SpeedDial with animated options -->
-      <SpeedDial
-        v-if="isMobile && !mobileSelectionMode && fabVisible"
-        :model="speedDialItems"
-        :radius="80"
-        direction="up"
-        type="linear"
-        showIcon="pi pi-plus"
-        hideIcon="pi pi-times"
-        :mask="true"
-        class="mobile-speed-dial"
-        :transitionDelay="40"
-        :pt="{
-          root: { class: 'mobile-speed-dial-root' },
-          button: { class: 'mobile-speed-dial-button' },
-          menu: { class: 'mobile-speed-dial-menu' },
-          menuitem: { class: 'mobile-speed-dial-item' },
-          action: { class: 'mobile-speed-dial-action' },
-          mask: { class: 'mobile-speed-dial-mask' }
-        }"
-      />
-
-      <!-- US-103: Mobile Bottom Navigation (using shared component) -->
-      <!-- US-307: Using default nav items (Dashboard, Bonuri, Facturi, Setări) -->
-      <MobileBottomNav v-if="isMobile && !mobileSelectionMode" />
-
       <!-- Desktop: Compact Data Table with Batch Grouping (US-002) -->
       <!-- US-104: Explicit !isMobile check (not v-else) to ensure bulk-actions-bar only shows on desktop -->
       <div v-if="!isMobile && !loading && unifiedItems.length" class="data-table-container">
@@ -1070,6 +1039,40 @@
       <!-- Shared Context Menu (for both mobile and desktop) - US-516: MD3 styled -->
       <Menu ref="menuRef" :model="menuItems" popup class="receipt-action-menu" />
     </div>
+
+    <!-- FIXED: Mobile components moved OUTSIDE .roa-card to fix position:fixed -->
+    <!-- US-103: Mobile Selection Bottom Bar (using shared component) -->
+    <MobileSelectionFooter
+      :visible="mobileSelectionMode && selectedReceipts.length > 0"
+      :actions="mobileSelectionActions"
+    />
+
+    <!-- US-608: Mobile FAB SpeedDial with animated options -->
+    <!-- US-706: mask="false" to avoid gray overlay when opening -->
+    <SpeedDial
+      v-if="isMobile && !mobileSelectionMode && fabVisible"
+      :model="speedDialItems"
+      :radius="80"
+      direction="up"
+      type="linear"
+      showIcon="pi pi-plus"
+      hideIcon="pi pi-times"
+      :mask="false"
+      class="mobile-speed-dial"
+      :transitionDelay="40"
+      :pt="{
+        root: { class: 'mobile-speed-dial-root' },
+        button: { class: 'mobile-speed-dial-button' },
+        menu: { class: 'mobile-speed-dial-menu' },
+        menuitem: { class: 'mobile-speed-dial-item' },
+        action: { class: 'mobile-speed-dial-action' },
+        mask: { class: 'mobile-speed-dial-mask' }
+      }"
+    />
+
+    <!-- US-103: Mobile Bottom Navigation (using shared component) -->
+    <!-- US-307: Using default nav items (Dashboard, Bonuri, Facturi, Setări) -->
+    <MobileBottomNav v-if="isMobile && !mobileSelectionMode" />
   </div>
 </template>
 
@@ -1229,20 +1232,15 @@ const exportMenuItems = computed(() => [
   }
 ])
 
-// US-608: SpeedDial Items - Bon Nou Manual, Scanare Bon OCR, Upload în Masă
+// US-706: SpeedDial Items - simplified to 2 options: Bon Nou + Bulk Upload
 const speedDialItems = [
   {
-    label: 'Bon Nou Manual',
+    label: 'Bon Nou',
     icon: 'pi pi-pencil',
     command: () => goToCreate()
   },
   {
-    label: 'Scanare Bon OCR',
-    icon: 'pi pi-camera',
-    command: () => goToOCRScan()
-  },
-  {
-    label: 'Upload în Masă',
+    label: 'Bulk Upload',
     icon: 'pi pi-upload',
     command: () => openBulkFileInput()
   }
@@ -4806,91 +4804,7 @@ const cleanupCompletedBatches = (storedBatchIds) => {
 }
 
 /* US-103: Mobile Bottom Navigation styles now in MobileBottomNav.vue */
-
-/* US-608: Mobile SpeedDial - Floating Action Button with animated options */
-.mobile-speed-dial {
-  position: fixed !important;
-  bottom: 72px; /* 56px bottom nav + 16px spacing */
-  right: var(--space-md);
-  z-index: 999;
-}
-
-/* SpeedDial main button styling */
-.mobile-speed-dial .p-speeddial-button {
-  width: 56px !important;
-  height: 56px !important;
-  border-radius: 50% !important;
-  background: var(--color-primary) !important;
-  border: none !important;
-  box-shadow: var(--shadow-lg) !important;
-  transition: all var(--transition-fast) !important;
-}
-
-.mobile-speed-dial .p-speeddial-button:hover,
-.mobile-speed-dial .p-speeddial-button:focus {
-  background: var(--color-primary-dark) !important;
-  box-shadow: var(--shadow-xl) !important;
-}
-
-.mobile-speed-dial .p-speeddial-button:active {
-  transform: scale(0.95) !important;
-}
-
-.mobile-speed-dial .p-speeddial-button .p-button-icon {
-  font-size: var(--text-2xl) !important;
-  color: var(--color-text-inverse) !important;
-}
-
-/* SpeedDial action buttons styling */
-.mobile-speed-dial .p-speeddial-action {
-  width: 48px !important;
-  height: 48px !important;
-  background: var(--surface-card) !important;
-  border: 1px solid var(--surface-border) !important;
-  box-shadow: var(--shadow-md) !important;
-  transition: all var(--transition-fast) !important;
-}
-
-.mobile-speed-dial .p-speeddial-action:hover,
-.mobile-speed-dial .p-speeddial-action:focus {
-  background: var(--surface-hover) !important;
-  transform: scale(1.1) !important;
-}
-
-.mobile-speed-dial .p-speeddial-action .p-speeddial-action-icon {
-  color: var(--color-primary) !important;
-  font-size: var(--text-lg) !important;
-}
-
-/* SpeedDial mask overlay (background when open) */
-.mobile-speed-dial .p-speeddial-mask {
-  background: rgba(0, 0, 0, 0.4) !important;
-}
-
-/* SpeedDial tooltip labels */
-.mobile-speed-dial .p-speeddial-action::before {
-  content: attr(aria-label);
-  position: absolute;
-  right: 60px;
-  white-space: nowrap;
-  background: var(--surface-card);
-  color: var(--text-color);
-  padding: var(--space-xs) var(--space-sm);
-  border-radius: var(--radius-sm);
-  font-size: var(--text-sm);
-  font-weight: var(--font-medium);
-  box-shadow: var(--shadow-sm);
-  border: 1px solid var(--surface-border);
-  opacity: 0;
-  transform: translateX(10px);
-  transition: all var(--transition-fast);
-  pointer-events: none;
-}
-
-.mobile-speed-dial.p-speeddial-opened .p-speeddial-action::before {
-  opacity: 1;
-  transform: translateX(0);
-}
+/* US-608: SpeedDial styles moved to non-scoped section below */
 
 /* Mobile Sidebar (Hamburger Menu) */
 .mobile-sidebar {
@@ -4991,37 +4905,7 @@ const cleanupCompletedBatches = (storedBatchIds) => {
 }
 
 /* US-103: Dark mode for MobileBottomNav now in component */
-
-/* US-608: Dark mode for SpeedDial */
-[data-theme="dark"] .mobile-speed-dial .p-speeddial-button {
-  background: var(--blue-600) !important;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
-}
-
-[data-theme="dark"] .mobile-speed-dial .p-speeddial-button:hover,
-[data-theme="dark"] .mobile-speed-dial .p-speeddial-button:focus {
-  background: var(--blue-700) !important;
-}
-
-[data-theme="dark"] .mobile-speed-dial .p-speeddial-action {
-  background: var(--surface-card) !important;
-  border-color: var(--surface-border) !important;
-}
-
-[data-theme="dark"] .mobile-speed-dial .p-speeddial-action:hover,
-[data-theme="dark"] .mobile-speed-dial .p-speeddial-action:focus {
-  background: var(--surface-hover) !important;
-}
-
-[data-theme="dark"] .mobile-speed-dial .p-speeddial-action .p-speeddial-action-icon {
-  color: var(--blue-400) !important;
-}
-
-[data-theme="dark"] .mobile-speed-dial .p-speeddial-action::before {
-  background: var(--surface-card);
-  color: var(--text-color);
-  border-color: var(--surface-border);
-}
+/* US-608: Dark mode for SpeedDial moved to non-scoped section */
 
 [data-theme="dark"] .sidebar-item.active,
 [data-theme="dark"] .sidebar-item.router-link-active {
@@ -5062,37 +4946,7 @@ const cleanupCompletedBatches = (storedBatchIds) => {
   }
 
   /* US-103: Auto dark mode for MobileBottomNav now in component */
-
-  /* US-608: Auto dark mode for SpeedDial */
-  :root:not([data-theme]) .mobile-speed-dial .p-speeddial-button {
-    background: var(--blue-600) !important;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
-  }
-
-  :root:not([data-theme]) .mobile-speed-dial .p-speeddial-button:hover,
-  :root:not([data-theme]) .mobile-speed-dial .p-speeddial-button:focus {
-    background: var(--blue-700) !important;
-  }
-
-  :root:not([data-theme]) .mobile-speed-dial .p-speeddial-action {
-    background: var(--surface-card) !important;
-    border-color: var(--surface-border) !important;
-  }
-
-  :root:not([data-theme]) .mobile-speed-dial .p-speeddial-action:hover,
-  :root:not([data-theme]) .mobile-speed-dial .p-speeddial-action:focus {
-    background: var(--surface-hover) !important;
-  }
-
-  :root:not([data-theme]) .mobile-speed-dial .p-speeddial-action .p-speeddial-action-icon {
-    color: var(--blue-400) !important;
-  }
-
-  :root:not([data-theme]) .mobile-speed-dial .p-speeddial-action::before {
-    background: var(--surface-card);
-    color: var(--text-color);
-    border-color: var(--surface-border);
-  }
+  /* US-608: Auto dark mode for SpeedDial moved to non-scoped section */
 
   :root:not([data-theme]) .sidebar-item.active,
   :root:not([data-theme]) .sidebar-item.router-link-active {
@@ -5134,9 +4988,91 @@ const cleanupCompletedBatches = (storedBatchIds) => {
 }
 </style>
 
-<!-- US-608: Non-scoped styles for SpeedDial mask (appended to body) -->
+<!-- US-608: Non-scoped styles for SpeedDial (PrimeVue generates internal DOM) -->
 <style>
+/* US-608: Mobile SpeedDial - Floating Action Button with animated options */
+/* MUST be non-scoped because PrimeVue SpeedDial generates its own DOM structure */
+.mobile-speed-dial {
+  position: fixed !important;
+  bottom: 72px !important; /* 56px bottom nav + 16px spacing */
+  right: var(--space-md) !important;
+  z-index: 999 !important;
+}
+
+/* SpeedDial main button styling */
+.mobile-speed-dial .p-speeddial-button {
+  width: 56px !important;
+  height: 56px !important;
+  border-radius: 50% !important;
+  background: var(--color-primary) !important;
+  border: none !important;
+  box-shadow: var(--shadow-lg) !important;
+  transition: all var(--transition-fast) !important;
+}
+
+.mobile-speed-dial .p-speeddial-button:hover,
+.mobile-speed-dial .p-speeddial-button:focus {
+  background: var(--color-primary-dark) !important;
+  box-shadow: var(--shadow-xl) !important;
+}
+
+.mobile-speed-dial .p-speeddial-button:active {
+  transform: scale(0.95) !important;
+}
+
+.mobile-speed-dial .p-speeddial-button .p-button-icon {
+  font-size: var(--text-2xl) !important;
+  color: var(--color-text-inverse) !important;
+}
+
+/* SpeedDial action buttons styling */
+.mobile-speed-dial .p-speeddial-action {
+  width: 48px !important;
+  height: 48px !important;
+  background: var(--surface-card) !important;
+  border: 1px solid var(--surface-border) !important;
+  box-shadow: var(--shadow-md) !important;
+  transition: all var(--transition-fast) !important;
+}
+
+.mobile-speed-dial .p-speeddial-action:hover,
+.mobile-speed-dial .p-speeddial-action:focus {
+  background: var(--surface-hover) !important;
+  transform: scale(1.1) !important;
+}
+
+.mobile-speed-dial .p-speeddial-action .p-speeddial-action-icon {
+  color: var(--color-primary) !important;
+  font-size: var(--text-lg) !important;
+}
+
+/* SpeedDial tooltip labels */
+.mobile-speed-dial .p-speeddial-action::before {
+  content: attr(aria-label);
+  position: absolute;
+  right: 60px;
+  white-space: nowrap;
+  background: var(--surface-card);
+  color: var(--text-color);
+  padding: var(--space-xs) var(--space-sm);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--surface-border);
+  opacity: 0;
+  transform: translateX(10px);
+  transition: all var(--transition-fast);
+  pointer-events: none;
+}
+
+.mobile-speed-dial.p-speeddial-opened .p-speeddial-action::before {
+  opacity: 1;
+  transform: translateX(0);
+}
+
 /* US-608: SpeedDial mask overlay - appears when SpeedDial is open */
+/* CRITICAL: pointer-events: none by default to not block clicks when closed */
 .p-speeddial-mask.mobile-speed-dial-mask {
   position: fixed !important;
   top: 0 !important;
@@ -5145,6 +5081,13 @@ const cleanupCompletedBatches = (storedBatchIds) => {
   height: 100% !important;
   background: rgba(0, 0, 0, 0.5) !important;
   z-index: 998 !important;
+  pointer-events: none !important; /* Don't block clicks when mask is invisible */
+}
+
+/* Enable pointer events only when SpeedDial is actually open */
+.p-speeddial-opened ~ .p-speeddial-mask.mobile-speed-dial-mask,
+.mobile-speed-dial.p-speeddial-opened ~ .p-speeddial-mask.mobile-speed-dial-mask {
+  pointer-events: auto !important;
   animation: fadeIn 200ms ease-out !important;
 }
 
@@ -5153,12 +5096,74 @@ const cleanupCompletedBatches = (storedBatchIds) => {
   to { opacity: 1; }
 }
 
+/* Dark mode for SpeedDial button and actions */
+[data-theme="dark"] .mobile-speed-dial .p-speeddial-button {
+  background: var(--blue-600) !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
+}
+
+[data-theme="dark"] .mobile-speed-dial .p-speeddial-button:hover,
+[data-theme="dark"] .mobile-speed-dial .p-speeddial-button:focus {
+  background: var(--blue-700) !important;
+}
+
+[data-theme="dark"] .mobile-speed-dial .p-speeddial-action {
+  background: var(--surface-card) !important;
+  border-color: var(--surface-border) !important;
+}
+
+[data-theme="dark"] .mobile-speed-dial .p-speeddial-action:hover,
+[data-theme="dark"] .mobile-speed-dial .p-speeddial-action:focus {
+  background: var(--surface-hover) !important;
+}
+
+[data-theme="dark"] .mobile-speed-dial .p-speeddial-action .p-speeddial-action-icon {
+  color: var(--blue-400) !important;
+}
+
+[data-theme="dark"] .mobile-speed-dial .p-speeddial-action::before {
+  background: var(--surface-card);
+  color: var(--text-color);
+  border-color: var(--surface-border);
+}
+
 /* Dark mode mask */
 [data-theme="dark"] .p-speeddial-mask.mobile-speed-dial-mask {
   background: rgba(0, 0, 0, 0.7) !important;
 }
 
+/* Auto dark mode (prefers-color-scheme) for SpeedDial */
 @media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) .mobile-speed-dial .p-speeddial-button {
+    background: var(--blue-600) !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
+  }
+
+  :root:not([data-theme]) .mobile-speed-dial .p-speeddial-button:hover,
+  :root:not([data-theme]) .mobile-speed-dial .p-speeddial-button:focus {
+    background: var(--blue-700) !important;
+  }
+
+  :root:not([data-theme]) .mobile-speed-dial .p-speeddial-action {
+    background: var(--surface-card) !important;
+    border-color: var(--surface-border) !important;
+  }
+
+  :root:not([data-theme]) .mobile-speed-dial .p-speeddial-action:hover,
+  :root:not([data-theme]) .mobile-speed-dial .p-speeddial-action:focus {
+    background: var(--surface-hover) !important;
+  }
+
+  :root:not([data-theme]) .mobile-speed-dial .p-speeddial-action .p-speeddial-action-icon {
+    color: var(--blue-400) !important;
+  }
+
+  :root:not([data-theme]) .mobile-speed-dial .p-speeddial-action::before {
+    background: var(--surface-card);
+    color: var(--text-color);
+    border-color: var(--surface-border);
+  }
+
   :root:not([data-theme]) .p-speeddial-mask.mobile-speed-dial-mask {
     background: rgba(0, 0, 0, 0.7) !important;
   }
diff --git a/src/modules/reports/components/dashboard/cards/MaturityAnalysisCard.vue b/src/modules/reports/components/dashboard/cards/MaturityAnalysisCard.vue
index 2093d56..6b74438 100644
--- a/src/modules/reports/components/dashboard/cards/MaturityAnalysisCard.vue
+++ b/src/modules/reports/components/dashboard/cards/MaturityAnalysisCard.vue
@@ -353,6 +353,7 @@ onMounted(() => {
 }
 
 /* Card Controls (period selector) */
+/* US-706: Reduced padding/margin on mobile for less top spacing */
 .card-controls {
   display: flex;
   justify-content: flex-end;
@@ -362,6 +363,15 @@ onMounted(() => {
   margin-bottom: var(--space-md);
 }
 
+@media (max-width: 768px) {
+  .card-controls {
+    padding: var(--space-xs) var(--space-sm);
+    margin-bottom: 0;
+    background: transparent;
+    border-radius: 0;
+  }
+}
+
 .period-selector {
   padding: var(--space-sm) var(--space-md);
   border: 1px solid var(--surface-border);
@@ -390,6 +400,7 @@ onMounted(() => {
 }
 
 /* Loading and Error States */
+/* US-706: Reduced padding on mobile */
 .loading-state,
 .error-state {
   display: flex;
@@ -400,6 +411,13 @@ onMounted(() => {
   text-align: center;
 }
 
+@media (max-width: 768px) {
+  .loading-state,
+  .error-state {
+    padding: var(--space-md, 1rem);
+  }
+}
+
 .loading-spinner {
   width: 32px;
   height: 32px;
@@ -431,6 +449,7 @@ onMounted(() => {
 }
 
 /* Tab content */
+/* US-706: Reduced min-height and padding on mobile */
 .tab-content {
   padding: var(--space-md);
   min-height: 200px;
@@ -438,6 +457,13 @@ onMounted(() => {
   flex-direction: column;
 }
 
+@media (max-width: 768px) {
+  .tab-content {
+    padding: var(--space-sm);
+    min-height: 100px;
+  }
+}
+
 /* Tab summary */
 .tab-summary {
   display: flex;
@@ -484,27 +510,12 @@ onMounted(() => {
 }
 
 /* Maturity Lists */
+/* US-706: Removed max-height and overflow-y to integrate list into page scroll
+   (no separate scrollable container - matches Facturi Detaliate pattern) */
 .maturity-list {
   display: flex;
   flex-direction: column;
   gap: var(--space-sm, 0.5rem);
-  max-height: 400px;
-  overflow-y: auto;
-  padding-right: var(--space-xs, 0.25rem);
-}
-
-.maturity-list::-webkit-scrollbar {
-  width: 4px;
-}
-
-.maturity-list::-webkit-scrollbar-track {
-  background: var(--color-bg-secondary, #f8f9fa);
-  border-radius: 2px;
-}
-
-.maturity-list::-webkit-scrollbar-thumb {
-  background: var(--color-border);
-  border-radius: 2px;
 }
 
 /* Maturity Items */
@@ -749,10 +760,7 @@ onMounted(() => {
     width: 100%;
   }
 
-  /* US-704: Increased max-height for more visible rows */
-  .maturity-list {
-    max-height: 350px;
-  }
+  /* US-706: Removed max-height - list integrates into page scroll */
 
   /* US-608: Mobile tab adjustments */
   .tab-content {
@@ -785,9 +793,7 @@ onMounted(() => {
 }
 
 @media (max-width: 480px) {
-  .maturity-list {
-    max-height: 350px;
-  }
+  /* US-706: Removed max-height - list integrates into page scroll */
 
   .balance-indicator,
   .card-footer {
diff --git a/src/modules/reports/views/MaturityAnalysisView.vue b/src/modules/reports/views/MaturityAnalysisView.vue
index 2d6d222..41025fb 100644
--- a/src/modules/reports/views/MaturityAnalysisView.vue
+++ b/src/modules/reports/views/MaturityAnalysisView.vue
@@ -193,7 +193,9 @@ onUnmounted(() => {
 
 <style scoped>
 /* Mobile Layout - Padding for fixed top/bottom bars */
+/* US-706: Override margin-top from containers.css to eliminate gap between tabs and content */
 .main-content.mobile-layout {
+  margin-top: 0 !important;
   padding-top: 56px;
   padding-bottom: 56px;
 }
@@ -204,15 +206,17 @@ onUnmounted(() => {
 }
 
 /* App container */
+/* US-705: Reduced padding for less top spacing - sm (8px) instead of lg (24px) */
 .app-container {
   max-width: 1400px;
   margin: 0 auto;
-  padding: var(--space-lg);
+  padding: var(--space-sm) var(--space-lg);
 }
 
 @media (max-width: 768px) {
   .app-container {
-    padding: var(--space-md);
+    /* US-706: Minimal vertical padding on mobile - content starts immediately after tabs */
+    padding: var(--space-xs) var(--space-md);
   }
 }
 
@@ -344,6 +348,12 @@ onUnmounted(() => {
   gap: var(--space-lg);
 }
 
+@media (max-width: 768px) {
+  .maturity-content {
+    gap: var(--space-sm);
+  }
+}
+
 /* Empty state styles */
 .empty-state {
   display: flex;