Fix mobile overlay spacing and home action placement

src/pages/game/config/index.ts

@@ -32,3 +32,62 @@ export const GAME_PAGE_SCROLL_LOCK = {
 	OVERFLOW_LOCKED: "hidden",
 	OVERSCROLL_BEHAVIOR_LOCKED: "none",
 } as const;
+
+export const GAME_PAGE_MOBILE_ACTION_PANEL_CLASS_NAMES = {
+	ROOT: "pointer-events-auto relative flex shrink-0 flex-col items-end",
+	PROMPT_SLOT: "absolute bottom-full right-0 mb-4 flex w-40 flex-col gap-2",
+	COMPACT_WIDTH: "w-9",
+	TABLET_WIDTH: "w-40",
+	CONTROL_STACK: "flex w-full flex-col items-end gap-2",
+} as const;
+
+export const GAME_PAGE_MOBILE_TOUCH_ACTION_PANEL_CLASS_NAMES = {
+	ROOT: "flex w-full flex-col gap-2 empty:hidden",
+	BUTTON: "pointer-events-auto relative w-full font-bold",
+	BUTTON_LABEL: "block w-full truncate text-center",
+	INTERACT_BADGE:
+		"absolute -top-2 -right-2 flex h-4 w-4 animate-pulse items-center justify-center rounded-full bg-dungeon-gold p-0 shadow-[0_0_8px_var(--dungeon-gold)]",
+	ATTACK_BADGE:
+		"absolute -top-2 -right-2 flex h-4 w-4 animate-pulse items-center justify-center rounded-full bg-success p-0 shadow-[0_0_8px_var(--success)]",
+} as const;
+
+export const GAME_PAGE_MOBILE_TOUCH_ACTION_PANEL_TEST_IDS = {
+	ROOT: "game-page-mobile-touch-actions",
+} as const;
+
+export const GAME_PAGE_MOBILE_ACTION_PANEL_TEST_IDS = {
+	ROOT: "game-page-mobile-action-panel",
+	PROMPT_SLOT: "game-page-mobile-action-panel-prompt-slot",
+	CONTROL_STACK: "game-page-mobile-action-panel-control-stack",
+} as const;
+
+export const GAME_PAGE_HOME_ACTION_TEST_IDS = {
+	ROOT: "game-page-home-action",
+} as const;
+
+export const GAME_PAGE_MOBILE_TOP_BAR_TEST_IDS = {
+	ROOT: "game-page-mobile-top-bar",
+	LEFT_CLUSTER: "game-page-mobile-top-bar-left-cluster",
+	RIGHT_CLUSTER: "game-page-mobile-top-bar-right-cluster",
+	HP_PANEL: "game-page-mobile-top-bar-hp-panel",
+} as const;
+
+export const GAME_PAGE_DESKTOP_HEADER_TEST_IDS = {
+	ROOT: "game-page-desktop-header",
+	ACTIONS: "game-page-desktop-header-actions",
+} as const;
+
+export const GAME_PAGE_MOBILE_OVERLAY_CLASS_NAMES = {
+	ROOT: "pointer-events-none absolute right-4 bottom-4 z-30 flex items-end gap-2",
+	JOYSTICK_ANCHOR: "pointer-events-none absolute bottom-4 left-4 z-30",
+	JOYSTICK_INTERACTIVE_SURFACE: "pointer-events-auto",
+	RUN_JUMP_ANCHOR: "flex items-end",
+	RUN_JUMP_INTERACTIVE_SURFACE: "pointer-events-auto",
+	ACTION_PANEL_ANCHOR: "flex items-end",
+} as const;
+
+export const GAME_PAGE_MOBILE_OVERLAY_TEST_IDS = {
+	ROOT: "mobile-overlay-row",
+	RUN_JUMP_ANCHOR: "mobile-run-jump-anchor",
+	ACTION_PANEL_ANCHOR: "mobile-action-panel-anchor",
+} as const;

