diff --git a/src/layout/melissa/MelissaNegocio.vue b/src/layout/melissa/MelissaNegocio.vue index d4eb0f8..173ef76 100644 --- a/src/layout/melissa/MelissaNegocio.vue +++ b/src/layout/melissa/MelissaNegocio.vue @@ -1090,13 +1090,45 @@ onBeforeUnmount(() => { border-radius: 3px; } +/* Desktop (>=1024px): cards 2-col 50/50, min-height 300px, max-height + 100% do container, body com overflow-y: auto pra adicionar redes + sem quebrar layout. Mesma logica na sidebar (Sua presença, Logomarca). */ @media (min-width: 1024px) { .mng-main { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; + align-items: start; align-content: start; } + .mng-main > .mng-w { + min-height: 300px; + max-height: 100%; + display: flex; + flex-direction: column; + } + .mng-side > .mng-side__scroll > .mng-w--side { + min-height: 300px; + max-height: 100%; + display: flex; + flex-direction: column; + } + .mng-main > .mng-w > .mng-w__body, + .mng-side .mng-w--side > .mng-w__body { + flex: 1; + min-height: 0; + overflow-y: auto; + overflow-x: hidden; + scrollbar-width: thin; + scrollbar-color: var(--m-border-strong) transparent; + } + .mng-main > .mng-w > .mng-w__body::-webkit-scrollbar, + .mng-side .mng-w--side > .mng-w__body::-webkit-scrollbar { width: 5px; } + .mng-main > .mng-w > .mng-w__body::-webkit-scrollbar-thumb, + .mng-side .mng-w--side > .mng-w__body::-webkit-scrollbar-thumb { + background: var(--m-border-strong); + border-radius: 3px; + } .mng-main .mng-grid { grid-template-columns: 1fr; } diff --git a/src/layout/melissa/MelissaPerfil.vue b/src/layout/melissa/MelissaPerfil.vue index caab862..dfcf66a 100644 --- a/src/layout/melissa/MelissaPerfil.vue +++ b/src/layout/melissa/MelissaPerfil.vue @@ -1118,15 +1118,48 @@ onBeforeUnmount(() => { border-radius: 3px; } -/* Desktop (>=1024px): cards em 2 colunas (50/50). Internal grid - colapsa pra 1 col pra nao ficar cramped. */ +/* Desktop (>=1024px): cards em 2 colunas (50/50) no main. Internal + grid colapsa pra 1 col pra nao ficar cramped. Cada card tem + min-height 300px + max-height 100% (do container) e overflow-y: + auto no body — adicionar redes/customs nao quebra layout, scroll + interno engata. Mesma logica nos cards da sidebar (Sua evolucao, + Avatar) que cresciam quando muitas badges/dicas apareciam. */ @media (min-width: 1024px) { .mpr-main { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; + align-items: start; align-content: start; } + .mpr-main > .mpr-w { + min-height: 300px; + max-height: 100%; + display: flex; + flex-direction: column; + } + .mpr-side > .mpr-side__scroll > .mpr-w--side { + min-height: 300px; + max-height: 100%; + display: flex; + flex-direction: column; + } + .mpr-main > .mpr-w > .mpr-w__body, + .mpr-side .mpr-w--side > .mpr-w__body { + flex: 1; + min-height: 0; + overflow-y: auto; + overflow-x: hidden; + scrollbar-width: thin; + scrollbar-color: var(--m-border-strong) transparent; + } + .mpr-main > .mpr-w > .mpr-w__body::-webkit-scrollbar, + .mpr-side .mpr-w--side > .mpr-w__body::-webkit-scrollbar { width: 5px; } + .mpr-main > .mpr-w > .mpr-w__body::-webkit-scrollbar-thumb, + .mpr-side .mpr-w--side > .mpr-w__body::-webkit-scrollbar-thumb { + background: var(--m-border-strong); + border-radius: 3px; + } .mpr-main .mpr-grid { grid-template-columns: 1fr; }