fix(ui): align header sections with container

Add container layout to Header sections so the title, actions, tags, metadata, and tabs align with surrounding page content.

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

.changeset/restore-header-containers.md

@@ -0,0 +1,7 @@
+---
+'@backstage/ui': patch
+---
+
+Added container alignment to `Header` sections so tags, title actions, descriptions, metadata, and tabs use the same width as surrounding page content.
+
+**Affected components:** Header

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

@@ -17,6 +17,12 @@
 @layer tokens, base, components, utilities;
 
 @layer components {
+  .bui-HeaderTop.bui-HeaderTop,
+  .bui-HeaderContent.bui-HeaderContent {
+    flex: none;
+    margin-bottom: 0;
+  }
+
   .bui-HeaderBottom {
     display: flex;
     flex-direction: column;
@@ -24,12 +30,9 @@
     margin-bottom: var(--bui-space-5);
   }
 
-  .bui-HeaderTop,
-  .bui-HeaderContent,
-  .bui-HeaderBottom {
-    width: 100%;
-    padding-inline: var(--bui-space-5);
-    box-sizing: border-box;
+  .bui-HeaderBottom.bui-HeaderBottom {
+    flex: none;
+    margin-bottom: var(--bui-space-5);
   }
 
   .bui-HeaderStickySentinel {

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

@@ -24,6 +24,7 @@ import { sanitizeUrl } from '@braintree/sanitize-url';
 import { Lexer } from 'marked';
 import { Link } from '../Link';
 import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
+import { Container } from '../Container';
 
 const getScrollParent = (element: HTMLElement | null): Element | null => {
   let parent = element?.parentElement;
@@ -152,7 +153,10 @@ export const Header = (props: HeaderProps) => {
 
   return (
     <>
-      <div className={classes.headerTop} data-sticky={sticky || undefined}>
+      <Container
+        className={classes.headerTop}
+        data-sticky={sticky || undefined}
+      >
         {tags && tags.length > 0 && (
           <ul className={classes.tags}>
             {tags.map((tag, i) => (
@@ -178,7 +182,7 @@ export const Header = (props: HeaderProps) => {
             ))}
           </ul>
         )}
-      </div>
+      </Container>
       {sticky && (
         <div
           ref={stickySentinelRef}
@@ -187,7 +191,7 @@ export const Header = (props: HeaderProps) => {
           aria-hidden="true"
         />
       )}
-      <div
+      <Container
         className={classes.content}
         data-sticky={sticky || undefined}
         data-stuck={isStuck || undefined}
@@ -242,8 +246,11 @@ export const Header = (props: HeaderProps) => {
           )}
         </div>
         <div className={classes.controls}>{customActions}</div>
-      </div>
-      <div className={classes.headerBottom} data-sticky={sticky || undefined}>
+      </Container>
+      <Container
+        className={classes.headerBottom}
+        data-sticky={sticky || undefined}
+      >
         {description && (
           <Text
             variant="body-medium"
@@ -278,7 +285,7 @@ export const Header = (props: HeaderProps) => {
             <HeaderNav tabs={tabs} activeTabId={activeTabId} />
           </div>
         )}
-      </div>
+      </Container>
     </>
   );
 };