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

MelissaSeguranca: card Trocar senha altura por conteudo + scroll y auto

Browse Source 
Em desktop o card .mse-w do main (Trocar senha) ganha:
- max-height: 100% (do .mse-main) — nao passa do viewport
- SEM min-height — altura natural por conteudo
- body com flex: 1 + min-height: 0 + overflow-y: auto pra scroll
  interno quando o conteudo (3 inputs + barra de forca + match +
  warning + 2 botoes) precisar de mais espaco que o disponivel.

Diferente da sidebar (que mantem min-h 300 pq pode haver pouca info).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Leonardo
2026-05-06 15:59:26 -03:00
parent 2ca9cde2ea
commit c605a4f1a2
1 changed files with 16 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/melissa/MelissaSeguranca.vue
+16 -4
View File
@@ -921,15 +921,25 @@ 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): cards min-h 300 + body scroll ═══════ */ /* ═══════ Desktop (>=1024px) ═══════ */
@media (min-width: 1024px) { @media (min-width: 1024px) {
/* Sidebar: cards min-h 300 + max-h 100% + body scroll */
.mse-side > .mse-side__scroll > .mse-w--side { .mse-side > .mse-side__scroll > .mse-w--side {
min-height: 300px; min-height: 300px;
max-height: 100%; max-height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.mse-side .mse-w--side > .mse-w__body { /* Main: card "Trocar senha" sem min-height (altura por conteudo)
mas cap-ado em max-height: 100% do main pra nao passar do viewport;
body com overflow-y: auto pra scroll interno se conteudo for longo. */
.mse-main > .mse-w {
max-height: 100%;
display: flex;
flex-direction: column;
}
.mse-side .mse-w--side > .mse-w__body,
.mse-main > .mse-w > .mse-w__body {
flex: 1; flex: 1;
min-height: 0; min-height: 0;
overflow-y: auto; overflow-y: auto;
@@ -937,8 +947,10 @@ onMounted(async () => {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: var(--m-border-strong) transparent; scrollbar-color: var(--m-border-strong) transparent;
} }
.mse-side .mse-w--side > .mse-w__body::-webkit-scrollbar { width: 5px; } .mse-side .mse-w--side > .mse-w__body::-webkit-scrollbar,
.mse-side .mse-w--side > .mse-w__body::-webkit-scrollbar-thumb { .mse-main > .mse-w > .mse-w__body::-webkit-scrollbar { width: 5px; }
.mse-side .mse-w--side > .mse-w__body::-webkit-scrollbar-thumb,
.mse-main > .mse-w > .mse-w__body::-webkit-scrollbar-thumb {
background: var(--m-border-strong); background: var(--m-border-strong);
border-radius: 3px; border-radius: 3px;
} }