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 }),
})}
>
- {children}
+
+ {children}
+
);
}
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: () => (
<>
} title="APIs" />
-
-
+
+
+
+
>
),
});
@@ -166,8 +171,10 @@ export const CoreComponentsHeaderWithTabs = meta.story({
{ id: 'consumers', label: 'Consumers', href: '/apis/consumers' },
]}
/>
-
-
+
+
+
+
>
),
});