|
|
@ -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; |
|
|
} |
|
|
} |
|
|
|