From 4e1ebeba1301b11ecf1457a4645d976b02b06ce0 Mon Sep 17 00:00:00 2001
From: Leonardo <lmnohama@gmail.com>
Date: Thu, 21 May 2026 21:48:50 -0300
Subject: [PATCH] melissa/paciente-docs: fix drawer mobile (teleport body +
 style global)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bug: drawer abria mas travava — sidebar interna nao aparecia.
Duas causas combinadas:

1. position:fixed preso em stacking context: o MelissaPaciente
   tem transform/filter num ancestral, fazendo o fixed virar
   relativo ao pai em vez da viewport.
2. Styles scoped: ate corrigir o stacking context, ao teleportar
   pro body os data-v scoped attrs sumiriam e o CSS nao aplicaria.

Fix:
- <Teleport to="body"> wrap nos elementos drawer + backdrop. Saem
  da arvore do componente e ficam no body raiz.
- Styles do drawer movidos pra um <style> NAO-scoped no fim do
  arquivo. Classes globais .mpd-mobile-drawer* garantem que
  aplique nos elementos teleportados (que perdem data-v).
- Fallbacks adicionados nas vars CSS (--m-bg-medium, --m-border,
  --m-text) caso o body nao tenha o tema melissa carregado.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../melissa/MelissaPatientDocuments.vue       | 137 +++++++++++-------
 1 file changed, 84 insertions(+), 53 deletions(-)

diff --git a/src/layout/melissa/MelissaPatientDocuments.vue b/src/layout/melissa/MelissaPatientDocuments.vue
index ceaf309..0e39665 100644
--- a/src/layout/melissa/MelissaPatientDocuments.vue
+++ b/src/layout/melissa/MelissaPatientDocuments.vue
@@ -179,23 +179,27 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-    <!-- Mobile drawer (tipos) -->
-    <Transition name="mpd-drawer-fade">
-        <div
-            v-show="isMobile && drawerOpen"
-            class="mpd-mobile-drawer"
-            :class="{ 'is-open': drawerOpen }"
-        >
-            <div id="mpd-mobile-drawer-target" class="mpd-mobile-drawer__scroll" />
-        </div>
-    </Transition>
-    <Transition name="mpd-drawer-fade">
-        <div
-            v-show="isMobile && drawerOpen"
-            class="mpd-mobile-drawer__backdrop"
-            @click="fecharDrawer"
-        />
-    </Transition>
+    <!-- Mobile drawer (tipos) — teleportado pro body pra escapar de
+         stacking contexts pais (transform/filter no MelissaPaciente
+         travavam o fixed) -->
+    <Teleport to="body">
+        <Transition name="mpd-drawer-fade">
+            <div
+                v-show="isMobile && drawerOpen"
+                class="mpd-mobile-drawer"
+                :class="{ 'is-open': drawerOpen }"
+            >
+                <div id="mpd-mobile-drawer-target" class="mpd-mobile-drawer__scroll" />
+            </div>
+        </Transition>
+        <Transition name="mpd-drawer-fade">
+            <div
+                v-show="isMobile && drawerOpen"
+                class="mpd-mobile-drawer__backdrop"
+                @click="fecharDrawer"
+            />
+        </Transition>
+    </Teleport>
 
     <section class="mpd-page">
         <!-- ── HEADER ─────────────────────────────────────── -->
@@ -646,42 +650,8 @@ onBeforeUnmount(() => {
     padding: 12px;
 }
 
-/* ═══════ Mobile drawer ═══════ */
-.mpd-mobile-drawer {
-    position: fixed;
-    top: 0; left: 0;
-    height: 100vh; height: 100dvh;
-    width: min(320px, 86vw);
-    z-index: 80;
-    background: var(--m-bg-medium);
-    backdrop-filter: blur(28px) saturate(160%);
-    -webkit-backdrop-filter: blur(28px) saturate(160%);
-    border-right: 1px solid var(--m-border);
-    transform: translateX(-100%);
-    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
-    color: var(--m-text);
-    display: flex;
-    flex-direction: column;
-}
-.mpd-mobile-drawer.is-open { transform: translateX(0); }
-.mpd-mobile-drawer:not(.is-open) { pointer-events: none; }
-.mpd-mobile-drawer__scroll {
-    flex: 1; min-height: 0; overflow-y: auto;
-    padding: 12px; display: flex; flex-direction: column;
-}
-.mpd-mobile-drawer__scroll .mpd-side {
-    width: 100%; height: 100%; border: 1px solid var(--m-border);
-}
-.mpd-mobile-drawer__backdrop {
-    position: fixed; inset: 0;
-    background: rgba(0, 0, 0, 0.45);
-    backdrop-filter: blur(4px);
-    z-index: 79;
-}
-.mpd-drawer-fade-enter-active,
-.mpd-drawer-fade-leave-active { transition: opacity 200ms ease; }
-.mpd-drawer-fade-enter-from,
-.mpd-drawer-fade-leave-to { opacity: 0; }
+/* Drawer styles foram movidos pro <style> não-scoped abaixo —
+   teleporte pro body perde o atributo data-v scoped */
 
 /* ═══════ Mobile (<1024px) ═══════ */
 @media (max-width: 1023px) {
@@ -697,3 +667,64 @@ onBeforeUnmount(() => {
     .mpd-act-btn { width: 32px; padding: 0; justify-content: center; }
 }
 </style>
+
+<!-- Styles do drawer mobile NÃO-scoped — o <Teleport to="body"> tira o
+     elemento da árvore do componente, então perde os atributos data-v
+     do scoped. Classes globais .mpd-mobile-drawer* garantem que aplique. -->
+<style>
+.mpd-mobile-drawer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    height: 100dvh;
+    width: min(320px, 86vw);
+    z-index: 80;
+    background: var(--m-bg-medium, #1a1d2e);
+    backdrop-filter: blur(28px) saturate(160%);
+    -webkit-backdrop-filter: blur(28px) saturate(160%);
+    border-right: 1px solid var(--m-border, rgba(255,255,255,0.1));
+    transform: translateX(-100%);
+    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+    color: var(--m-text, #fff);
+    display: flex;
+    flex-direction: column;
+    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+}
+.mpd-mobile-drawer.is-open {
+    transform: translateX(0);
+}
+.mpd-mobile-drawer:not(.is-open) {
+    pointer-events: none;
+}
+.mpd-mobile-drawer__scroll {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+}
+/* Sidebar teleportada herda altura plena */
+.mpd-mobile-drawer__scroll .mpd-side {
+    width: 100%;
+    height: 100%;
+    border: 1px solid var(--m-border, rgba(255,255,255,0.1));
+}
+.mpd-mobile-drawer__backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.45);
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    z-index: 79;
+}
+.mpd-drawer-fade-enter-active,
+.mpd-drawer-fade-leave-active {
+    transition: opacity 200ms ease;
+}
+.mpd-drawer-fade-enter-from,
+.mpd-drawer-fade-leave-to {
+    opacity: 0;
+}
+</style>