From d49248979a31eb588024d31aeb13fef88708cfe2 Mon Sep 17 00:00:00 2001 From: Leonardo Date: Wed, 6 May 2026 16:50:04 -0300 Subject: [PATCH] MelissaAgendaConfig: cards do main com altura por conteudo + scroll interno Aplica o mesmo pattern dos outros (Perfil/Negocio/Plano): - Em desktop, cada .mac-main > .mac-w ganha min-height: 300px + max-height: 100% (do .mac-main). - Body com flex: 1 + min-height: 0 + overflow-y: auto. Quando o usuario alterna pra "Diferente por dia" (Jornada), pra "Personalizar" (Ritmo) ou expande slots (Online), o card cresce ate o teto do main e depois passa a scrollar internamente em vez de empurrar os cards seguintes pra fora. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/layout/melissa/MelissaAgendaConfig.vue | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/src/layout/melissa/MelissaAgendaConfig.vue b/src/layout/melissa/MelissaAgendaConfig.vue index 9a91f3e..16e8857 100644 --- a/src/layout/melissa/MelissaAgendaConfig.vue +++ b/src/layout/melissa/MelissaAgendaConfig.vue @@ -1575,7 +1575,10 @@ onBeforeUnmount(() => { } /* Desktop (>=1024): main fica em coluna unica (cards muito densos - pra split 50/50). Sidebar e body com scroll interno. */ + pra split 50/50). Sidebar e cards do main ganham min-h 300 + + max-h 100% + body overflow-y: auto pra que mudar de modo + (igual/diferente, adicionar pausas, etc) nao quebre o layout — + cada card scrolla por conta propria sem empurrar os outros. */ @media (min-width: 1024px) { .mac-side > .mac-side__scroll > .mac-w--side { min-height: 300px; @@ -1583,7 +1586,14 @@ onBeforeUnmount(() => { display: flex; flex-direction: column; } - .mac-side .mac-w--side > .mac-w__body { + .mac-main > .mac-w { + min-height: 300px; + max-height: 100%; + display: flex; + flex-direction: column; + } + .mac-side .mac-w--side > .mac-w__body, + .mac-main > .mac-w > .mac-w__body { flex: 1; min-height: 0; overflow-y: auto; @@ -1591,8 +1601,10 @@ onBeforeUnmount(() => { scrollbar-width: thin; scrollbar-color: var(--m-border-strong) transparent; } - .mac-side .mac-w--side > .mac-w__body::-webkit-scrollbar { width: 5px; } - .mac-side .mac-w--side > .mac-w__body::-webkit-scrollbar-thumb { + .mac-side .mac-w--side > .mac-w__body::-webkit-scrollbar, + .mac-main > .mac-w > .mac-w__body::-webkit-scrollbar { width: 5px; } + .mac-side .mac-w--side > .mac-w__body::-webkit-scrollbar-thumb, + .mac-main > .mac-w > .mac-w__body::-webkit-scrollbar-thumb { background: var(--m-border-strong); border-radius: 3px; }