evOo-local/apps/web/e2e/mobile-layout-audit.spec.ts

import { expect, test } from "@playwright/test";
import {
  assertNoHorizontalOverflow,
  assertPrimaryTouchTargets,
  completeOnboarding,
  openUserSettings,
  rpc,
  signup,
  waitForChatComposer,
} from "./helpers";

test.use({ viewport: { width: 390, height: 844 }, isMobile: true, hasTouch: true });

test("main routes avoid horizontal overflow on a phone viewport", async ({ page }) => {
  const stamp = Date.now();
  await signup(page, `mobile-layout-${stamp}@rakazo.test`, "password12", "Mobile Layout");
  await completeOnboarding(page, undefined, { mainConversation: true });
  await waitForChatComposer(page);

  const groupMatch = page.url().match(/\/app\/g\/([^/]+)/);
  const groupId = groupMatch?.[1];
  const bots = await rpc<Array<{ id: string }>>(page, "bots/list", {});
  const botId = bots[0]?.id;
  expect(groupId).toBeTruthy();
  expect(botId).toBeTruthy();

  const routes = [`/app/heute`, `/app/g/${groupId}`, `/app/${botId}`];
  for (const route of routes) {
    await page.goto(route, { waitUntil: "domcontentloaded" });
    await expect(page.getByTestId("shell-root")).toHaveAttribute("data-ready", "true", {
      timeout: 60_000,
    });
    await assertNoHorizontalOverflow(page);
  }

  const settings = await openUserSettings(page);
  for (const section of ["models", "memory", "voice", "notifications", "privacy"] as const) {
    await settings.getByTestId(`settings-nav-${section}`).click();
    await assertNoHorizontalOverflow(page);
  }
});

test("primary shell controls meet touch target guidance", async ({ page }) => {
  const stamp = Date.now();
  await signup(page, `mobile-touch-${stamp}@rakazo.test`, "password12", "Mobile Touch");
  await completeOnboarding(page);
  await waitForChatComposer(page);

  await assertPrimaryTouchTargets(page, [
    "[data-testid='user-menu-trigger']",
    "[data-testid='create-menu-trigger']",
    "[data-testid='open-navigation']",
  ]);
});