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:
@@ -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; }
|
||||
|
||||
@@ -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) ═══════ */
|
||||
|
||||
Reference in New Issue
Block a user