root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(FN-1018): isolate header brand spacing with .header-brand container

Browse Source 
- Wrap logo + title in a .header-brand div for independent flex layout
- Replace hard-coded gap/margin with gap utilities for consistent spacing
- Add .header-brand CSS class with align-items: center and gap
- Add unit test verifying brand container structure
- Document .header-brand lockup pattern in README
This commit is contained in:
gsxdsm
2026-04-05 22:29:03 -07:00
parent 6ff6e69e60
commit 31c8ea68b0
4 changed files with 39 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
packages/dashboard/app/components/Header.tsx
View File

@@ -248,21 +248,23 @@ export function Header({
return (
<header className="header">
<div className="header-left">
<svg
className="header-logo"
width={24}
height={24}
viewBox="0 0 128 128"
fill="none"
aria-label="Fusion logo"
role="img"
>
<circle cx="44" cy="44" r="20" fill="currentColor" />
<circle cx="84" cy="44" r="20" fill="currentColor" />
<circle cx="44" cy="84" r="20" fill="currentColor" />
<circle cx="84" cy="84" r="20" fill="currentColor" />
</svg>
<h1 className="logo">Fusion</h1>
<div className="header-brand">
<svg
className="header-logo"
width={24}
height={24}
viewBox="0 0 128 128"
fill="none"
aria-label="Fusion logo"
role="img"
>
<circle cx="44" cy="44" r="20" fill="currentColor" />
<circle cx="84" cy="44" r="20" fill="currentColor" />
<circle cx="44" cy="84" r="20" fill="currentColor" />
<circle cx="84" cy="84" r="20" fill="currentColor" />
</svg>
<h1 className="logo">Fusion</h1>
</div>
{/* Project Selector - shown when 2+ projects on desktop only */}
{!isCompact && projects.length > 1 && (

15
packages/dashboard/app/components/__tests__/Header.test.tsx
View File

@@ -62,6 +62,21 @@ describe("Header", () => {
expect(logo.compareDocumentPosition(h1) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
});
it("renders logo and wordmark inside a .header-brand container", () => {
const { container } = render(<Header />);
const brand = container.querySelector(".header-brand");
expect(brand).not.toBeNull();
// Brand container should contain the logo SVG
const logo = brand!.querySelector("[aria-label='Fusion logo']");
expect(logo).not.toBeNull();
// Brand container should contain the heading
const h1 = brand!.querySelector("h1.logo");
expect(h1).not.toBeNull();
expect(h1!.textContent).toBe("Fusion");
// Logo should appear before the heading within the brand container
expect(logo!.compareDocumentPosition(h1!) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
});
it("renders the settings button", () => {
const onOpen = vi.fn();
render(<Header onOpenSettings={onOpen} />);