Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MelissaPaciente: fix sidebar cards encolhendo + gap das abas main

Browse Source 
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>
This commit is contained in:
Leonardo
2026-05-08 10:55:38 -03:00
parent 159b80db6c
commit 5d2c389486
1 changed files with 22 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/melissa/MelissaPaciente.vue
+22
View File
@@ -2086,6 +2086,28 @@ onBeforeUnmount(() => {
border-radius: 3px; 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 { .mpa-cfg-btn {
display: flex; display: flex;
align-items: center; align-items: center;