Melissa drawers: footer colado no bottom (pattern AppMenu)

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
+37 -33
View File
@@ -1825,6 +1825,12 @@ async function onDelete(c) {
.mc-empty__btn { margin-top: 8px; } .mc-empty__btn { margin-top: 8px; }
/* ─── Drawer mobile ─── */ /* ─── 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 { .mc-mobile-drawer {
position: fixed; position: fixed;
top: 0; left: 0; top: 0; left: 0;
@@ -1840,59 +1846,57 @@ async function onDelete(c) {
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
color: var(--m-text); color: var(--m-text);
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; 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.is-open { transform: translateX(0); }
.mc-mobile-drawer__scroll { .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; flex: 1;
min-height: 0; min-height: 0;
overflow: visible; overflow: hidden;
padding: 0; display: flex;
flex-direction: column;
}
.mc-mobile-drawer__scroll .mc-side {
flex: 1;
min-height: 0;
width: 100%;
overflow: hidden;
background: transparent; background: transparent;
border-right: none; border-right: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.mc-mobile-drawer__scroll .mc-side__scroll { .mc-mobile-drawer__scroll .mc-side__scroll {
flex: none; flex: 1;
min-height: 0; min-height: 0;
overflow: visible; overflow-y: auto;
overflow-x: hidden;
padding: 12px;
display: flex; display: flex;
flex-direction: column; 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 { .mc-mobile-drawer__scroll .mc-side__footer {
position: sticky; flex-shrink: 0;
bottom: 0; margin: 0;
margin: auto -12px -24px; /* compensa o padding do drawer pra ficar de borda a borda */ padding: 12px;
background: var(--m-bg-medium); background: var(--m-bg-medium);
border-top: 1px solid var(--m-border); border-top: 1px solid var(--m-border);
backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
-webkit-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 { .mc-mobile-drawer__backdrop {
position: fixed; position: fixed;
+26 -29
View File
@@ -1187,61 +1187,58 @@ watch(() => tenantStore.activeTenantId, async () => {
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
color: var(--m-text); color: var(--m-text);
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
display: flex;
flex-direction: column;
} }
.mw-mobile-drawer.is-open { transform: translateX(0); } .mw-mobile-drawer.is-open { transform: translateX(0); }
.mw-mobile-drawer__scroll { .mw-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;
}
.mw-mobile-drawer__scroll::-webkit-scrollbar { width: 5px; }
.mw-mobile-drawer__scroll::-webkit-scrollbar-thumb {
background: var(--m-border-strong);
border-radius: 3px;
}
/* Sidebar teleportada pro drawer — perde bg/border-right (o drawer
já tem chrome próprio) + cards perdem margem lateral (drawer já
tem padding). Footer vira sticky no bottom do drawer. */
.mw-mobile-drawer__scroll .mw-side {
width: 100%;
flex: 1; flex: 1;
min-height: 0; min-height: 0;
overflow: visible; overflow: hidden;
padding: 0; display: flex;
flex-direction: column;
}
.mw-mobile-drawer__scroll .mw-side {
flex: 1;
min-height: 0;
width: 100%;
overflow: hidden;
background: transparent; background: transparent;
border-right: none; border-right: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.mw-mobile-drawer__scroll .mw-side__scroll { .mw-mobile-drawer__scroll .mw-side__scroll {
flex: none; flex: 1;
min-height: 0; min-height: 0;
overflow: visible; overflow-y: auto;
overflow-x: hidden;
padding: 12px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 12px;
scrollbar-width: thin;
scrollbar-color: var(--m-border-strong) transparent;
}
.mw-mobile-drawer__scroll .mw-side__scroll::-webkit-scrollbar { width: 5px; }
.mw-mobile-drawer__scroll .mw-side__scroll::-webkit-scrollbar-thumb {
background: var(--m-border-strong);
border-radius: 3px;
} }
.mw-mobile-drawer__scroll .mw-w--side { .mw-mobile-drawer__scroll .mw-w--side {
margin: 0; margin: 0;
flex-shrink: 0;
} }
.mw-mobile-drawer__scroll .mw-w--side:last-of-type { margin-bottom: 0; } .mw-mobile-drawer__scroll .mw-w--side:last-of-type { margin-bottom: 0; }
.mw-mobile-drawer__scroll .mw-alert { margin: 0; } .mw-mobile-drawer__scroll .mw-alert { margin: 0; flex-shrink: 0; }
.mw-mobile-drawer__scroll .mw-side__footer { .mw-mobile-drawer__scroll .mw-side__footer {
position: sticky; flex-shrink: 0;
bottom: 0; margin: 0;
margin: auto -12px -24px;
padding: 12px; padding: 12px;
background: var(--m-bg-medium); background: var(--m-bg-medium);
border-top: 1px solid var(--m-border); border-top: 1px solid var(--m-border);
backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
z-index: 5;
} }
.mw-mobile-drawer__backdrop { .mw-mobile-drawer__backdrop {
position: fixed; position: fixed;
+25 -26
View File
@@ -774,58 +774,57 @@ onBeforeUnmount(() => {
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
color: var(--m-text); color: var(--m-text);
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
display: flex;
flex-direction: column;
} }
.md-mobile-drawer.is-open { transform: translateX(0); } .md-mobile-drawer.is-open { transform: translateX(0); }
.md-mobile-drawer__scroll { .md-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;
}
.md-mobile-drawer__scroll::-webkit-scrollbar { width: 5px; }
.md-mobile-drawer__scroll::-webkit-scrollbar-thumb {
background: var(--m-border-strong);
border-radius: 3px;
}
.md-mobile-drawer__scroll .md-side {
width: 100%;
flex: 1; flex: 1;
min-height: 0; min-height: 0;
overflow: visible; overflow: hidden;
padding: 0; display: flex;
flex-direction: column;
}
.md-mobile-drawer__scroll .md-side {
flex: 1;
min-height: 0;
width: 100%;
overflow: hidden;
background: transparent; background: transparent;
border-right: none; border-right: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.md-mobile-drawer__scroll .md-side__scroll { .md-mobile-drawer__scroll .md-side__scroll {
flex: none; flex: 1;
min-height: 0; min-height: 0;
overflow: visible; overflow-y: auto;
overflow-x: hidden;
padding: 12px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 12px;
scrollbar-width: thin;
scrollbar-color: var(--m-border-strong) transparent;
}
.md-mobile-drawer__scroll .md-side__scroll::-webkit-scrollbar { width: 5px; }
.md-mobile-drawer__scroll .md-side__scroll::-webkit-scrollbar-thumb {
background: var(--m-border-strong);
border-radius: 3px;
} }
.md-mobile-drawer__scroll .md-w--side { .md-mobile-drawer__scroll .md-w--side {
margin: 0; margin: 0;
flex-shrink: 0;
} }
.md-mobile-drawer__scroll .md-w--side:last-of-type { margin-bottom: 0; } .md-mobile-drawer__scroll .md-w--side:last-of-type { margin-bottom: 0; }
.md-mobile-drawer__scroll .md-side__footer { .md-mobile-drawer__scroll .md-side__footer {
position: sticky; flex-shrink: 0;
bottom: 0; margin: 0;
margin: auto -12px -24px;
padding: 12px; padding: 12px;
background: var(--m-bg-medium); background: var(--m-bg-medium);
border-top: 1px solid var(--m-border); border-top: 1px solid var(--m-border);
backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
z-index: 5;
} }
.md-mobile-drawer__backdrop { .md-mobile-drawer__backdrop {
@@ -1583,7 +1583,14 @@ onBeforeUnmount(() => {
} }
.mfl-menu-btn > i { font-size: 0.85rem; } .mfl-menu-btn > i { font-size: 0.85rem; }
/* ─── Drawer mobile (Teleport target) ─── */ /* ─── Drawer mobile (Teleport target) ─────────────────────
Pattern espelhado do AppMenu/layout-sidebar do Rail:
- .xx-mobile-drawer = flex column, altura 100vh
- __scroll = container do Teleport (flex: 1, sem scroll proprio,
overflow hidden — o scroll fica num filho interno)
- .xx-side teleportada = flex column ocupando todo o espaco,
com __scroll interno (flex: 1, overflow-y auto) e __footer
(flex-shrink: 0) que naturalmente fica colado no bottom. */
.mfl-mobile-drawer { .mfl-mobile-drawer {
position: fixed; position: fixed;
top: 0; top: 0;
@@ -1600,61 +1607,63 @@ onBeforeUnmount(() => {
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
color: var(--m-text); color: var(--m-text);
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
display: flex;
flex-direction: column;
} }
.mfl-mobile-drawer.is-open { transform: translateX(0); } .mfl-mobile-drawer.is-open { transform: translateX(0); }
.mfl-mobile-drawer__scroll { .mfl-mobile-drawer__scroll {
height: 100%; flex: 1;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Sidebar teleportada — vira a "casca" flex column do drawer */
.mfl-mobile-drawer__scroll .mfl-side {
flex: 1;
min-height: 0;
width: 100%;
overflow: hidden;
background: transparent;
border-right: none;
display: flex;
flex-direction: column;
}
/* O scroll interno vive aqui — só os cards rolam, o footer NÃO.
Padding compensa a remoção do padding do __scroll do host. */
.mfl-mobile-drawer__scroll .mfl-side__scroll {
flex: 1;
min-height: 0;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
padding: 12px 12px 24px; padding: 12px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 12px;
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: var(--m-border-strong) transparent; scrollbar-color: var(--m-border-strong) transparent;
} }
.mfl-mobile-drawer__scroll::-webkit-scrollbar { width: 5px; } .mfl-mobile-drawer__scroll .mfl-side__scroll::-webkit-scrollbar { width: 5px; }
.mfl-mobile-drawer__scroll::-webkit-scrollbar-thumb { .mfl-mobile-drawer__scroll .mfl-side__scroll::-webkit-scrollbar-thumb {
background: var(--m-border-strong); background: var(--m-border-strong);
border-radius: 3px; border-radius: 3px;
} }
/* Sidebar teleportada perde bg/border-right (drawer já tem chrome próprio).
Cards perdem margem lateral (drawer já tem padding). Footer vira sticky
no bottom do drawer pra "Limpar filtros" sempre visível. */
.mfl-mobile-drawer__scroll .mfl-side {
width: 100%;
flex: 1;
min-height: 0;
overflow: visible;
padding: 0;
background: transparent;
border-right: none;
display: flex;
flex-direction: column;
}
.mfl-mobile-drawer__scroll .mfl-side__scroll {
flex: none;
min-height: 0;
overflow: visible;
display: flex;
flex-direction: column;
gap: 12px;
}
.mfl-mobile-drawer__scroll .mfl-w--side { .mfl-mobile-drawer__scroll .mfl-w--side {
margin: 0; margin: 0;
flex-shrink: 0;
} }
.mfl-mobile-drawer__scroll .mfl-w--side:last-of-type { margin-bottom: 0; } .mfl-mobile-drawer__scroll .mfl-w--side:last-of-type { margin-bottom: 0; }
/* Footer fixo no bottom do drawer — flex-shrink:0 + estar fora do
__scroll garante que sempre fica visivel, sem precisar de sticky. */
.mfl-mobile-drawer__scroll .mfl-side__footer { .mfl-mobile-drawer__scroll .mfl-side__footer {
position: sticky; flex-shrink: 0;
bottom: 0; margin: 0;
margin: auto -12px -24px;
padding: 12px; padding: 12px;
background: var(--m-bg-medium); background: var(--m-bg-medium);
border-top: 1px solid var(--m-border); border-top: 1px solid var(--m-border);
backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
z-index: 5;
} }
.mfl-mobile-drawer__backdrop { .mfl-mobile-drawer__backdrop {
+31 -28
View File
@@ -2294,54 +2294,57 @@ watch(editPatientDialog, (isOpen) => {
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
color: var(--m-text); color: var(--m-text);
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
display: flex;
flex-direction: column;
} }
.mg-mobile-drawer.is-open { transform: translateX(0); } .mg-mobile-drawer.is-open { transform: translateX(0); }
.mg-mobile-drawer__scroll { .mg-mobile-drawer__scroll {
height: 100%;
overflow-y: auto;
padding: 12px 12px 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
.mg-mobile-drawer__scroll::-webkit-scrollbar { width: 5px; }
.mg-mobile-drawer__scroll::-webkit-scrollbar-thumb {
background: var(--m-border-strong);
border-radius: 3px;
}
.mg-mobile-drawer__scroll .mg-side {
width: 100%;
flex: 1; flex: 1;
min-height: 0; min-height: 0;
overflow: visible; overflow: hidden;
padding: 0; display: flex;
flex-direction: column;
}
.mg-mobile-drawer__scroll .mg-side {
flex: 1;
min-height: 0;
width: 100%;
overflow: hidden;
background: transparent; background: transparent;
border-right: none; border-right: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.mg-mobile-drawer__scroll .mg-side__scroll { .mg-mobile-drawer__scroll .mg-side__scroll {
flex: none; flex: 1;
min-height: 0; min-height: 0;
overflow: visible; overflow-y: auto;
overflow-x: hidden;
padding: 12px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px;
scrollbar-width: thin;
scrollbar-color: var(--m-border-strong) transparent;
} }
.mg-mobile-drawer__scroll .mg-side__scroll::-webkit-scrollbar { width: 5px; }
.mg-mobile-drawer__scroll .mg-side__scroll::-webkit-scrollbar-thumb {
background: var(--m-border-strong);
border-radius: 3px;
}
.mg-mobile-drawer__scroll .mg-w--side {
margin: 0;
flex-shrink: 0;
}
.mg-mobile-drawer__scroll .mg-w--side:last-of-type { margin-bottom: 0; }
.mg-mobile-drawer__scroll .mg-side__footer { .mg-mobile-drawer__scroll .mg-side__footer {
position: sticky; flex-shrink: 0;
bottom: 0; margin: 0;
margin: auto -12px -24px; padding: 12px;
background: var(--m-bg-medium); background: var(--m-bg-medium);
border-top: 1px solid var(--m-border); border-top: 1px solid var(--m-border);
backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
z-index: 5;
}
.mg-mobile-drawer__scroll .mg-w--side {
margin: 0 0 12px;
}
.mg-mobile-drawer__scroll .mg-w--side:last-of-type {
margin-bottom: 0;
} }
.mg-mobile-drawer__backdrop { .mg-mobile-drawer__backdrop {
position: fixed; position: fixed;
+31 -28
View File
@@ -2471,54 +2471,57 @@ watch(editPatientDialog, (isOpen) => {
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
color: var(--m-text); color: var(--m-text);
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
display: flex;
flex-direction: column;
} }
.mm-mobile-drawer.is-open { transform: translateX(0); } .mm-mobile-drawer.is-open { transform: translateX(0); }
.mm-mobile-drawer__scroll { .mm-mobile-drawer__scroll {
height: 100%;
overflow-y: auto;
padding: 12px 12px 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
.mm-mobile-drawer__scroll::-webkit-scrollbar { width: 5px; }
.mm-mobile-drawer__scroll::-webkit-scrollbar-thumb {
background: var(--m-border-strong);
border-radius: 3px;
}
.mm-mobile-drawer__scroll .mm-side {
width: 100%;
flex: 1; flex: 1;
min-height: 0; min-height: 0;
overflow: visible; overflow: hidden;
padding: 0; display: flex;
flex-direction: column;
}
.mm-mobile-drawer__scroll .mm-side {
flex: 1;
min-height: 0;
width: 100%;
overflow: hidden;
background: transparent; background: transparent;
border-right: none; border-right: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.mm-mobile-drawer__scroll .mm-side__scroll { .mm-mobile-drawer__scroll .mm-side__scroll {
flex: none; flex: 1;
min-height: 0; min-height: 0;
overflow: visible; overflow-y: auto;
overflow-x: hidden;
padding: 12px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px;
scrollbar-width: thin;
scrollbar-color: var(--m-border-strong) transparent;
} }
.mm-mobile-drawer__scroll .mm-side__scroll::-webkit-scrollbar { width: 5px; }
.mm-mobile-drawer__scroll .mm-side__scroll::-webkit-scrollbar-thumb {
background: var(--m-border-strong);
border-radius: 3px;
}
.mm-mobile-drawer__scroll .mm-w--side {
margin: 0;
flex-shrink: 0;
}
.mm-mobile-drawer__scroll .mm-w--side:last-of-type { margin-bottom: 0; }
.mm-mobile-drawer__scroll .mm-side__footer { .mm-mobile-drawer__scroll .mm-side__footer {
position: sticky; flex-shrink: 0;
bottom: 0; margin: 0;
margin: auto -12px -24px; padding: 12px;
background: var(--m-bg-medium); background: var(--m-bg-medium);
border-top: 1px solid var(--m-border); border-top: 1px solid var(--m-border);
backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
z-index: 5;
}
.mm-mobile-drawer__scroll .mm-w--side {
margin: 0 0 12px;
}
.mm-mobile-drawer__scroll .mm-w--side:last-of-type {
margin-bottom: 0;
} }
.mm-mobile-drawer__backdrop { .mm-mobile-drawer__backdrop {
position: fixed; position: fixed;
+25 -28
View File
@@ -1381,60 +1381,57 @@ onBeforeUnmount(() => {
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
color: var(--m-text); color: var(--m-text);
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; 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.is-open { transform: translateX(0); }
.mn-mobile-drawer__scroll { .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; flex: 1;
min-height: 0; min-height: 0;
overflow: visible; overflow: hidden;
padding: 0; display: flex;
flex-direction: column;
}
.mn-mobile-drawer__scroll .mn-side {
flex: 1;
min-height: 0;
width: 100%;
overflow: hidden;
background: transparent; background: transparent;
border-right: none; border-right: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.mn-mobile-drawer__scroll .mn-side__scroll { .mn-mobile-drawer__scroll .mn-side__scroll {
flex: none; flex: 1;
min-height: 0; min-height: 0;
overflow: visible; overflow-y: auto;
overflow-x: hidden;
padding: 12px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; 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 { .mn-mobile-drawer__scroll .mn-w--side {
margin: 0; margin: 0;
flex-shrink: 0;
} }
.mn-mobile-drawer__scroll .mn-w--side:last-of-type { margin-bottom: 0; } .mn-mobile-drawer__scroll .mn-w--side:last-of-type { margin-bottom: 0; }
.mn-mobile-drawer__scroll .mn-side__footer { .mn-mobile-drawer__scroll .mn-side__footer {
position: sticky; flex-shrink: 0;
bottom: 0; margin: 0;
margin: auto -12px -24px;
padding: 12px; padding: 12px;
background: var(--m-bg-medium); background: var(--m-bg-medium);
border-top: 1px solid var(--m-border); border-top: 1px solid var(--m-border);
backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
z-index: 5;
} }
.mn-mobile-drawer__backdrop { .mn-mobile-drawer__backdrop {
+31 -29
View File
@@ -2910,49 +2910,41 @@ function sessaoStatusColor(s) {
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
color: var(--m-text); color: var(--m-text);
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
display: flex;
flex-direction: column;
} }
.mp-mobile-drawer.is-open { .mp-mobile-drawer.is-open {
transform: translateX(0); transform: translateX(0);
} }
.mp-mobile-drawer__scroll { .mp-mobile-drawer__scroll {
height: 100%; flex: 1;
overflow-y: auto; min-height: 0;
overflow-x: hidden; overflow: hidden;
padding: 12px 12px 24px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px;
scrollbar-width: thin;
scrollbar-color: var(--m-border-strong) transparent;
}
.mp-mobile-drawer__scroll::-webkit-scrollbar { width: 5px; }
.mp-mobile-drawer__scroll::-webkit-scrollbar-thumb {
background: var(--m-border-strong);
border-radius: 3px;
} }
/* Asides perdem padding/scroll/borda próprios quando teleportados. /* Pattern espelha AppMenu/layout-sidebar: drawer = flex column, host
.mp-side__scroll também perde scroll/padding (drawer já tem) e o pass-through (overflow hidden), .mp-side é flex column com scroll
.mp-side__footer vira sticky no bottom do drawer pra manter o interno e __footer flex-shrink: 0 pinado no bottom.
"Limpar filtros" sempre acessível. */ .mp-quick fica fixo no topo (flex-shrink: 0). */
.mp-mobile-drawer__scroll .mp-quick { .mp-mobile-drawer__scroll .mp-quick {
width: 100%; width: 100%;
flex-shrink: 0; flex-shrink: 0;
height: auto; height: auto;
overflow: visible; overflow-y: auto;
overflow-x: hidden;
border-right: none; border-right: none;
border-left: none; border-left: none;
background: transparent; background: transparent;
padding: 0; padding: 12px;
max-height: 50%;
} }
/* .mp-side ganha flex: 1 pra ocupar altura disponível, com flex column
interno — assim o footer sticky é empurrado pro fim do drawer pelo
margin: auto, mesmo quando há pouco conteúdo. */
.mp-mobile-drawer__scroll .mp-side { .mp-mobile-drawer__scroll .mp-side {
width: 100%; width: 100%;
flex: 1; flex: 1;
min-height: 0; min-height: 0;
overflow: visible; overflow: hidden;
border-right: none; border-right: none;
border-left: none; border-left: none;
background: transparent; background: transparent;
@@ -2961,20 +2953,30 @@ function sessaoStatusColor(s) {
flex-direction: column; flex-direction: column;
} }
.mp-mobile-drawer__scroll .mp-side__scroll { .mp-mobile-drawer__scroll .mp-side__scroll {
flex: none; flex: 1;
min-height: 0; min-height: 0;
overflow: visible; overflow-y: auto;
padding: 0; overflow-x: hidden;
padding: 12px;
display: flex;
flex-direction: column;
gap: 12px;
scrollbar-width: thin;
scrollbar-color: var(--m-border-strong) transparent;
}
.mp-mobile-drawer__scroll .mp-side__scroll::-webkit-scrollbar { width: 5px; }
.mp-mobile-drawer__scroll .mp-side__scroll::-webkit-scrollbar-thumb {
background: var(--m-border-strong);
border-radius: 3px;
} }
.mp-mobile-drawer__scroll .mp-side__footer { .mp-mobile-drawer__scroll .mp-side__footer {
position: sticky; flex-shrink: 0;
bottom: 0; margin: 0;
margin: auto -12px -24px; /* margin-top: auto empurra o footer pro bottom + margin lateral compensa o padding do drawer */ padding: 12px;
background: var(--m-bg-medium); background: var(--m-bg-medium);
border-top: 1px solid var(--m-border); border-top: 1px solid var(--m-border);
backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
z-index: 5;
} }
/* Reordena dentro do drawer: Visão geral (.mp-quick) vem PRIMEIRO, /* Reordena dentro do drawer: Visão geral (.mp-quick) vem PRIMEIRO,
+25 -25
View File
@@ -1369,57 +1369,57 @@ onBeforeUnmount(() => {
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
color: var(--m-text); color: var(--m-text);
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
display: flex;
flex-direction: column;
} }
.mr-mobile-drawer.is-open { transform: translateX(0); } .mr-mobile-drawer.is-open { transform: translateX(0); }
.mr-mobile-drawer__scroll { .mr-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;
}
.mr-mobile-drawer__scroll::-webkit-scrollbar { width: 5px; }
.mr-mobile-drawer__scroll::-webkit-scrollbar-thumb {
background: var(--m-border-strong);
border-radius: 3px;
}
.mr-mobile-drawer__scroll .mr-side {
width: 100%;
flex: 1; flex: 1;
min-height: 0; min-height: 0;
overflow: visible; overflow: hidden;
padding: 0; display: flex;
flex-direction: column;
}
.mr-mobile-drawer__scroll .mr-side {
flex: 1;
min-height: 0;
width: 100%;
overflow: hidden;
background: transparent; background: transparent;
border-right: none; border-right: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.mr-mobile-drawer__scroll .mr-side__scroll { .mr-mobile-drawer__scroll .mr-side__scroll {
flex: none; flex: 1;
min-height: 0; min-height: 0;
overflow: visible; overflow-y: auto;
overflow-x: hidden;
padding: 12px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 12px;
scrollbar-width: thin;
scrollbar-color: var(--m-border-strong) transparent;
}
.mr-mobile-drawer__scroll .mr-side__scroll::-webkit-scrollbar { width: 5px; }
.mr-mobile-drawer__scroll .mr-side__scroll::-webkit-scrollbar-thumb {
background: var(--m-border-strong);
border-radius: 3px;
} }
.mr-mobile-drawer__scroll .mr-w--side { .mr-mobile-drawer__scroll .mr-w--side {
margin: 0; margin: 0;
flex-shrink: 0;
} }
.mr-mobile-drawer__scroll .mr-w--side:last-of-type { margin-bottom: 0; } .mr-mobile-drawer__scroll .mr-w--side:last-of-type { margin-bottom: 0; }
.mr-mobile-drawer__scroll .mr-side__footer { .mr-mobile-drawer__scroll .mr-side__footer {
position: sticky; flex-shrink: 0;
bottom: 0; margin: 0;
margin: auto -12px -24px;
padding: 12px; padding: 12px;
background: var(--m-bg-medium); background: var(--m-bg-medium);
border-top: 1px solid var(--m-border); border-top: 1px solid var(--m-border);
backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
z-index: 5;
} }
.mr-mobile-drawer__backdrop { .mr-mobile-drawer__backdrop {
position: fixed; position: fixed;
+25 -26
View File
@@ -1091,58 +1091,57 @@ onBeforeUnmount(() => {
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
color: var(--m-text); color: var(--m-text);
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
display: flex;
flex-direction: column;
} }
.mr-mobile-drawer.is-open { transform: translateX(0); } .mr-mobile-drawer.is-open { transform: translateX(0); }
.mr-mobile-drawer__scroll { .mr-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;
}
.mr-mobile-drawer__scroll::-webkit-scrollbar { width: 5px; }
.mr-mobile-drawer__scroll::-webkit-scrollbar-thumb {
background: var(--m-border-strong);
border-radius: 3px;
}
.mr-mobile-drawer__scroll .mr-side {
width: 100%;
flex: 1; flex: 1;
min-height: 0; min-height: 0;
overflow: visible; overflow: hidden;
padding: 0; display: flex;
flex-direction: column;
}
.mr-mobile-drawer__scroll .mr-side {
flex: 1;
min-height: 0;
width: 100%;
overflow: hidden;
background: transparent; background: transparent;
border-right: none; border-right: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.mr-mobile-drawer__scroll .mr-side__scroll { .mr-mobile-drawer__scroll .mr-side__scroll {
flex: none; flex: 1;
min-height: 0; min-height: 0;
overflow: visible; overflow-y: auto;
overflow-x: hidden;
padding: 12px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 12px;
scrollbar-width: thin;
scrollbar-color: var(--m-border-strong) transparent;
}
.mr-mobile-drawer__scroll .mr-side__scroll::-webkit-scrollbar { width: 5px; }
.mr-mobile-drawer__scroll .mr-side__scroll::-webkit-scrollbar-thumb {
background: var(--m-border-strong);
border-radius: 3px;
} }
.mr-mobile-drawer__scroll .mr-w--side { .mr-mobile-drawer__scroll .mr-w--side {
margin: 0; margin: 0;
flex-shrink: 0;
} }
.mr-mobile-drawer__scroll .mr-w--side:last-of-type { margin-bottom: 0; } .mr-mobile-drawer__scroll .mr-w--side:last-of-type { margin-bottom: 0; }
.mr-mobile-drawer__scroll .mr-side__footer { .mr-mobile-drawer__scroll .mr-side__footer {
position: sticky; flex-shrink: 0;
bottom: 0; margin: 0;
margin: auto -12px -24px;
padding: 12px; padding: 12px;
background: var(--m-bg-medium); background: var(--m-bg-medium);
border-top: 1px solid var(--m-border); border-top: 1px solid var(--m-border);
backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
z-index: 5;
} }
.mr-mobile-drawer__backdrop { .mr-mobile-drawer__backdrop {
+31 -28
View File
@@ -2256,54 +2256,57 @@ watch(editPatientDialog, (isOpen) => {
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
color: var(--m-text); color: var(--m-text);
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
display: flex;
flex-direction: column;
} }
.mt-mobile-drawer.is-open { transform: translateX(0); } .mt-mobile-drawer.is-open { transform: translateX(0); }
.mt-mobile-drawer__scroll { .mt-mobile-drawer__scroll {
height: 100%;
overflow-y: auto;
padding: 12px 12px 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
.mt-mobile-drawer__scroll::-webkit-scrollbar { width: 5px; }
.mt-mobile-drawer__scroll::-webkit-scrollbar-thumb {
background: var(--m-border-strong);
border-radius: 3px;
}
.mt-mobile-drawer__scroll .mt-side {
width: 100%;
flex: 1; flex: 1;
min-height: 0; min-height: 0;
overflow: visible; overflow: hidden;
padding: 0; display: flex;
flex-direction: column;
}
.mt-mobile-drawer__scroll .mt-side {
flex: 1;
min-height: 0;
width: 100%;
overflow: hidden;
background: transparent; background: transparent;
border-right: none; border-right: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.mt-mobile-drawer__scroll .mt-side__scroll { .mt-mobile-drawer__scroll .mt-side__scroll {
flex: none; flex: 1;
min-height: 0; min-height: 0;
overflow: visible; overflow-y: auto;
overflow-x: hidden;
padding: 12px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px;
scrollbar-width: thin;
scrollbar-color: var(--m-border-strong) transparent;
} }
.mt-mobile-drawer__scroll .mt-side__scroll::-webkit-scrollbar { width: 5px; }
.mt-mobile-drawer__scroll .mt-side__scroll::-webkit-scrollbar-thumb {
background: var(--m-border-strong);
border-radius: 3px;
}
.mt-mobile-drawer__scroll .mt-w--side {
margin: 0;
flex-shrink: 0;
}
.mt-mobile-drawer__scroll .mt-w--side:last-of-type { margin-bottom: 0; }
.mt-mobile-drawer__scroll .mt-side__footer { .mt-mobile-drawer__scroll .mt-side__footer {
position: sticky; flex-shrink: 0;
bottom: 0; margin: 0;
margin: auto -12px -24px; padding: 12px;
background: var(--m-bg-medium); background: var(--m-bg-medium);
border-top: 1px solid var(--m-border); border-top: 1px solid var(--m-border);
backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
z-index: 5;
}
.mt-mobile-drawer__scroll .mt-w--side {
margin: 0 0 12px;
}
.mt-mobile-drawer__scroll .mt-w--side:last-of-type {
margin-bottom: 0;
} }
.mt-mobile-drawer__backdrop { .mt-mobile-drawer__backdrop {
position: fixed; position: fixed;