diff --git a/src/layout/melissa/MelissaAlterarPlano.vue b/src/layout/melissa/MelissaAlterarPlano.vue index f388bc7..853d12b 100644 --- a/src/layout/melissa/MelissaAlterarPlano.vue +++ b/src/layout/melissa/MelissaAlterarPlano.vue @@ -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; } diff --git a/src/layout/melissa/MelissaPlano.vue b/src/layout/melissa/MelissaPlano.vue index 029aef6..2d50c2a 100644 --- a/src/layout/melissa/MelissaPlano.vue +++ b/src/layout/melissa/MelissaPlano.vue @@ -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) ═══════ */