diff --git a/src/layout/melissa/MelissaCompromissos.vue b/src/layout/melissa/MelissaCompromissos.vue index d24a79b..3371a75 100644 --- a/src/layout/melissa/MelissaCompromissos.vue +++ b/src/layout/melissa/MelissaCompromissos.vue @@ -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; diff --git a/src/layout/melissa/MelissaConversas.vue b/src/layout/melissa/MelissaConversas.vue index 7c005a7..4ba98ca 100644 --- a/src/layout/melissa/MelissaConversas.vue +++ b/src/layout/melissa/MelissaConversas.vue @@ -1187,61 +1187,58 @@ watch(() => tenantStore.activeTenantId, async () => { 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; } .mw-mobile-drawer.is-open { transform: translateX(0); } .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; min-height: 0; - overflow: visible; - padding: 0; + overflow: hidden; + display: flex; + flex-direction: column; +} +.mw-mobile-drawer__scroll .mw-side { + flex: 1; + min-height: 0; + width: 100%; + overflow: hidden; background: transparent; border-right: none; display: flex; flex-direction: column; } .mw-mobile-drawer__scroll .mw-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; +} +.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 { margin: 0; + flex-shrink: 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 { - 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; } .mw-mobile-drawer__backdrop { position: fixed; diff --git a/src/layout/melissa/MelissaDocumentos.vue b/src/layout/melissa/MelissaDocumentos.vue index ec3fe0a..bb5dfa2 100644 --- a/src/layout/melissa/MelissaDocumentos.vue +++ b/src/layout/melissa/MelissaDocumentos.vue @@ -774,58 +774,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; } .md-mobile-drawer.is-open { transform: translateX(0); } .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; min-height: 0; - overflow: visible; - padding: 0; + overflow: hidden; + display: flex; + flex-direction: column; +} +.md-mobile-drawer__scroll .md-side { + flex: 1; + min-height: 0; + width: 100%; + overflow: hidden; background: transparent; border-right: none; display: flex; flex-direction: column; } .md-mobile-drawer__scroll .md-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; +} +.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 { margin: 0; + flex-shrink: 0; } .md-mobile-drawer__scroll .md-w--side:last-of-type { margin-bottom: 0; } .md-mobile-drawer__scroll .md-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; } .md-mobile-drawer__backdrop { diff --git a/src/layout/melissa/MelissaFinanceiroLancamentos.vue b/src/layout/melissa/MelissaFinanceiroLancamentos.vue index cf6c34b..04afc64 100644 --- a/src/layout/melissa/MelissaFinanceiroLancamentos.vue +++ b/src/layout/melissa/MelissaFinanceiroLancamentos.vue @@ -1583,7 +1583,14 @@ onBeforeUnmount(() => { } .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 { position: fixed; top: 0; @@ -1600,61 +1607,63 @@ 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; } .mfl-mobile-drawer.is-open { transform: translateX(0); } .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-x: hidden; - padding: 12px 12px 24px; + padding: 12px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; scrollbar-color: var(--m-border-strong) transparent; } -.mfl-mobile-drawer__scroll::-webkit-scrollbar { width: 5px; } -.mfl-mobile-drawer__scroll::-webkit-scrollbar-thumb { +.mfl-mobile-drawer__scroll .mfl-side__scroll::-webkit-scrollbar { width: 5px; } +.mfl-mobile-drawer__scroll .mfl-side__scroll::-webkit-scrollbar-thumb { background: var(--m-border-strong); 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 { margin: 0; + flex-shrink: 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 { - 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; } .mfl-mobile-drawer__backdrop { diff --git a/src/layout/melissa/MelissaGrupos.vue b/src/layout/melissa/MelissaGrupos.vue index bbd00a2..baf0871 100644 --- a/src/layout/melissa/MelissaGrupos.vue +++ b/src/layout/melissa/MelissaGrupos.vue @@ -2294,54 +2294,57 @@ watch(editPatientDialog, (isOpen) => { 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; } .mg-mobile-drawer.is-open { transform: translateX(0); } .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; min-height: 0; - overflow: visible; - padding: 0; + overflow: hidden; + display: flex; + flex-direction: column; +} +.mg-mobile-drawer__scroll .mg-side { + flex: 1; + min-height: 0; + width: 100%; + overflow: hidden; background: transparent; border-right: none; display: flex; flex-direction: column; } .mg-mobile-drawer__scroll .mg-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; } +.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 { - 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; -} -.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 { position: fixed; diff --git a/src/layout/melissa/MelissaMedicos.vue b/src/layout/melissa/MelissaMedicos.vue index 2404e83..ced0464 100644 --- a/src/layout/melissa/MelissaMedicos.vue +++ b/src/layout/melissa/MelissaMedicos.vue @@ -2471,54 +2471,57 @@ watch(editPatientDialog, (isOpen) => { 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; } .mm-mobile-drawer.is-open { transform: translateX(0); } .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; min-height: 0; - overflow: visible; - padding: 0; + overflow: hidden; + display: flex; + flex-direction: column; +} +.mm-mobile-drawer__scroll .mm-side { + flex: 1; + min-height: 0; + width: 100%; + overflow: hidden; background: transparent; border-right: none; display: flex; flex-direction: column; } .mm-mobile-drawer__scroll .mm-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; } +.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 { - 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; -} -.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 { position: fixed; diff --git a/src/layout/melissa/MelissaNotificacoes.vue b/src/layout/melissa/MelissaNotificacoes.vue index 6bbaeb0..e828ea4 100644 --- a/src/layout/melissa/MelissaNotificacoes.vue +++ b/src/layout/melissa/MelissaNotificacoes.vue @@ -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 { diff --git a/src/layout/melissa/MelissaPacientes.vue b/src/layout/melissa/MelissaPacientes.vue index 7a8e4c3..6e70ddc 100644 --- a/src/layout/melissa/MelissaPacientes.vue +++ b/src/layout/melissa/MelissaPacientes.vue @@ -2910,49 +2910,41 @@ function sessaoStatusColor(s) { 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; } .mp-mobile-drawer.is-open { transform: translateX(0); } .mp-mobile-drawer__scroll { - height: 100%; - overflow-y: auto; - overflow-x: hidden; - padding: 12px 12px 24px; + flex: 1; + min-height: 0; + overflow: hidden; display: flex; 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. - .mp-side__scroll também perde scroll/padding (drawer já tem) e o - .mp-side__footer vira sticky no bottom do drawer pra manter o - "Limpar filtros" sempre acessível. */ +/* Pattern espelha AppMenu/layout-sidebar: drawer = flex column, host + pass-through (overflow hidden), .mp-side é flex column com scroll + interno e __footer flex-shrink: 0 pinado no bottom. + .mp-quick fica fixo no topo (flex-shrink: 0). */ .mp-mobile-drawer__scroll .mp-quick { width: 100%; flex-shrink: 0; height: auto; - overflow: visible; + overflow-y: auto; + overflow-x: hidden; border-right: none; border-left: none; 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 { width: 100%; flex: 1; min-height: 0; - overflow: visible; + overflow: hidden; border-right: none; border-left: none; background: transparent; @@ -2961,20 +2953,30 @@ function sessaoStatusColor(s) { flex-direction: column; } .mp-mobile-drawer__scroll .mp-side__scroll { - flex: none; + flex: 1; min-height: 0; - overflow: visible; - padding: 0; + 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; +} +.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 { - position: sticky; - bottom: 0; - margin: auto -12px -24px; /* margin-top: auto empurra o footer pro bottom + margin lateral compensa o padding do drawer */ + 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; } /* Reordena dentro do drawer: Visão geral (.mp-quick) vem PRIMEIRO, diff --git a/src/layout/melissa/MelissaRecorrencias.vue b/src/layout/melissa/MelissaRecorrencias.vue index e6f977f..c1bae3c 100644 --- a/src/layout/melissa/MelissaRecorrencias.vue +++ b/src/layout/melissa/MelissaRecorrencias.vue @@ -1369,57 +1369,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; } .mr-mobile-drawer.is-open { transform: translateX(0); } .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; min-height: 0; - overflow: visible; - padding: 0; + overflow: hidden; + display: flex; + flex-direction: column; +} +.mr-mobile-drawer__scroll .mr-side { + flex: 1; + min-height: 0; + width: 100%; + overflow: hidden; background: transparent; border-right: none; display: flex; flex-direction: column; } .mr-mobile-drawer__scroll .mr-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; +} +.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 { margin: 0; + flex-shrink: 0; } .mr-mobile-drawer__scroll .mr-w--side:last-of-type { margin-bottom: 0; } .mr-mobile-drawer__scroll .mr-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; } .mr-mobile-drawer__backdrop { position: fixed; diff --git a/src/layout/melissa/MelissaRelatorios.vue b/src/layout/melissa/MelissaRelatorios.vue index 271f5df..4a8f797 100644 --- a/src/layout/melissa/MelissaRelatorios.vue +++ b/src/layout/melissa/MelissaRelatorios.vue @@ -1091,58 +1091,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; } .mr-mobile-drawer.is-open { transform: translateX(0); } .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; min-height: 0; - overflow: visible; - padding: 0; + overflow: hidden; + display: flex; + flex-direction: column; +} +.mr-mobile-drawer__scroll .mr-side { + flex: 1; + min-height: 0; + width: 100%; + overflow: hidden; background: transparent; border-right: none; display: flex; flex-direction: column; } .mr-mobile-drawer__scroll .mr-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; +} +.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 { margin: 0; + flex-shrink: 0; } .mr-mobile-drawer__scroll .mr-w--side:last-of-type { margin-bottom: 0; } .mr-mobile-drawer__scroll .mr-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; } .mr-mobile-drawer__backdrop { diff --git a/src/layout/melissa/MelissaTags.vue b/src/layout/melissa/MelissaTags.vue index 15d4497..d43adeb 100644 --- a/src/layout/melissa/MelissaTags.vue +++ b/src/layout/melissa/MelissaTags.vue @@ -2256,54 +2256,57 @@ watch(editPatientDialog, (isOpen) => { 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; } .mt-mobile-drawer.is-open { transform: translateX(0); } .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; min-height: 0; - overflow: visible; - padding: 0; + overflow: hidden; + display: flex; + flex-direction: column; +} +.mt-mobile-drawer__scroll .mt-side { + flex: 1; + min-height: 0; + width: 100%; + overflow: hidden; background: transparent; border-right: none; display: flex; flex-direction: column; } .mt-mobile-drawer__scroll .mt-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; } +.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 { - 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; -} -.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 { position: fixed;