fix(ui): fix Container bottom margin clash in Header

- Changed Container default bottom spacing from padding-bottom to margin-bottom
- Prevented the Container margin-bottom from applying when used as the Header root element via mb="0"
- Renamed Header CSS classes from bui-HeaderPage* to bui-Header* to match the component name

Fixes https://linear.app/spotify/issue/BACUI-249

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

.changeset/fix-header-container-padding.md

@@ -0,0 +1,5 @@
+---
+'@backstage/ui': patch
+---
+
+Fixed incorrect bottom spacing caused by `Container` using `padding-bottom` for its default bottom spacing. Changed to `margin-bottom` and prevented it from applying when `Container` is used as the `Header` root element.

.changeset/rename-header-css-classes.md

@@ -0,0 +1,15 @@
+---
+'@backstage/ui': minor
+---
+
+**BREAKING**: Renamed internal CSS classes to match the `Header` component name.
+
+**Migration notes**: If you are targeting these classes directly in your styles, update the following:
+
+- `bui-HeaderPage` → `bui-Header`
+- `bui-HeaderPageContent` → `bui-HeaderContent`
+- `bui-HeaderPageBreadcrumbs` → `bui-HeaderBreadcrumbs`
+- `bui-HeaderPageTabsWrapper` → `bui-HeaderTabsWrapper`
+- `bui-HeaderPageControls` → `bui-HeaderControls`
+
+**Affected components**: Header

packages/ui/report.api.md

@@ -1409,11 +1409,11 @@ export const HeaderDefinition: {
     readonly [key: string]: string;
   };
   readonly classNames: {
-    readonly root: 'bui-HeaderPage';
-    readonly content: 'bui-HeaderPageContent';
-    readonly breadcrumbs: 'bui-HeaderPageBreadcrumbs';
-    readonly tabsWrapper: 'bui-HeaderPageTabsWrapper';
-    readonly controls: 'bui-HeaderPageControls';
+    readonly root: 'bui-Header';
+    readonly content: 'bui-HeaderContent';
+    readonly breadcrumbs: 'bui-HeaderBreadcrumbs';
+    readonly tabsWrapper: 'bui-HeaderTabsWrapper';
+    readonly controls: 'bui-HeaderControls';
   };
   readonly propDefs: {
     readonly title: {};
@@ -1450,11 +1450,11 @@ export const HeaderPageDefinition: {
     readonly [key: string]: string;
   };
   readonly classNames: {
-    readonly root: 'bui-HeaderPage';
-    readonly content: 'bui-HeaderPageContent';
-    readonly breadcrumbs: 'bui-HeaderPageBreadcrumbs';
-    readonly tabsWrapper: 'bui-HeaderPageTabsWrapper';
-    readonly controls: 'bui-HeaderPageControls';
+    readonly root: 'bui-Header';
+    readonly content: 'bui-HeaderContent';
+    readonly breadcrumbs: 'bui-HeaderBreadcrumbs';
+    readonly tabsWrapper: 'bui-HeaderTabsWrapper';
+    readonly controls: 'bui-HeaderControls';
   };
   readonly propDefs: {
     readonly title: {};

packages/ui/src/components/Container/Container.module.css

@@ -21,7 +21,7 @@
     max-width: 120rem;
     padding-inline: var(--bui-space-4);
     margin-inline: auto;
-    padding-bottom: var(--bui-space-8);
+    margin-bottom: var(--bui-space-8);
   }
 
   @media (min-width: 640px) {

packages/ui/src/components/Header/Header.module.css

@@ -17,7 +17,7 @@
 @layer tokens, base, components, utilities;
 
 @layer components {
-  .bui-HeaderPage {
+  .bui-Header {
     display: flex;
     flex-direction: column;
     gap: var(--bui-space-1);
@@ -25,24 +25,24 @@
     margin-bottom: var(--bui-space-6);
   }
 
-  .bui-HeaderPageContent {
+  .bui-HeaderContent {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
   }
 
-  .bui-HeaderPageTabsWrapper {
+  .bui-HeaderTabsWrapper {
     margin-left: -8px;
   }
 
-  .bui-HeaderPageControls {
+  .bui-HeaderControls {
     display: flex;
     flex-direction: row;
     align-items: center;
     gap: var(--bui-space-2);
   }
 
-  .bui-HeaderPageBreadcrumbs {
+  .bui-HeaderBreadcrumbs {
     display: flex;
     flex-direction: row;
     align-items: center;

packages/ui/src/components/Header/Header.tsx

@@ -34,7 +34,7 @@ export const Header = (props: HeaderProps) => {
   const { classes, title, tabs, customActions, breadcrumbs } = ownProps;
 
   return (
-    <Container className={classes.root}>
+    <Container className={classes.root} mb="0">
       <div className={classes.content}>
         <div className={classes.breadcrumbs}>
           {breadcrumbs &&

packages/ui/src/components/Header/definition.ts

@@ -25,11 +25,11 @@ import styles from './Header.module.css';
 export const HeaderDefinition = defineComponent<HeaderOwnProps>()({
   styles,
   classNames: {
-    root: 'bui-HeaderPage',
-    content: 'bui-HeaderPageContent',
-    breadcrumbs: 'bui-HeaderPageBreadcrumbs',
-    tabsWrapper: 'bui-HeaderPageTabsWrapper',
-    controls: 'bui-HeaderPageControls',
+    root: 'bui-Header',
+    content: 'bui-HeaderContent',
+    breadcrumbs: 'bui-HeaderBreadcrumbs',
+    tabsWrapper: 'bui-HeaderTabsWrapper',
+    controls: 'bui-HeaderControls',
   },
   propDefs: {
     title: {},