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

Melissa drawers: footer colado no bottom (pattern AppMenu)

Browse Source 
Refator do mobile drawer em todas as Melissa Pages com sidebar:
scroll move pra dentro de .xx-side__scroll (flex: 1 + min-height: 0)
e o __footer vira flex-shrink: 0 last child de flex column. Espelha
o pattern do AppMenu/layout-sidebar Rail. Substitui o sticky/margin:auto
que falhava quando o conteudo era pequeno (deixava espaco vazio sob
o "Limpar filtros").

Pages: Compromissos, Conversas, Documentos, FinanceiroLancamentos,
Grupos, Medicos, Notificacoes, Pacientes, Recorrencias, Relatorios, Tags.

Pacientes (caso especial): mp-quick fixo no topo (max-height: 50%)
+ mp-side flex: 1 com scroll/footer interno.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Leonardo
2026-05-06 11:30:52 -03:00
parent 48bf2726a5
commit 02af119dc6
11 changed files with 328 additions and 312 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/melissa/MelissaCompromissos.vue
+37 -33
View File
@@ -1825,6 +1825,12 @@ async function onDelete(c) {
.mc-empty__btn { margin-top: 8px; }
/* ─── Drawer mobile ─── */
/* Pattern espelhado do AppMenu/layout-sidebar do Rail:
- .xx-mobile-drawer = flex column, altura 100vh
- __scroll = passagem (flex: 1, sem scroll proprio, overflow hidden)
- .xx-side teleportada = flex column ocupando todo o espaco
- .xx-side__scroll interno = scroll real (flex: 1, overflow-y auto)
- .xx-side__footer = flex-shrink 0, sempre colado no bottom */
.mc-mobile-drawer {
position: fixed;
top: 0; left: 0;
@@ -1840,59 +1846,57 @@ async function onDelete(c) {
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
color: var(--m-text);
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
display: flex;
flex-direction: column;
}
.mc-mobile-drawer.is-open { transform: translateX(0); }
.mc-mobile-drawer__scroll {
height: 100%;
overflow-y: auto;
padding: 12px 12px 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
.mc-mobile-drawer__scroll::-webkit-scrollbar { width: 5px; }
.mc-mobile-drawer__scroll::-webkit-scrollbar-thumb {
background: var(--m-border-strong);
border-radius: 3px;
}
/* Em mobile a sidebar é teleportada pro drawer. O drawer tem seu próprio
scroll (.mc-mobile-drawer__scroll), então a .mc-side e o .mc-side__scroll
não devem ter overflow/altura próprios — viram containers passivos.
O .mc-side__footer mantém o "Limpar filtros" sempre visível no bottom
do drawer via position: sticky. */
.mc-mobile-drawer__scroll .mc-side {
width: 100%;
flex: 1;
min-height: 0;
overflow: visible;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.mc-mobile-drawer__scroll .mc-side {
flex: 1;
min-height: 0;
width: 100%;
overflow: hidden;
background: transparent;
border-right: none;
display: flex;
flex-direction: column;
}
.mc-mobile-drawer__scroll .mc-side__scroll {
flex: none;
flex: 1;
min-height: 0;
overflow: visible;
overflow-y: auto;
overflow-x: hidden;
padding: 12px;
display: flex;
flex-direction: column;
gap: 12px;
scrollbar-width: thin;
scrollbar-color: var(--m-border-strong) transparent;
}
.mc-mobile-drawer__scroll .mc-side__scroll::-webkit-scrollbar { width: 5px; }
.mc-mobile-drawer__scroll .mc-side__scroll::-webkit-scrollbar-thumb {
background: var(--m-border-strong);
border-radius: 3px;
}
.mc-mobile-drawer__scroll .mc-w--side {
margin: 0;
flex-shrink: 0;
}
.mc-mobile-drawer__scroll .mc-w--side:last-of-type { margin-bottom: 0; }
.mc-mobile-drawer__scroll .mc-side__footer {
position: sticky;
bottom: 0;
margin: auto -12px -24px; /* compensa o padding do drawer pra ficar de borda a borda */
flex-shrink: 0;
margin: 0;
padding: 12px;
background: var(--m-bg-medium);
border-top: 1px solid var(--m-border);
backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%);
z-index: 5;
}
.mc-mobile-drawer__scroll .mc-w--side {
margin: 0 0 12px;
}
.mc-mobile-drawer__scroll .mc-w--side:last-of-type {
margin-bottom: 0;
}
.mc-mobile-drawer__backdrop {
position: fixed;