From 03c9d1941cbdd691016e6e536c44692320947e46 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Thu, 12 Feb 2026 13:10:23 +0100
Subject: [PATCH] core-components: BUI migration utils

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 .changeset/proud-bars-add.md                                | 5 +++++
 .changeset/silent-lizards-behave.md                         | 5 +++++
 packages/core-components/src/layout/Page/Page.tsx           | 2 ++
 packages/core-components/src/layout/Page/PageWithHeader.tsx | 5 +++--
 4 files changed, 15 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/proud-bars-add.md
 create mode 100644 .changeset/silent-lizards-behave.md

diff --git a/.changeset/proud-bars-add.md b/.changeset/proud-bars-add.md
new file mode 100644
index 0000000000..86c09f2aeb
--- /dev/null
+++ b/.changeset/proud-bars-add.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Added `noHeader` prop to `PageWithHeader` that prevents rendering of the header. This is intended to simplify migration to the new `@backstage/ui` page layout and recommended when rendering a page in the new frontend system.
diff --git a/.changeset/silent-lizards-behave.md b/.changeset/silent-lizards-behave.md
new file mode 100644
index 0000000000..9d73d34189
--- /dev/null
+++ b/.changeset/silent-lizards-behave.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': minor
+---
+
+The `Page` component now limits the height of the content to `100%` of the available space. This ensures that adding additional vertical elements doesn't cause scrollbars due to the default `100vh` height.
diff --git a/packages/core-components/src/layout/Page/Page.tsx b/packages/core-components/src/layout/Page/Page.tsx
index 4bfeb90b94..0d15d66233 100644
--- a/packages/core-components/src/layout/Page/Page.tsx
+++ b/packages/core-components/src/layout/Page/Page.tsx
@@ -30,12 +30,14 @@ const useStyles = makeStyles(
       gridTemplateColumns: 'auto 1fr auto',
       overflowY: 'auto',
       height: '100vh',
+      maxHeight: '100%',
       [theme.breakpoints.down('xs')]: {
         height: '100%',
       },
       '@media print': {
         display: 'block',
         height: 'auto',
+        maxHeight: 'none',
         overflowY: 'inherit',
       },
     },
diff --git a/packages/core-components/src/layout/Page/PageWithHeader.tsx b/packages/core-components/src/layout/Page/PageWithHeader.tsx
index 9a4dab6699..3d04e1d221 100644
--- a/packages/core-components/src/layout/Page/PageWithHeader.tsx
+++ b/packages/core-components/src/layout/Page/PageWithHeader.tsx
@@ -21,13 +21,14 @@ import { Page } from './Page';
 
 type PageWithHeaderProps = ComponentProps<typeof Header> & {
   themeId: string;
+  noHeader?: boolean;
 };
 
 export function PageWithHeader(props: PropsWithChildren<PageWithHeaderProps>) {
-  const { themeId, children, ...restProps } = props;
+  const { themeId, children, noHeader, ...restProps } = props;
   return (
     <Page themeId={themeId}>
-      <Header {...restProps} />
+      {noHeader ? <div /> : <Header {...restProps} />}
       {children}
     </Page>
   );