fix(ui): handle core page after plugin header

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

.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.

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>
   );
 }

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;

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>
     </>
   ),
 });