diff --git a/apps/web/src/layout/PanelHost.tsx b/apps/web/src/layout/PanelHost.tsx index f873ea7..67ad6f5 100644 --- a/apps/web/src/layout/PanelHost.tsx +++ b/apps/web/src/layout/PanelHost.tsx @@ -9,6 +9,8 @@ const OPEN_FULL = new Set(["/settings", "/logbook", "/pilots", "/hqs", "/locatio /** Screens with extra columns: a wider panel on desktop. */ const WIDE = new Set(["/contracts", "/logbook"]); +/** The standard desktop panel and its margin; the map always centers beside this. */ +const DESKTOP_PANEL_PX = 436; const PEEK_PX = 96; const HALF = 0.56; const HEADER_PX = 64; @@ -50,7 +52,8 @@ export function PanelHost({ children }: { children: ReactNode }) { const { innerWidth: width, innerHeight: height } = window; const desktop = width >= 768; const left = desktop ? 96 : 0; - const right = desktop ? rect.left : width; + // A wider panel covers more of the map rather than moving it. + const right = desktop ? width - DESKTOP_PANEL_PX : width; const top = desktop ? 0 : HEADER_PX; const bottom = desktop ? height : onMap ? height - NAV_PX : rect.top; useMapFrame.setState({ diff --git a/apps/web/test/panel-host.test.tsx b/apps/web/test/panel-host.test.tsx index 52071d2..d2e3860 100644 --- a/apps/web/test/panel-host.test.tsx +++ b/apps/web/test/panel-host.test.tsx @@ -31,6 +31,22 @@ describe("the shell (decision 0.5.166)", () => { expect(screen.getByTestId("map-canvas")).toBe(canvas); }); + it("keeps the map still on desktop when a wider panel opens", async () => { + const before = window.innerWidth; + window.innerWidth = 1280; + try { + renderApp(app()); + await screen.findByRole("heading", { level: 1, name: "Bridge" }); + const standard = useMapFrame.getState().offsetX; + expect(standard).toBe(-170); + await userEvent.click(screen.getByRole("link", { name: "Jobs" })); + await screen.findByRole("heading", { level: 1, name: "Jobs" }); + expect(useMapFrame.getState().offsetX).toBe(standard); + } finally { + window.innerWidth = before; + } + }); + it("shifts the view by the frame without touching the saved camera", () => { useMapFrame.setState({ offsetX: 10, offsetY: -20 }); expect(framed(DEFAULT_CAMERA, useMapFrame.getState())).toEqual({