Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MelissaSeguranca: breakpoint mobile <768px (era <1024px)

Browse Source 
Como a pagina e enxuta (so 1 form pequeno + sidebar com info), cabe
bem em tablet portrait. Reduzi o breakpoint mobile pra 768px e
adaptei a formula da largura:

- 768-1012px : full-width (right: 6px)
- 1012-2012px: width fixo 1000px
- >= 2012px  : ~50% do viewport (right: 50%)

Formula: right = max(6px, min(50%, calc(100% - 1006px)))

JS _mqMobile tambem atualizado pra (max-width: 767px).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Leonardo
2026-05-06 16:10:03 -03:00
parent 3549a977cc
commit 33370018b5
1 changed files with 14 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/melissa/MelissaSeguranca.vue
+14 -13
View File
@@ -170,7 +170,7 @@ async function sendResetEmail() {
// ── Lifecycle ────────────────────────────────────────────── // ── Lifecycle ──────────────────────────────────────────────
onMounted(async () => { onMounted(async () => {
if (typeof window !== 'undefined' && window.matchMedia) { if (typeof window !== 'undefined' && window.matchMedia) {
_mqMobile = window.matchMedia('(max-width: 1023px)'); _mqMobile = window.matchMedia('(max-width: 767px)');
isMobile.value = _mqMobile.matches; isMobile.value = _mqMobile.matches;
try { _mqMobile.addEventListener('change', _onMqMobileChange); } try { _mqMobile.addEventListener('change', _onMqMobileChange); }
catch { _mqMobile.addListener(_onMqMobileChange); } catch { _mqMobile.addListener(_onMqMobileChange); }
@@ -921,17 +921,18 @@ onMounted(async () => {
.mse-drawer-fade-enter-from, .mse-drawer-fade-enter-from,
.mse-drawer-fade-leave-to { opacity: 0; } .mse-drawer-fade-leave-to { opacity: 0; }
/* ═══════ Desktop (>=1024px) ═══════ */ /* ═══════ Desktop (>=768px) — breakpoint menor que as outras Melissa
@media (min-width: 1024px) { pages (1024px) porque essa pagina e enxuta (so 1 form pequeno) e
/* Pagina alinhada a esquerda com largura ~50%, mas com minimo cabe bem em tablet portrait. ═══════ */
de 1000px pra nao ficar cramped em viewports medios. @media (min-width: 768px) {
Formula: right = min(50%, calc(100% - 1006px)) /* Largura adaptativa, alinhada a esquerda:
- viewport >= 2012px : right = 50% (page ocupa ~50%) - 768px–1012px : full-width (right: 6px) — viewports tablet/laptop
- viewport < 2012px : right = 100%-1006 (page fica em 1000px) pequeno onde 1000px nao caberia
Em viewports < 1024px, o media query mobile la embaixo - 1012px–2012px: width = 1000px fixo (right cresce com viewport)
restaura full-width, entao min funciona suave. */ - >= 2012px : width = ~50% do viewport (right: 50%)
Formula: max(6px, min(50%, calc(100% - 1006px))) */
.mse-page { .mse-page {
right: min(50%, calc(100% - 1006px)); right: max(6px, min(50%, calc(100% - 1006px)));
} }
/* Sidebar: cards min-h 300 + max-h 100% + body scroll */ /* Sidebar: cards min-h 300 + max-h 100% + body scroll */
@@ -967,8 +968,8 @@ onMounted(async () => {
} }
} }
/* ═══════ Mobile (<1024px) ═══════ */ /* ═══════ Mobile (<768px) ═══════ */
@media (max-width: 1023px) { @media (max-width: 767px) {
.mse-body { flex-direction: column; padding: 0; } .mse-body { flex-direction: column; padding: 0; }
.mse-side { display: none; } .mse-side { display: none; }
.mse-main { width: 100%; padding: 8px; } .mse-main { width: 100%; padding: 8px; }