import { chromium } from 'playwright';

const browser = await chromium.launch();
for (const w of [1600, 1440, 1366, 1280, 1180, 1024, 992, 900, 768, 640, 480, 390]) {
  const page = await browser.newPage({ viewport: { width: w, height: 900 }, deviceScaleFactor: 1 });
  await page.goto('http://localhost:3000/miletruth', { waitUntil: 'load', timeout: 90000 });
  await page.waitForTimeout(1200);
  const r = await page.evaluate(() => {
    const copy = document.querySelector('#solution-miletruth-ai .sw-mt-copy');
    const flow = document.querySelector('#solution-miletruth-ai .sw-mt-flow');
    const labels = [...flow.querySelectorAll('.sw-mt-step-label')];
    return {
      copyW: Math.round(copy.getBoundingClientRect().width),
      // widest single unbreakable label vs the track it was given
      worst: labels.map(e => {
        const track = e.parentElement.getBoundingClientRect().width;
        return { txt: e.textContent, need: Math.round(e.scrollWidth), track: Math.round(track) };
      }).filter(x => x.need > x.track + 1),
    };
  });
  console.log(`${String(w).padStart(4)}  copy=${String(r.copyW).padStart(3)}  overflow=${r.worst.length ? JSON.stringify(r.worst) : 'none'}`);
  await page.close();
}
await browser.close();