From ef4c4d0fac00f76a6f6449adeb1694396304b04b Mon Sep 17 00:00:00 2001
From: Leonardo <lmnohama@gmail.com>
Date: Wed, 6 May 2026 14:04:59 -0300
Subject: [PATCH] MelissaFinanceiro: chart + projecao 50/50, lancamentos
 full-width

Wrappa "Receita x Despesa" e "Projecao de Caixa" em .mf-cards-row
flex 50/50 lado a lado em desktop (alturas iguais via align-items:
stretch + body flex: 1 com scroll interno). "Ultimos lancamentos"
fica full-width abaixo.

Mobile empilha (column), chart wrap volta pra altura fixa 240px,
body sem scroll interno (.mf-body ja scrolla).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/layout/melissa/MelissaFinanceiro.vue | 48 ++++++++++++++++++++++--
 1 file changed, 45 insertions(+), 3 deletions(-)

diff --git a/src/layout/melissa/MelissaFinanceiro.vue b/src/layout/melissa/MelissaFinanceiro.vue
index 96a7d92..c267b9a 100644
--- a/src/layout/melissa/MelissaFinanceiro.vue
+++ b/src/layout/melissa/MelissaFinanceiro.vue
@@ -295,8 +295,9 @@ onMounted(async () => {
                 </template>
             </div>
 
+            <div class="mf-cards-row">
             <!-- ═══ 2. Gráfico Receita × Despesa ════════════ -->
-            <div class="mf-card">
+            <div class="mf-card mf-card--chart">
                 <div class="mf-card__head">
                     <div class="mf-card__icon mf-card__icon--primary">
                         <i class="pi pi-chart-bar" />
@@ -320,7 +321,7 @@ onMounted(async () => {
             </div>
 
             <!-- ═══ 3. Projeção de Caixa ════════════════════ -->
-            <div class="mf-card">
+            <div class="mf-card mf-card--cashflow">
                 <div class="mf-card__head">
                     <div class="mf-card__icon mf-card__icon--primary">
                         <i class="pi pi-calendar" />
@@ -378,8 +379,10 @@ onMounted(async () => {
                 </div>
             </div>
 
+            </div><!-- /.mf-cards-row -->
+
             <!-- ═══ 4. Últimos lançamentos ══════════════════ -->
-            <div class="mf-card">
+            <div class="mf-card mf-card--recent">
                 <div class="mf-card__head">
                     <div class="mf-card__icon mf-card__icon--primary">
                         <i class="pi pi-list" />
@@ -671,6 +674,34 @@ onMounted(async () => {
     border-color: var(--m-border);
 }
 
+/* ─── Row 50/50: Chart + Projeção lado a lado em desktop ─── */
+.mf-cards-row {
+    display: flex;
+    flex-direction: row;
+    gap: 12px;
+    align-items: stretch;
+}
+.mf-cards-row > .mf-card {
+    flex: 1 1 50%;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+}
+.mf-cards-row > .mf-card .mf-card__body {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+}
+.mf-cards-row > .mf-card--chart .mf-card__body {
+    display: flex;
+    flex-direction: column;
+}
+.mf-cards-row > .mf-card--chart .mf-chart-wrap {
+    flex: 1;
+    height: auto;
+    min-height: 240px;
+}
+
 /* ─── Card-base (Gráfico, Projeção, Lançamentos) ─── */
 .mf-card {
     background: var(--m-bg-soft);
@@ -854,5 +885,16 @@ onMounted(async () => {
         order: -1;
         margin-left: 0;
     }
+    /* Row 50/50 empilha em mobile, com altura natural por card */
+    .mf-cards-row {
+        flex-direction: column;
+    }
+    .mf-cards-row > .mf-card .mf-card__body {
+        overflow-y: visible;
+    }
+    .mf-cards-row > .mf-card--chart .mf-chart-wrap {
+        height: 240px;
+        min-height: 240px;
+    }
 }
 </style>