From 6d693a0a3bb9af15292be0905e41ea8376232087 Mon Sep 17 00:00:00 2001
From: Leonardo <lmnohama@gmail.com>
Date: Wed, 6 May 2026 13:56:32 -0300
Subject: [PATCH] MelissaRelatorios: chart + tabela 50/50 + min-height mobile

Wrappa "Sessoes por mes/semana" e "Sessoes no periodo" em .mr-charts-row
flex 50/50 lado a lado em desktop. Mobile empilha (column) e a tabela
ganha min-height: 360px pra nao colapsar pra ~50px em telas curtas.
Chart wrap/skel viram flex: 1 dentro do card-chart pra acompanhar a
altura compartilhada da row.

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

diff --git a/src/layout/melissa/MelissaRelatorios.vue b/src/layout/melissa/MelissaRelatorios.vue
index 1dde579..0dc2ddd 100644
--- a/src/layout/melissa/MelissaRelatorios.vue
+++ b/src/layout/melissa/MelissaRelatorios.vue
@@ -429,8 +429,9 @@ onBeforeUnmount(() => {
                     <span>{{ loadError }}</span>
                 </div>
 
+                <div class="mr-charts-row">
                 <!-- Gráfico -->
-                <div class="mr-card">
+                <div class="mr-card mr-card--chart">
                     <div class="mr-card__head">
                         <div class="mr-card__icon">
                             <i class="pi pi-chart-bar" />
@@ -528,6 +529,7 @@ onBeforeUnmount(() => {
                         </Column>
                     </DataTable>
                 </div>
+                </div><!-- /.mr-charts-row -->
             </div>
         </div>
     </section>
@@ -912,6 +914,20 @@ onBeforeUnmount(() => {
     flex-shrink: 0;
 }
 
+/* Row 50/50 — chart + tabela lado a lado em desktop */
+.mr-charts-row {
+    display: flex;
+    flex-direction: row;
+    gap: 12px;
+    flex: 1;
+    min-height: 0;
+}
+.mr-charts-row > .mr-card {
+    flex: 1 1 50%;
+    min-width: 0;
+    min-height: 0;
+}
+
 /* Card-base */
 .mr-card {
     background: var(--m-bg-soft);
@@ -920,6 +936,22 @@ onBeforeUnmount(() => {
     overflow: hidden;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
+.mr-card--chart {
+    display: flex;
+    flex-direction: column;
+}
+.mr-card--chart .mr-card__body {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+}
+.mr-card--chart .mr-chart-wrap,
+.mr-card--chart .mr-chart-skel {
+    flex: 1;
+    height: auto;
+    min-height: 200px;
+}
 .mr-card--table {
     flex: 1;
     min-height: 0;
@@ -1165,5 +1197,20 @@ onBeforeUnmount(() => {
     .mr-page__title-icon { display: none; }
     .mr-menu-btn--mobile-only { display: inline-flex; }
     .mr-stats { grid-template-columns: repeat(3, 1fr); }
+    /* Em mobile empilha chart + tabela; tabela ganha min-height pra
+       nao colapsar pra ~50px em telas curtas. */
+    .mr-charts-row {
+        flex-direction: column;
+        flex: 1 0 auto;
+    }
+    .mr-card--chart .mr-chart-wrap,
+    .mr-card--chart .mr-chart-skel {
+        height: 240px;
+        min-height: 240px;
+    }
+    .mr-card--table {
+        min-height: 360px;
+        flex: 1 0 360px;
+    }
 }
 </style>