src/pages/game/ui/GamePage.test.tsx

@@ -468,6 +468,11 @@ describe("GamePage", () => {
 				name: "RUNESTONE",
 			}),
 		).not.toBeNull();
+		expect(
+			within(screen.getByRole("banner")).getByRole("link", {
+				name: GAME_PAGE_CONTROLS.NAVIGATION.HOME_ARIA_LABEL,
+			}),
+		).not.toBeNull();
 
 		expect(
 			screen.getByRole("button", {

src/pages/game/ui/GamePageDesktopHeader.test.tsx

@@ -0,0 +1,95 @@
+// @vitest-environment happy-dom
+
+import { render, screen, within } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { describe, expect, it, vi } from "vitest";
+
+import {
+	GAME_PAGE_CONTROLS,
+	GAME_PAGE_DESKTOP_HEADER_TEST_IDS,
+	GAME_PAGE_HOME_ACTION_TEST_IDS,
+} from "@/pages/game/config";
+
+import { GamePageDesktopHeader } from "./GamePageDesktopHeader";
+
+vi.mock("@/pages/game/model", () => ({
+	useGamePageDesktopHeaderModel: () => ({
+		currentRoomLabel: "Entrance",
+		handleAudioMuteToggle: vi.fn(),
+		isAudioMuted: false,
+	}),
+}));
+
+vi.mock("@tanstack/react-router", () => ({
+	Link: ({ children, to, ...props }: { children: ReactNode; to: string }) => (
+		<a href={to} {...props}>
+			{children}
+		</a>
+	),
+}));
+
+vi.mock("@/shared/ui", async () => {
+	const actual =
+		await vi.importActual<typeof import("@/shared/ui")>("@/shared/ui");
+
+	return {
+		...actual,
+		Tooltip: ({ children }: { children: ReactNode }) => <>{children}</>,
+		TooltipContent: ({ children }: { children: ReactNode }) => <>{children}</>,
+		TooltipTrigger: ({ children }: { children: ReactNode }) => <>{children}</>,
+	};
+});
+
+vi.mock("@/widgets/leaderboard-panel", () => ({
+	LeaderboardSheet: ({ children }: { children: ReactNode }) => <>{children}</>,
+}));
+
+vi.mock("@/widgets/settings-panel", () => ({
+	SettingsSheet: ({ children }: { children: ReactNode }) => <>{children}</>,
+}));
+
+describe("GamePageDesktopHeader", () => {
+	it("places the home action at the far right beside settings", () => {
+		render(<GamePageDesktopHeader />);
+
+		const root = screen.getByTestId(GAME_PAGE_DESKTOP_HEADER_TEST_IDS.ROOT);
+		const actions = screen.getByTestId(
+			GAME_PAGE_DESKTOP_HEADER_TEST_IDS.ACTIONS,
+		);
+		const homeAction = screen.getByTestId(GAME_PAGE_HOME_ACTION_TEST_IDS.ROOT);
+
+		expect(root.className).toContain("justify-between");
+		expect(actions.parentElement).toBe(root);
+		expect(homeAction.parentElement).toBe(actions);
+		expect(actions.lastElementChild).toBe(homeAction);
+		expect(homeAction.getAttribute("href")).toBe("/");
+		expect(homeAction.getAttribute("data-size")).toBe("icon-sm");
+		expect(homeAction.getAttribute("data-variant")).toBe("dungeon-outline");
+		expect(homeAction.className).not.toContain("w-fit");
+		expect(
+			within(root).getByRole("link", {
+				name: "RUNESTONE",
+			}),
+		).toBeTruthy();
+		expect(
+			within(actions).getByRole("button", {
+				name: GAME_PAGE_CONTROLS.AUDIO.MUTE_ARIA_LABEL,
+			}),
+		).toBeTruthy();
+		expect(
+			within(actions).getByRole("button", {
+				name: GAME_PAGE_CONTROLS.LEADERBOARD.ARIA_LABEL,
+			}),
+		).toBeTruthy();
+		expect(
+			within(actions).getByRole("button", {
+				name: GAME_PAGE_CONTROLS.SETTINGS.ARIA_LABEL,
+			}),
+		).toBeTruthy();
+		expect(
+			screen.getByRole("link", {
+				name: GAME_PAGE_CONTROLS.NAVIGATION.HOME_ARIA_LABEL,
+			}),
+		).toBe(homeAction);
+	});
+});

src/pages/game/ui/GamePageDesktopHeader.tsx

@@ -1,20 +1,26 @@
 import { Link } from "@tanstack/react-router";
 import { Trophy, Volume2, VolumeX } from "lucide-react";
 
-import { GAME_PAGE_CONTROLS } from "@/pages/game/config";
+import {
+	GAME_PAGE_CONTROLS,
+	GAME_PAGE_DESKTOP_HEADER_TEST_IDS,
+} from "@/pages/game/config";
 import { useGamePageDesktopHeaderModel } from "@/pages/game/model";
 import { Button, Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui";
 import { LeaderboardSheet } from "@/widgets/leaderboard-panel";
 import { MARKETING_ROUTES } from "@/widgets/marketing-shell";
-
 import { GamePageDesktopSettingsAction } from "./GamePageDesktopSettingsAction";
+import { GamePageHomeAction } from "./GamePageHomeAction";
 
 export function GamePageDesktopHeader() {
 	const { currentRoomLabel, handleAudioMuteToggle, isAudioMuted } =
 		useGamePageDesktopHeaderModel();
 
 	return (
-		<header className="flex shrink-0 flex-wrap items-center justify-between gap-2 border-b border-panel-border px-4 py-2">
+		<header
+			data-testid={GAME_PAGE_DESKTOP_HEADER_TEST_IDS.ROOT}
+			className="flex shrink-0 flex-wrap items-center justify-between gap-2 border-b border-panel-border px-4 py-2"
+		>
 			<div className="flex items-center gap-3">
 				<Link
 					to={MARKETING_ROUTES.HOME}
@@ -26,7 +32,10 @@ export function GamePageDesktopHeader() {
 				<span className="rune-text">Floor I</span>
 			</div>
 
-			<div className="flex items-center gap-2 sm:gap-4">
+			<div
+				data-testid={GAME_PAGE_DESKTOP_HEADER_TEST_IDS.ACTIONS}
+				className="flex items-center gap-2 sm:gap-4"
+			>
 				<span className="flex shrink-0 items-center gap-2 whitespace-nowrap">
 					<span className="rune-text">Room:</span>
 					<span className="rune-value text-panel-title">
@@ -80,6 +89,8 @@ export function GamePageDesktopHeader() {
 				</Tooltip>
 
 				<GamePageDesktopSettingsAction />
+
+				<GamePageHomeAction />
 			</div>
 		</header>
 	);

src/pages/game/ui/GamePageHomeAction.tsx

@@ -0,0 +1,25 @@
+import { Link } from "@tanstack/react-router";
+import { Home } from "lucide-react";
+
+import {
+	GAME_PAGE_CONTROLS,
+	GAME_PAGE_HOME_ACTION_TEST_IDS,
+} from "@/pages/game/config";
+import { Button } from "@/shared/ui";
+import { MARKETING_ROUTES } from "@/widgets/marketing-shell";
+
+export function GamePageHomeAction() {
+	return (
+		<Button
+			asChild
+			data-testid={GAME_PAGE_HOME_ACTION_TEST_IDS.ROOT}
+			variant="dungeon-outline"
+			size="icon-sm"
+			aria-label={GAME_PAGE_CONTROLS.NAVIGATION.HOME_ARIA_LABEL}
+		>
+			<Link to={MARKETING_ROUTES.HOME}>
+				<Home className="h-4 w-4" />
+			</Link>
+		</Button>
+	);
+}