From 5d2c3894860dced759882ac92d52fc8321cea3aa Mon Sep 17 00:00:00 2001
From: Leonardo <lmnohama@gmail.com>
Date: Fri, 8 May 2026 10:55:38 -0300
Subject: [PATCH] MelissaPaciente: fix sidebar cards encolhendo + gap das abas
 main
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

DOIS BUGS DE LAYOUT corrigidos via CSS (post-Fase 8 polish):

1. CARDS DA SIDEBAR sendo encolhidos
   .mpa-side__scroll eh display:flex flex-direction:column. Os cards
   .mpa-w filhos NAO tinham flex-shrink:0, entao quando havia muitos
   cards stacked (Acoes + Nav 7 tabs + Sub-nav Perfil 6 + Vinculos),
   o flex shrink default (1) reduzia cada card proporcionalmente.
   Combinado com .mpa-w { overflow:hidden } (necessario pro radius),
   itens internos das listas eram cortados/escondidos.
   FIX: .mpa-side__scroll > .mpa-w { flex-shrink: 0; height: auto; }
   Agora cada card cresce ate o tamanho real do conteudo, e o scroll
   vertical do .mpa-side__scroll lida com overflow.

2. ABAS DO MAIN sem gap entre elementos
   <div class="mpa-tab"> nao tinha CSS definido. Os filhos (KPIs grid,
   panels, cards) ficavam colados. .mpa-main eh flex-col com gap, mas
   como cada aba envolve seus elementos num <div .mpa-tab>, esse div
   precisa replicar o spacing.
   FIX: .mpa-tab { display: flex; flex-direction: column; gap: 12px; }

Visivel em todas as 7 abas. Fase 1 ja deveria ter incluido — passou
despercebido.

ESLint: 0 errors.

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

diff --git a/src/layout/melissa/MelissaPaciente.vue b/src/layout/melissa/MelissaPaciente.vue
index 15a7f6a..26b5f1b 100644
--- a/src/layout/melissa/MelissaPaciente.vue
+++ b/src/layout/melissa/MelissaPaciente.vue
@@ -2086,6 +2086,28 @@ onBeforeUnmount(() => {
     border-radius: 3px;
 }
 
+/* Cards da sidebar (.mpa-w) NUNCA podem encolher — caso contrario o flex
+   shrink default (1) corta conteudo quando ha muitos cards stacked
+   (Acoes + Nav 7 tabs + Sub-nav Perfil 6 + Vinculos). Combinado com o
+   overflow:hidden do .mpa-w (necessario pro radius), cards encolhidos
+   perdem itens da lista interna. flex-shrink: 0 + altura auto garante
+   que cada card cresce ate o tamanho real do conteudo, e o
+   .mpa-side__scroll lida com overflow via scroll vertical. */
+.mpa-side__scroll > .mpa-w {
+    flex-shrink: 0;
+    height: auto;
+}
+
+/* Wrapper de cada aba do main: precisa de display:flex + gap senao os
+   filhos (KPIs grid + cards + panels) ficam colados. .mpa-main ja eh
+   flex-col com gap, mas como cada aba envolve seus elementos num div
+   .mpa-tab, ESSE div precisa replicar o spacing. */
+.mpa-tab {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
 .mpa-cfg-btn {
     display: flex;
     align-items: center;