fix(ui): apply PageHeader logo size constraints to nested elements

.changeset/fix-pageheader-wrapped-logo.md

@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-ui-components": patch
+---
+
+Fix `PageHeader` logo size constraints not applying to nested logo elements. The logo container now uses the universal-descendant variant so a wrapped logo (e.g. an `<a>` containing an `<svg>`) is sized correctly within the fixed-height header.

packages/ui-components/src/components/PageHeader/PageHeader.component.tsx

@@ -42,10 +42,10 @@ const logoAndTitleContainerStyles = `
 
 const logoContainerStyles = `
   jn:max-w-xs
-  jn:*:w-min
-  jn:*:max-w-xs
-  jn:*:h-7
-  jn:*:object-contain
+  jn:**:w-min
+  jn:**:max-w-xs
+  jn:**:h-7
+  jn:**:object-contain
 `
 
 const applicationNameStyles = `

packages/ui-components/src/components/PageHeader/PageHeader.stories.tsx

@@ -162,3 +162,28 @@ export const WithCustomLogoPNGPortrait: Story = {
     ),
   },
 }
+
+export const WithWrappedLogo: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "A 'wrapped' logo is a logo element nested inside a parent (e.g. an `<a>` link, or any other container) rather than passed directly. The size constraints applied by `PageHeader` propagate to descendants, so the inner logo is sized correctly within the fixed-height header regardless of how deeply it is nested.",
+      },
+    },
+  },
+  args: {
+    logo: (
+      <a href="https://example.com" aria-label="Go to homepage">
+        <CustomLogoLandscape alt="" />
+      </a>
+    ),
+    applicationName: "My Awesome App",
+    children: (
+      <>
+        <span>Jane Doe</span>
+        <Button size="small">Log Out</Button>
+      </>
+    ),
+  },
+}

packages/ui-components/src/components/PageHeader/PageHeader.test.tsx

@@ -62,6 +62,22 @@ describe("PageHeader", () => {
     expect(screen.getByRole("img")).toHaveClass("juno-test-logo")
   })
 
+  test("renders a wrapped logo (e.g. nested inside a link) and applies size constraints to all descendants", () => {
+    render(
+      <PageHeader
+        logo={
+          <a href="https://example.com" aria-label="Go to homepage">
+            <CustomLogoComponent />
+          </a>
+        }
+      />
+    )
+    expect(screen.getByRole("link", { name: "Go to homepage" })).toBeInTheDocument()
+    expect(screen.getByTestId("custom-logo")).toBeInTheDocument()
+    const logoContainer = document.querySelector(".juno-pageheader-logo-container")
+    expect(logoContainer).toHaveClass("jn:**:h-7", "jn:**:max-w-xs", "jn:**:object-contain", "jn:**:w-min")
+  })
+
   test("renders a custom className", () => {
     render(<PageHeader className="my-custom-classname" />)
     expect(screen.getByRole("banner")).toBeInTheDocument()