MelissaPlano/AlterarPlano desktop: cards min-h 300 + body scroll

Aplica o mesmo fix do MelissaPerfil/Negocio:
- align-items: start no grid (cells nao stretch p/ row height)
- Cards min-height 300px + max-height 100% (do container)
- .mpl-w__body / .map-w__body com flex: 1 + min-height: 0 +
  overflow-y: auto (scrollbar fina)

MelissaPlano: vale pros 2 cards do main (Recursos / Historico) e
pros 2 cards da sidebar (Plano atual / Resumo) — quando o user
tem features longas ou muitos eventos, scroll interno engata.

MelissaAlterarPlano: aplicado SO na sidebar (Plano atual / Filtros).
Os plan cards do main (.map-plan) ficam fora — sao product cards
com layout proprio (preco grande + 3 CTAs).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Leonardo
2026-05-06 15:51:47 -03:00
parent 5db6000c2c
commit 7c0c1b3528
2 changed files with 58 additions and 2 deletions
@@ -1065,6 +1065,32 @@ onMounted(async () => {
.map-drawer-fade-enter-from,
.map-drawer-fade-leave-to { opacity: 0; }
/* Desktop (>=1024): cards da sidebar (Plano atual + Filtros) ganham
min-h 300 + max-h 100% + body com overflow-y: auto pra nao
crescerem demais quando tem texto longo. Plan cards do main
(.map-plan) ficam fora — sao product cards com layout proprio. */
@media (min-width: 1024px) {
.map-side > .map-side__scroll > .map-w--side {
min-height: 300px;
max-height: 100%;
display: flex;
flex-direction: column;
}
.map-side .map-w--side > .map-w__body {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: var(--m-border-strong) transparent;
}
.map-side .map-w--side > .map-w__body::-webkit-scrollbar { width: 5px; }
.map-side .map-w--side > .map-w__body::-webkit-scrollbar-thumb {
background: var(--m-border-strong);
border-radius: 3px;
}
}
/* ═══════ Mobile (<1024px) ═══════ */
@media (max-width: 1023px) {
.map-body { flex-direction: column; padding: 0; }
+32 -2
View File
@@ -848,15 +848,45 @@ onMounted(async () => {
border-radius: 3px;
}
/* Desktop (>=1024): main em grid 2-col, internal grids colapsam.
Os 2 cards (Recursos + Historico) ficam lado a lado. */
/* Desktop (>=1024): main em grid 2-col, cards min-h 300 + max-h 100%
+ body com overflow-y: auto. Sidebar (Plano atual + Resumo) ganha
o mesmo cap pra nao crescer demais quando tem features/eventos longos. */
@media (min-width: 1024px) {
.mpl-main {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
align-items: start;
align-content: start;
}
.mpl-main > .mpl-w {
min-height: 300px;
max-height: 100%;
display: flex;
flex-direction: column;
}
.mpl-side > .mpl-side__scroll > .mpl-w--side {
min-height: 300px;
max-height: 100%;
display: flex;
flex-direction: column;
}
.mpl-main > .mpl-w > .mpl-w__body,
.mpl-side .mpl-w--side > .mpl-w__body {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: var(--m-border-strong) transparent;
}
.mpl-main > .mpl-w > .mpl-w__body::-webkit-scrollbar,
.mpl-side .mpl-w--side > .mpl-w__body::-webkit-scrollbar { width: 5px; }
.mpl-main > .mpl-w > .mpl-w__body::-webkit-scrollbar-thumb,
.mpl-side .mpl-w--side > .mpl-w__body::-webkit-scrollbar-thumb {
background: var(--m-border-strong);
border-radius: 3px;
}
}
/* ═══════ Card-base (estilo MelissaFinanceiro/MelissaPerfil) ═══════ */