From 4955e51e0738a10916b70385ec8619bd3191fa65 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Thu, 30 Apr 2026 09:56:17 +0100
Subject: [PATCH] fix(ui): handle core page after plugin header

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .changeset/core-header-marker.md                |  2 +-
 .../core-components/src/layout/Page/Page.tsx    |  7 ++++++-
 .../PluginHeader/PluginHeader.module.css        |  5 ++++-
 .../recipes/PluginHeaderAndHeader.stories.tsx   | 17 ++++++++++++-----
 4 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/.changeset/core-header-marker.md b/.changeset/core-header-marker.md
index 6260c8d690..a523c6f0b7 100644
--- a/.changeset/core-header-marker.md
+++ b/.changeset/core-header-marker.md
@@ -2,4 +2,4 @@
 '@backstage/core-components': patch
 ---
 
-Added a stable DOM marker to the legacy Header so adjacent layout components can coordinate spacing without relying on generated class names.
+Added stable DOM markers to the legacy Page and Header so adjacent layout components can coordinate spacing without relying on generated class names.
diff --git a/packages/core-components/src/layout/Page/Page.tsx b/packages/core-components/src/layout/Page/Page.tsx
index 4bfeb90b94..4b01e19b4a 100644
--- a/packages/core-components/src/layout/Page/Page.tsx
+++ b/packages/core-components/src/layout/Page/Page.tsx
@@ -59,7 +59,12 @@ export function Page(props: Props) {
         page: baseTheme.getPageTheme({ themeId }),
       })}
     >
-      <main className={classNames(classes.root, className)}>{children}</main>
+      <main
+        className={classNames(classes.root, className)}
+        data-backstage-core-page=""
+      >
+        {children}
+      </main>
     </ThemeProvider>
   );
 }
diff --git a/packages/ui/src/components/PluginHeader/PluginHeader.module.css b/packages/ui/src/components/PluginHeader/PluginHeader.module.css
index 8268d9cab0..07cf403768 100644
--- a/packages/ui/src/components/PluginHeader/PluginHeader.module.css
+++ b/packages/ui/src/components/PluginHeader/PluginHeader.module.css
@@ -28,7 +28,10 @@
   }
 
   .bui-PluginHeader:has(+ .bui-HeaderTop),
-  .bui-PluginHeader:has(+ [data-backstage-core-header]) {
+  .bui-PluginHeader:has(+ [data-backstage-core-header]),
+  .bui-PluginHeader:has(
+      + [data-backstage-core-page] [data-backstage-core-header]
+    ) {
     --bui-plugin-header-margin-bottom: 0;
     --bui-plugin-header-toolbar-border-bottom: none;
     --bui-plugin-header-tabs-border-bottom: none;
diff --git a/packages/ui/src/recipes/PluginHeaderAndHeader.stories.tsx b/packages/ui/src/recipes/PluginHeaderAndHeader.stories.tsx
index fab2262f3b..533b67add1 100644
--- a/packages/ui/src/recipes/PluginHeaderAndHeader.stories.tsx
+++ b/packages/ui/src/recipes/PluginHeaderAndHeader.stories.tsx
@@ -15,7 +15,10 @@
  */
 
 import preview from '../../../../.storybook/preview';
-import { Header as CoreHeader } from '@backstage/core-components';
+import {
+  Header as CoreHeader,
+  Page as CorePage,
+} from '@backstage/core-components';
 import type { StoryFn } from '@storybook/react-vite';
 import { MemoryRouter } from 'react-router-dom';
 import { BUIProvider } from '../provider';
@@ -143,8 +146,10 @@ export const CoreComponentsHeader = meta.story({
   render: () => (
     <>
       <PluginHeader icon={<RiCodeSSlashLine />} title="APIs" />
-      <CoreHeader title="payments-api" />
-      <PageContent />
+      <CorePage themeId="home">
+        <CoreHeader title="payments-api" />
+        <PageContent />
+      </CorePage>
     </>
   ),
 });
@@ -166,8 +171,10 @@ export const CoreComponentsHeaderWithTabs = meta.story({
           { id: 'consumers', label: 'Consumers', href: '/apis/consumers' },
         ]}
       />
-      <CoreHeader title="payments-api" />
-      <PageContent />
+      <CorePage themeId="home">
+        <CoreHeader title="payments-api" />
+        <PageContent />
+      </CorePage>
     </>
   ),
 });