From 2520b0175bf305c00dee0b25155e907800168e58 Mon Sep 17 00:00:00 2001
From: Rohit Rai <rohitkrai03@gmail.com>
Date: Fri, 11 Sep 2026 20:45:06 +0530
Subject: [PATCH] fix(theme): prevent entity page content clipping

Allow RHDH entity pages to grow beyond the viewport while preserving the existing layout behavior for other page types.
---
 .../theme/.changeset/entity-page-layout.md     |  6 ++++++
 .../theme/src/utils/createComponents.test.ts   |  8 +++++---
 .../theme/src/utils/createComponents.ts        | 18 +++++++++---------
 3 files changed, 20 insertions(+), 12 deletions(-)
 create mode 100644 workspaces/theme/.changeset/entity-page-layout.md

diff --git a/workspaces/theme/.changeset/entity-page-layout.md b/workspaces/theme/.changeset/entity-page-layout.md
new file mode 100644
index 00000000000..caeb5b109b2
--- /dev/null
+++ b/workspaces/theme/.changeset/entity-page-layout.md
@@ -0,0 +1,6 @@
+---
+'@red-hat-developer-hub/backstage-plugin-theme': patch
+---
+
+Fix the RHDH entity-page layout so content can grow beyond the viewport without
+being clipped by the main content container.
diff --git a/workspaces/theme/plugins/theme/src/utils/createComponents.test.ts b/workspaces/theme/plugins/theme/src/utils/createComponents.test.ts
index cc63ad286bc..ec182baa6dd 100644
--- a/workspaces/theme/plugins/theme/src/utils/createComponents.test.ts
+++ b/workspaces/theme/plugins/theme/src/utils/createComponents.test.ts
@@ -125,12 +125,14 @@ describe('createComponents', () => {
     const desktop = root?.['@media (min-width: 600px)'] as
       | Record<string, unknown>
       | undefined;
-    expect(desktop?.['& > main:not([data-backstage-core-page])']).toEqual(
+    expect(desktop?.['& > main:has([class*="bui-Container"])']).toEqual(
       expect.objectContaining({
         display: 'flex',
         flexDirection: 'column',
-        flex: 1,
-        minHeight: 0,
+        flex: '1 0 auto',
+        minHeight: 'calc(100vh - 2 * 1.5rem)',
+        height: 'auto',
+        maxHeight: 'none !important',
       }),
     );
   });
diff --git a/workspaces/theme/plugins/theme/src/utils/createComponents.ts b/workspaces/theme/plugins/theme/src/utils/createComponents.ts
index e5607299331..eb6f508b551 100644
--- a/workspaces/theme/plugins/theme/src/utils/createComponents.ts
+++ b/workspaces/theme/plugins/theme/src/utils/createComponents.ts
@@ -815,17 +815,17 @@ export const createComponents = (themeConfig: ThemeConfig): Components => {
               // Prevent overflow in the main container due to the margin
               maxHeight: `calc(100vh - 2 * ${general.pageInset})`,
             },
-            // NFS BUI entity pages wrap PluginHeader + tabs + Container in a
-            // classless <main>. BUI Container is flex: 1 1 0% but that only
-            // grows when main is a flex column — otherwise Topology / Scorecard
-            // stay content-height inside a tall well (RHDHBUGS-3543). Do not
-            // override Backstage Page, which uses display:grid on <main>.
-            '& > main:not([data-backstage-core-page])': {
+            // NFS BUI entity pages wrap their content in a BUI Container inside
+            // a classless <main>. The Container is flex: 1 1 0%, but that only
+            // grows when main is a flex column. Keep the main content at least
+            // viewport-height while allowing longer entity pages to grow.
+            '& > main:has([class*="bui-Container"])': {
               display: 'flex',
               flexDirection: 'column',
-              flex: 1,
-              minHeight: 0,
-              maxHeight: `calc(100% - 2 * ${general.pageInset})`,
+              flex: '1 0 auto',
+              minHeight: `calc(100vh - 2 * ${general.pageInset})`,
+              height: 'auto',
+              maxHeight: 'none !important',
             },
             // NFS / BUI pages use Container instead of <main>. Match the content
             // well color (same token as BackstageContent) and rely on flex: 1