import assert from "node:assert/strict";
import { readFileSync } from "node:fs";
import test from "node:test";

const css = readFileSync(new URL("../src/app/globals.css", import.meta.url), "utf8");
const layout = readFileSync(new URL("../src/app/layout.tsx", import.meta.url), "utf8");

test("mobile login can scroll and keeps the form reachable on a short screen", () => {
  const mobileAuth = css.indexOf(".auth-page { height: 100dvh; overflow-x: hidden; overflow-y: auto;");
  assert.ok(mobileAuth >= 0, "the login page must be the mobile scroll container");
  assert.match(css.slice(mobileAuth, mobileAuth + 900), /\.auth-shell \{ min-height: 100%; overflow: visible;/);
  assert.match(css, /@media \(max-width: 767px\) and \(max-height: 640px\) \{\s*\.auth-story \{ display: none; \}/);
  assert.match(layout, /interactiveWidget:\s*"resizes-content"/);
});

test("mobile onboarding does not clip location results or session history", () => {
  assert.match(css, /\.session-nav \{ overflow: visible; \}/);
  assert.doesNotMatch(css, /\.session-nav \{ overflow: hidden; \}/);
  assert.match(css, /\.location-combobox-results \{ position: static; top: auto;/);
});