Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MelissaAgendaConfig: cards do main com altura por conteudo + scroll interno

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
Leonardo
2026-05-06 16:50:04 -03:00
parent 48a9700aea
commit d49248979a
1 changed files with 16 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/melissa/MelissaAgendaConfig.vue
+16 -4
View File
@@ -1575,7 +1575,10 @@ onBeforeUnmount(() => {
} }
/* Desktop (>=1024): main fica em coluna unica (cards muito densos /* 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) { @media (min-width: 1024px) {
.mac-side > .mac-side__scroll > .mac-w--side { .mac-side > .mac-side__scroll > .mac-w--side {
min-height: 300px; min-height: 300px;
@@ -1583,7 +1586,14 @@ onBeforeUnmount(() => {
display: flex; display: flex;
flex-direction: column; 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; flex: 1;
min-height: 0; min-height: 0;
overflow-y: auto; overflow-y: auto;
@@ -1591,8 +1601,10 @@ onBeforeUnmount(() => {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: var(--m-border-strong) transparent; 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,
.mac-side .mac-w--side > .mac-w__body::-webkit-scrollbar-thumb { .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); background: var(--m-border-strong);
border-radius: 3px; border-radius: 3px;
} }