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 () => { +
-
+
@@ -320,7 +321,7 @@ onMounted(async () => {
-
+
@@ -378,8 +379,10 @@ onMounted(async () => {
+
+ -
+
@@ -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; + } }