From a882ccb0a2dc050b1a9e6bfef15393e86895bcda Mon Sep 17 00:00:00 2001
From: Marius Mutu <mmarius28@gmail.com>
Date: Wed, 10 Dec 2025 12:22:08 +0200
Subject: [PATCH] fix: Show page titles on mobile and simplify Dashboard title
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix main content margin-top in App.vue to account for fixed header
  (was hidden behind 56px header bar)
- Add mobile page header styles in mobile.css for proper title visibility
- Increase mobile totals font size to match table font (0.875rem base)
- Change Dashboard title to just "Dashboard" without subtitle
  (period selector now shows the current accounting period)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 reports-app/frontend/src/App.vue              |  4 ++--
 .../frontend/src/assets/css/mobile.css        | 22 ++++++++++++++++---
 .../frontend/src/views/DashboardView.vue      |  5 +----
 3 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/reports-app/frontend/src/App.vue b/reports-app/frontend/src/App.vue
index 86a71fb..be575db 100644
--- a/reports-app/frontend/src/App.vue
+++ b/reports-app/frontend/src/App.vue
@@ -86,8 +86,8 @@ onMounted(async () => {
 }
 
 .main-content.with-navbar {
-  margin-top: 0;
-  min-height: calc(100vh - 70px);
+  margin-top: var(--header-height, 56px);
+  min-height: calc(100vh - var(--header-height, 56px));
 }
 
 .main-content:not(.with-navbar) {
diff --git a/reports-app/frontend/src/assets/css/mobile.css b/reports-app/frontend/src/assets/css/mobile.css
index 8ef6dec..cf2ccdf 100644
--- a/reports-app/frontend/src/assets/css/mobile.css
+++ b/reports-app/frontend/src/assets/css/mobile.css
@@ -45,6 +45,22 @@
   }
 }
 
+/* Mobile Page Headers - Ensure titles are visible */
+@media (max-width: 768px) {
+  .page-header {
+    margin-bottom: var(--space-md, 1rem);
+    text-align: center;
+  }
+
+  .page-title {
+    font-size: 1.5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5rem;
+  }
+}
+
 /* Mobile DataTable Enhancements */
 @media (max-width: 768px) {
   .p-datatable .p-datatable-wrapper {
@@ -903,7 +919,7 @@
   padding: 0.5rem 0.75rem;
   background: var(--surface-ground, #f8fafc);
   border-radius: 6px;
-  font-size: 0.8125rem;
+  font-size: 0.875rem;
   width: 100%;
 }
 
@@ -927,14 +943,14 @@
 
 .mobile-totals-grid .total-label {
   color: var(--text-color-secondary, #64748b);
-  font-size: 0.75rem;
+  font-size: 0.8125rem;
   white-space: nowrap;
 }
 
 .mobile-totals-grid .total-value {
   font-weight: 600;
   font-variant-numeric: tabular-nums;
-  font-size: 0.875rem;
+  font-size: 0.9375rem;
 }
 
 .mobile-totals-grid .total-value.incasari,
diff --git a/reports-app/frontend/src/views/DashboardView.vue b/reports-app/frontend/src/views/DashboardView.vue
index 7646033..3c38096 100644
--- a/reports-app/frontend/src/views/DashboardView.vue
+++ b/reports-app/frontend/src/views/DashboardView.vue
@@ -3,10 +3,7 @@
     <div class="app-container">
       <!-- Dashboard Header -->
       <div class="page-header">
-        <h1 class="page-title">
-          {{ companyStore.selectedCompany?.name || "Dashboard Principal" }}
-        </h1>
-        <p class="page-subtitle">{{ currentMonthLabel }}</p>
+        <h1 class="page-title">Dashboard</h1>
       </div>
 
       <!-- Company selection removed - now handled in header only -->