diff --git a/apps/desktop/src/session/components/outer-header/index.test.tsx b/apps/desktop/src/session/components/outer-header/index.test.tsx index bb52bcef34..5da0b5edc3 100644 --- a/apps/desktop/src/session/components/outer-header/index.test.tsx +++ b/apps/desktop/src/session/components/outer-header/index.test.tsx @@ -265,7 +265,7 @@ describe("OuterHeader", () => { const header = container.firstElementChild; const spacer = header?.firstElementChild; - expect(header?.className).toContain("pl-[116px]"); + expect(header?.className).toContain("pl-[156px]"); expect(header?.className).toContain("h-12"); expect(header?.className).not.toContain("pb-1"); expect(spacer?.className).toContain("flex-1"); @@ -276,6 +276,22 @@ describe("OuterHeader", () => { expect(screen.queryByRole("button", { name: "Go forward" })).toBeNull(); }); + it("uses the collapsed sidebar gutter without native window controls", () => { + mocks.leftsidebar.expanded = false; + mocks.windowControlsGutter = false; + + const { container } = render( + , + ); + + expect(container.firstElementChild?.className).toContain("pl-[80px]"); + expect(container.firstElementChild?.className).not.toContain("pl-[156px]"); + expect(container.firstElementChild?.className).not.toContain("pl-2"); + }); + it("does not add a title offset while the sidebar is expanded", () => { mocks.leftsidebar.expanded = true; @@ -291,7 +307,9 @@ describe("OuterHeader", () => { expect(spacer?.className).toContain("flex-1"); expect(spacer?.className).not.toContain("right-[140px]"); expect(spacer?.className).not.toContain("justify-center"); + expect(container.firstElementChild?.className).toContain("pl-2"); expect(container.firstElementChild?.className).not.toContain("pl-[114px]"); + expect(container.firstElementChild?.className).not.toContain("pl-[156px]"); }); it.each([ @@ -327,7 +345,8 @@ describe("OuterHeader", () => { expect(screen.queryByRole("button", { name: "Go back" })).toBeNull(); expect(screen.queryByRole("button", { name: "Go forward" })).toBeNull(); expect(screen.queryByRole("button", { name: "Stop listening" })).toBeNull(); - expect(container.firstElementChild?.className).not.toContain("pl-[116px]"); + expect(container.firstElementChild?.className).toContain("pl-2"); + expect(container.firstElementChild?.className).not.toContain("pl-[156px]"); }); it("keeps the session header at 48px tall", () => { @@ -447,7 +466,7 @@ describe("OuterHeader", () => { const header = container.firstElementChild; - expect(header?.className).not.toContain("pl-[116px]"); + expect(header?.className).not.toContain("pl-[156px]"); expect(header?.className).toContain("pl-[76px]"); }); diff --git a/apps/desktop/src/session/components/outer-header/index.tsx b/apps/desktop/src/session/components/outer-header/index.tsx index 884546613a..0a0367e3ed 100644 --- a/apps/desktop/src/session/components/outer-header/index.tsx +++ b/apps/desktop/src/session/components/outer-header/index.tsx @@ -72,8 +72,9 @@ export function OuterHeader({ "relative flex w-full items-center", "h-12", standaloneWindow && (showWindowControlsGutter ? "pl-[76px]" : "pl-2"), + !standaloneWindow && leftsidebar.expanded && "pl-2", showSidebarTimelineHeaderGutter && - (showWindowControlsGutter ? "pl-[116px]" : "pl-[48px]"), + (showWindowControlsGutter ? "pl-[156px]" : "pl-[80px]"), ])} > {viewSwitcher}