From 7c0c1b35288280e3e64685494c3a4f6da1d644c9 Mon Sep 17 00:00:00 2001
From: Leonardo <lmnohama@gmail.com>
Date: Wed, 6 May 2026 15:51:47 -0300
Subject: [PATCH] MelissaPlano/AlterarPlano desktop: cards min-h 300 + body
 scroll
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/layout/melissa/MelissaAlterarPlano.vue | 26 +++++++++++++++++
 src/layout/melissa/MelissaPlano.vue        | 34 ++++++++++++++++++++--
 2 files changed, 58 insertions(+), 2 deletions(-)

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) ═══════ */