diff --git a/src/layout/melissa/MelissaSeguranca.vue b/src/layout/melissa/MelissaSeguranca.vue index 442d1bb..bb0c208 100644 --- a/src/layout/melissa/MelissaSeguranca.vue +++ b/src/layout/melissa/MelissaSeguranca.vue @@ -923,12 +923,15 @@ onMounted(async () => { /* ═══════ Desktop (>=1024px) ═══════ */ @media (min-width: 1024px) { - /* Pagina ocupa ~50% da largura util, alinhada a esquerda — pq - Seguranca tem so 1 form pequeno (Trocar senha) e nao precisa - de toda a largura. inset top/bottom mantidos do base; left - fica em 6px (igual base) e right vai pra 50%. */ + /* Pagina alinhada a esquerda com largura ~50%, mas com minimo + de 1000px pra nao ficar cramped em viewports medios. + Formula: right = min(50%, calc(100% - 1006px)) + - viewport >= 2012px : right = 50% (page ocupa ~50%) + - viewport < 2012px : right = 100%-1006 (page fica em 1000px) + Em viewports < 1024px, o media query mobile la embaixo + restaura full-width, entao min funciona suave. */ .mse-page { - right: 50%; + right: min(50%, calc(100% - 1006px)); } /* Sidebar: cards min-h 300 + max-h 100% + body scroll */