Jyotisha/frontend/tests/chart-page-mobile-width-20260929.test.ts

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

import { cssDeclarations } from "./css-contract-test-support.ts";

/*
 * BUG-1083 (TASK-mobile-chart-and-confirmed-edit-20260929 M1): on an iPhone the
 * chart page grew past the viewport and cut the North Indian chart off.
 * `.secondary-page` is a grid; its implicit `auto` column took the page body's
 * min-content (the nowrap chart-type strip, the 34rem planet table), so the
 * body measured 1101px at a 390px viewport (headless Chrome, golden fixture).
 * The one column must be allowed to shrink below its content.
 */
const globalStyles = readFileSync(new URL("../src/app/globals.css", import.meta.url), "utf8");

test("the secondary page's single column may shrink below its content (BUG-1083)", () => {
  const page = cssDeclarations(".secondary-page", globalStyles);
  assert.match(page, /display:\s*grid/);
  assert.match(page, /grid-template-columns:\s*minmax\(0,\s*1fr\)/);
});

test("wide chart-page content still scrolls inside its own box instead of widening the page", () => {
  assert.match(cssDeclarations(".chart-page-planet-table-wrap", globalStyles), /overflow-x:\s*auto/);
  assert.match(cssDeclarations(".chart-page-type-strip", globalStyles), /overflow-x:\s*auto/);
  assert.match(cssDeclarations(".chart-page-planet-table", globalStyles), /min-width:\s*34rem/);
});