rory
/
deadhead-space-freight-tycoon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Keep the map still when a wider panel opens on desktop
CI / check (push) Failing after 23m42s Details 

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
fireshaper 2026-11-04 21:47:58 -05:00
parent 9564c5bd24
commit 55fa653700
2 changed files with 20 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/web/src/layout/PanelHost.tsx
View File

@ -9,6 +9,8 @@ const OPEN_FULL = new Set(["/settings", "/logbook", "/pilots", "/hqs", "/locatio
/** Screens with extra columns: a wider panel on desktop. */ /** Screens with extra columns: a wider panel on desktop. */
const WIDE = new Set(["/contracts", "/logbook"]); 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 PEEK_PX = 96;
const HALF = 0.56; const HALF = 0.56;
const HEADER_PX = 64; const HEADER_PX = 64;
@ -50,7 +52,8 @@ export function PanelHost({ children }: { children: ReactNode }) {
const { innerWidth: width, innerHeight: height } = window; const { innerWidth: width, innerHeight: height } = window;
const desktop = width >= 768; const desktop = width >= 768;
const left = desktop ? 96 : 0; 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 top = desktop ? 0 : HEADER_PX;
const bottom = desktop ? height : onMap ? height - NAV_PX : rect.top; const bottom = desktop ? height : onMap ? height - NAV_PX : rect.top;
useMapFrame.setState({ useMapFrame.setState({

16
apps/web/test/panel-host.test.tsx
View File

@ -31,6 +31,22 @@ describe("the shell (decision 0.5.166)", () => {
expect(screen.getByTestId("map-canvas")).toBe(canvas); 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", () => { it("shifts the view by the frame without touching the saved camera", () => {
useMapFrame.setState({ offsetX: 10, offsetY: -20 }); useMapFrame.setState({ offsetX: 10, offsetY: -20 });
expect(framed(DEFAULT_CAMERA, useMapFrame.getState())).toEqual({ expect(framed(DEFAULT_CAMERA, useMapFrame.getState())).toEqual({