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/MelissaNotificacoes.vue
+25 -28
View File
@@ -1381,60 +1381,57 @@ onBeforeUnmount(() => {
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;
}
.mn-mobile-drawer.is-open { transform: translateX(0); }
.mn-mobile-drawer__scroll {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
padding: 12px 12px 24px;
display: flex;
flex-direction: column;
gap: 12px;
scrollbar-width: thin;
scrollbar-color: var(--m-border-strong) transparent;
}
.mn-mobile-drawer__scroll::-webkit-scrollbar { width: 5px; }
.mn-mobile-drawer__scroll::-webkit-scrollbar-thumb {
background: var(--m-border-strong);
border-radius: 3px;
}
/* Sidebar teleportada — ocupa altura disponivel pra empurrar o footer
pro bottom (margin: auto faz o trabalho). */
.mn-mobile-drawer__scroll .mn-side {
width: 100%;
flex: 1;
min-height: 0;
overflow: visible;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.mn-mobile-drawer__scroll .mn-side {
flex: 1;
min-height: 0;
width: 100%;
overflow: hidden;
background: transparent;
border-right: none;
display: flex;
flex-direction: column;
}
.mn-mobile-drawer__scroll .mn-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;
}
.mn-mobile-drawer__scroll .mn-side__scroll::-webkit-scrollbar { width: 5px; }
.mn-mobile-drawer__scroll .mn-side__scroll::-webkit-scrollbar-thumb {
background: var(--m-border-strong);
border-radius: 3px;
}
.mn-mobile-drawer__scroll .mn-w--side {
margin: 0;
flex-shrink: 0;
}
.mn-mobile-drawer__scroll .mn-w--side:last-of-type { margin-bottom: 0; }
.mn-mobile-drawer__scroll .mn-side__footer {
position: sticky;
bottom: 0;
margin: auto -12px -24px;
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;
}
.mn-mobile-drawer__backdrop {