Browse Source

fix(client): set height only when gf-page-tabs is hosted

pull/6925/head
KenTandrian 3 days ago
parent
commit
e2dfc55b19
  1. 12
      apps/client/src/styles.scss

12
apps/client/src/styles.scss

@ -365,7 +365,8 @@ ngx-skeleton-loader {
} }
.has-info-message { .has-info-message {
.page.has-tabs { // Restrict viewport height of tabbed views when the live-demo banner or system announcements are displayed
.page:has(gf-page-tabs) {
height: calc(100svh - 2 * var(--mat-toolbar-standard-height)); height: calc(100svh - 2 * var(--mat-toolbar-standard-height));
} }
} }
@ -479,7 +480,6 @@ ngx-skeleton-loader {
.page { .page {
display: flex; display: flex;
height: calc(100svh - var(--mat-toolbar-standard-height));
overflow-y: auto; overflow-y: auto;
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
padding-bottom: constant(safe-area-inset-bottom); padding-bottom: constant(safe-area-inset-bottom);
@ -491,7 +491,13 @@ ngx-skeleton-loader {
z-index: 999; z-index: 999;
} }
&:not(.has-tabs) { // Restrict viewport height and layout boundaries only when the page hosts tab navigation
&:has(gf-page-tabs) {
height: calc(100svh - var(--mat-toolbar-standard-height));
}
// Apply vertical padding only to standalone or nested content views (tabs handle their own padding)
&:not(:has(gf-page-tabs)) {
@media (min-width: 576px) { @media (min-width: 576px) {
padding: 2rem 0; padding: 2rem 0;
} }

Loading…
Cancel
Save