import { expect, test } from "@playwright/test";

test("reflows the UI gallery at the 320px minimum without horizontal overflow", async ({
  page,
}) => {
  await page.setViewportSize({ width: 320, height: 720 });
  await page.goto("/examples/ui");
  await expect(
    page.getByRole("heading", { level: 1, name: "UI 구성요소" }),
  ).toBeVisible();
  await expect(
    page.getByRole("button", { name: "메뉴", exact: true }),
  ).toBeVisible();

  const viewport = await page.evaluate(() => ({
    clientWidth: document.documentElement.clientWidth,
    scrollWidth: document.documentElement.scrollWidth,
  }));
  expect(viewport.scrollWidth).toBeLessThanOrEqual(viewport.clientWidth);
});

test("keeps desktop navigation and two-column examples at wide viewports", async ({
  page,
}) => {
  await page.setViewportSize({ width: 1440, height: 900 });
  await page.goto("/examples/ui");

  await expect(page.getByRole("navigation", { name: "주요 탐색" })).toBeVisible();
  await expect(
    page.getByRole("button", { name: "메뉴", exact: true }),
  ).toBeHidden();
  await expect(page.locator(".component-grid--two").first()).toHaveCSS(
    "grid-template-columns",
    /.+px .+px/,
  );
});