From 9d4fe5c6b9e97262103d099c24b8836edbecfddc Mon Sep 17 00:00:00 2001 From: Kenrick Tandrian <60643640+KenTandrian@users.noreply.github.com> Date: Sat, 23 May 2026 14:19:08 +0700 Subject: [PATCH] Bugfix/double scrollbars on feature page (#6925) * Fix double scrollbars on feature page * Remove has-tabs style class * Update changelog --- CHANGELOG.md | 4 ++++ .../src/app/pages/about/about-page.component.ts | 2 +- .../src/app/pages/admin/admin-page.component.ts | 2 +- apps/client/src/app/pages/faq/faq-page.component.ts | 2 +- .../client/src/app/pages/home/home-page.component.ts | 2 +- .../app/pages/portfolio/portfolio-page.component.ts | 2 +- .../app/pages/resources/resources-page.component.ts | 2 +- .../user-account/user-account-page.component.ts | 2 +- apps/client/src/app/pages/zen/zen-page.component.ts | 2 +- apps/client/src/styles.scss | 12 +++++++++--- 10 files changed, 21 insertions(+), 11 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index fa9bdc445..1f19cdf66 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Removed the deprecated attributes (`assetClass`, `countries`, `currency`, `dataSource`, `name`, `sectors`, `symbol` and `url`) from the holdings of the public portfolio endpoint response - Upgraded `@keyv/redis` from version `4.4.0` to `5.1.6` +### Fixed + +- Fixed a layout regression that caused a double scrollbar on pages without tabs + ## 3.4.0 - 2026-05-21 ### Added diff --git a/apps/client/src/app/pages/about/about-page.component.ts b/apps/client/src/app/pages/about/about-page.component.ts index fb632a586..616977d80 100644 --- a/apps/client/src/app/pages/about/about-page.component.ts +++ b/apps/client/src/app/pages/about/about-page.component.ts @@ -21,7 +21,7 @@ import { } from 'ionicons/icons'; @Component({ - host: { class: 'page has-tabs' }, + host: { class: 'page' }, imports: [GfPageTabsComponent], selector: 'gf-about-page', styleUrls: ['./about-page.scss'], diff --git a/apps/client/src/app/pages/admin/admin-page.component.ts b/apps/client/src/app/pages/admin/admin-page.component.ts index 6b653efb0..b933ff058 100644 --- a/apps/client/src/app/pages/admin/admin-page.component.ts +++ b/apps/client/src/app/pages/admin/admin-page.component.ts @@ -15,7 +15,7 @@ import { } from 'ionicons/icons'; @Component({ - host: { class: 'page has-tabs' }, + host: { class: 'page' }, imports: [GfPageTabsComponent], selector: 'gf-admin-page', styleUrls: ['./admin-page.scss'], diff --git a/apps/client/src/app/pages/faq/faq-page.component.ts b/apps/client/src/app/pages/faq/faq-page.component.ts index 6dabdb5e2..60081687a 100644 --- a/apps/client/src/app/pages/faq/faq-page.component.ts +++ b/apps/client/src/app/pages/faq/faq-page.component.ts @@ -11,7 +11,7 @@ import { addIcons } from 'ionicons'; import { cloudyOutline, readerOutline, serverOutline } from 'ionicons/icons'; @Component({ - host: { class: 'page has-tabs' }, + host: { class: 'page' }, imports: [GfPageTabsComponent], selector: 'gf-faq-page', styleUrls: ['./faq-page.scss'], diff --git a/apps/client/src/app/pages/home/home-page.component.ts b/apps/client/src/app/pages/home/home-page.component.ts index 453a79a52..8c5caab22 100644 --- a/apps/client/src/app/pages/home/home-page.component.ts +++ b/apps/client/src/app/pages/home/home-page.component.ts @@ -25,7 +25,7 @@ import { } from 'ionicons/icons'; @Component({ - host: { class: 'page has-tabs' }, + host: { class: 'page' }, imports: [GfPageTabsComponent], selector: 'gf-home-page', styleUrls: ['./home-page.scss'], diff --git a/apps/client/src/app/pages/portfolio/portfolio-page.component.ts b/apps/client/src/app/pages/portfolio/portfolio-page.component.ts index 00fb3242b..7f60edae8 100644 --- a/apps/client/src/app/pages/portfolio/portfolio-page.component.ts +++ b/apps/client/src/app/pages/portfolio/portfolio-page.component.ts @@ -18,7 +18,7 @@ import { } from 'ionicons/icons'; @Component({ - host: { class: 'page has-tabs' }, + host: { class: 'page' }, imports: [GfPageTabsComponent], selector: 'gf-portfolio-page', styleUrls: ['./portfolio-page.scss'], diff --git a/apps/client/src/app/pages/resources/resources-page.component.ts b/apps/client/src/app/pages/resources/resources-page.component.ts index faba06f28..52980be85 100644 --- a/apps/client/src/app/pages/resources/resources-page.component.ts +++ b/apps/client/src/app/pages/resources/resources-page.component.ts @@ -14,7 +14,7 @@ import { } from 'ionicons/icons'; @Component({ - host: { class: 'page has-tabs' }, + host: { class: 'page' }, imports: [GfPageTabsComponent], selector: 'gf-resources-page', styleUrls: ['./resources-page.scss'], diff --git a/apps/client/src/app/pages/user-account/user-account-page.component.ts b/apps/client/src/app/pages/user-account/user-account-page.component.ts index 71b93b2e4..ec7547b3c 100644 --- a/apps/client/src/app/pages/user-account/user-account-page.component.ts +++ b/apps/client/src/app/pages/user-account/user-account-page.component.ts @@ -12,7 +12,7 @@ import { addIcons } from 'ionicons'; import { diamondOutline, keyOutline, settingsOutline } from 'ionicons/icons'; @Component({ - host: { class: 'page has-tabs' }, + host: { class: 'page' }, imports: [GfPageTabsComponent], selector: 'gf-user-account-page', styleUrls: ['./user-account-page.scss'], diff --git a/apps/client/src/app/pages/zen/zen-page.component.ts b/apps/client/src/app/pages/zen/zen-page.component.ts index df3684fd2..4a897093c 100644 --- a/apps/client/src/app/pages/zen/zen-page.component.ts +++ b/apps/client/src/app/pages/zen/zen-page.component.ts @@ -12,7 +12,7 @@ import { addIcons } from 'ionicons'; import { albumsOutline, analyticsOutline } from 'ionicons/icons'; @Component({ - host: { class: 'page has-tabs' }, + host: { class: 'page' }, imports: [GfPageTabsComponent], selector: 'gf-zen-page', styleUrls: ['./zen-page.scss'], diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss index a863603b0..1eb5bd2dd 100644 --- a/apps/client/src/styles.scss +++ b/apps/client/src/styles.scss @@ -365,7 +365,8 @@ ngx-skeleton-loader { } .has-info-message { - .page.has-tabs { + // Restrict viewport height of tabbed views when the Live Demo or system announcements banner are displayed + .page:has(gf-page-tabs) { height: calc(100svh - 2 * var(--mat-toolbar-standard-height)); } } @@ -479,7 +480,6 @@ ngx-skeleton-loader { .page { display: flex; - height: calc(100svh - var(--mat-toolbar-standard-height)); overflow-y: auto; padding-bottom: env(safe-area-inset-bottom); padding-bottom: constant(safe-area-inset-bottom); @@ -491,7 +491,13 @@ ngx-skeleton-loader { 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) { padding: 2rem 0; }