From e2dfc55b19db3ed4107310d8feec2362bea7be90 Mon Sep 17 00:00:00 2001
From: KenTandrian <kenricktan11@gmail.com>
Date: Sat, 23 May 2026 11:24:41 +0700
Subject: [PATCH] fix(client): set height only when gf-page-tabs is hosted

---
 apps/client/src/styles.scss | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index a863603b0..8c209757c 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 banner or system announcements 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;
     }