bastian/teamwallet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: compensate 100dvh layouts for the env banner's height

Browse Source 
Shell and the public pages commit to exactly one viewport tall; without
this, the new dev-environment banner would push their bottom edge (and
Shell's bottom nav) past the visible viewport, the same overflow-leak
bug fixed earlier today.
This commit is contained in:
Bastian Wagner
2026-08-05 12:40:22 +02:00
parent c441140872
commit 91808a63f5
3 changed files with 25 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
myteamwallet_frontend_modern/src/app/core/layout/shell/shell.scss
View File

@@ -1,7 +1,8 @@
:host { :host {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100dvh; height: calc(100dvh - var(--env-banner-height, 0px));
overflow: hidden;
position: relative; position: relative;
} }
@@ -17,6 +18,7 @@
.shell-content { .shell-content {
flex: 1; flex: 1;
min-height: 0;
overflow-y: auto; overflow-y: auto;
} }

14
myteamwallet_frontend_modern/src/app/features/public-team/public-player.scss
View File

@@ -1,9 +1,12 @@
:host { :host {
display: block; display: flex;
min-height: 100%; flex-direction: column;
height: calc(100dvh - var(--env-banner-height, 0px));
overflow: hidden;
// background: color-mix(in srgb, var(--mat-sys-primary-container) 18%, var(--mat-sys-surface)); // background: color-mix(in srgb, var(--mat-sys-primary-container) 18%, var(--mat-sys-surface));
} }
.public-header { .public-header {
flex-shrink: 0;
height: 64px; height: 64px;
padding: 0 max(20px, calc((100vw - 900px) / 2)); padding: 0 max(20px, calc((100vw - 900px) / 2));
display: flex; display: flex;
@@ -22,6 +25,11 @@
font-size: 1.1rem; font-size: 1.1rem;
} }
main { main {
flex: 1;
min-height: 0;
overflow-y: auto;
}
.page {
max-width: 900px; max-width: 900px;
margin: 0 auto; margin: 0 auto;
padding: 28px 24px 64px; padding: 28px 24px 64px;
@@ -86,7 +94,7 @@ main {
color: var(--mat-sys-on-surface-variant); color: var(--mat-sys-on-surface-variant);
} }
@media (max-width: 600px) { @media (max-width: 600px) {
main { .page {
padding: 22px 16px 48px; padding: 22px 16px 48px;
} }
} }

14
myteamwallet_frontend_modern/src/app/features/public-team/public-team.scss
View File

@@ -1,9 +1,12 @@
:host { :host {
display: block; display: flex;
min-height: 100%; flex-direction: column;
height: calc(100dvh - var(--env-banner-height, 0px));
overflow: hidden;
// background: color-mix(in srgb, var(--mat-sys-primary-container) 18%, var(--mat-sys-surface)); // background: color-mix(in srgb, var(--mat-sys-primary-container) 18%, var(--mat-sys-surface));
} }
.public-header { .public-header {
flex-shrink: 0;
height: 64px; height: 64px;
padding: 0 max(20px, calc((100vw - 1180px) / 2)); padding: 0 max(20px, calc((100vw - 1180px) / 2));
display: flex; display: flex;
@@ -22,6 +25,11 @@
font-size: 1.1rem; font-size: 1.1rem;
} }
main { main {
flex: 1;
min-height: 0;
overflow-y: auto;
}
.page {
max-width: 1180px; max-width: 1180px;
margin: 0 auto; margin: 0 auto;
padding: 40px 24px 64px; padding: 40px 24px 64px;
@@ -146,7 +154,7 @@ aside h2 {
.content-grid { .content-grid {
gap: 32px; gap: 32px;
} }
main { .page {
padding: 28px 16px 48px; padding: 28px 16px 48px;
} }
} }