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

MelissaFinanceiro mobile: .mf-card 300px fixo + scroll interno

Browse Source 
Em mobile cada .mf-card tem min/max-height 300px com scroll no body
(flex: 1 + min-height: 0 + overflow-y: auto). Garante que o "Ultimos
lancamentos" fique visivel e cada card tenha altura previsivel sem
consumir toda a altura do .mf-body. Chart wrap vira flex: 1 dentro
do body de 300px - head.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Leonardo
2026-05-06 14:11:46 -03:00
parent 0a24fd6233
commit 6495cefb7e
1 changed files with 17 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/melissa/MelissaFinanceiro.vue
+17 -12
View File
@@ -885,25 +885,30 @@ onMounted(async () => {
order: -1;
margin-left: 0;
}
/* Row 50/50 empilha em mobile, com altura natural por card.
Reseta flex/overflow do desktop pra evitar que os cards
consumam toda a altura do .mf-body e empurrem o
"Ultimos lancamentos" pra fora do scroll. */
/* Row 50/50 empilha em mobile. Todo .mf-card vira slot fixo de
300px com scroll interno no body — assim o "Ultimos lancamentos"
nao some e cada card mantem altura previsivel. */
.mf-cards-row {
flex-direction: column;
}
.mf-cards-row > .mf-card {
flex: 0 0 auto;
}
.mf-cards-row > .mf-card .mf-card__body {
flex: 0 0 auto;
min-height: 0;
overflow-y: visible;
.mf-card {
min-height: 300px;
max-height: 300px;
display: flex;
flex-direction: column;
}
.mf-cards-row > .mf-card--chart .mf-chart-wrap {
flex: 0 0 auto;
height: 240px;
min-height: 240px;
.mf-card__body {
flex: 1;
min-height: 0;
overflow-y: auto;
}
.mf-card--chart .mf-chart-wrap {
flex: 1;
height: auto;
min-height: 0;
}
}
</style>