Bugfix/double scrollbars on feature page (#6925)

* Fix double scrollbars on feature page

* Remove has-tabs style class

* Update changelog

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

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'],

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'],

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'],

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'],

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'],

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'],

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'],

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'],

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