dogfather-universe/server/pruef-breiten.mjs

/* JEDE BILDSCHIRMBREITE — nicht nur Handy und Rechner.

   Auftrag vom 04.09.2026 (vollstaendiger Audit), Abschnitt 4:
   "Smartphone klein, Smartphone gross, Tablet, Laptop, Desktop, grosser
   Desktop, sehr breite Bildschirme."

   WAS BISHER FEHLTE. Der Grosscheck geht ueber alle Seiten und Rollen --
   aber bei genau ZWEI Breiten: 1280 und 390. Dazwischen liegt der
   gesamte Tablet-Bereich, und darunter das kleinste Handy, das es noch
   zu kaufen gibt.

   Das ist kein theoretisches Loch: Umbruchpunkte in diesem Haus liegen
   bei 700, 760, 900 und 1100 px. Ein Layout kann bei 390 und bei 1280
   tadellos sein und bei 768 auseinanderfallen -- genau dort, wo keiner
   der beiden Messpunkte liegt. Ein Fehler in einem Umbruchpunkt zeigt
   sich immer nur in dem Fenster, das ihn trifft.

   GEMESSEN WIRD, WAS MAN SIEHT:
     1. Steht etwas seitlich ueber? (Waagerechtes Scrollen ist auf dem
        Handy der schlimmste Layoutfehler.)
     2. Ist Text abgeschnitten?
     3. Ueberdeckt etwas Bedienbares etwas anderes Bedienbares?
     4. Sind Beruehrziele auf kleinen Schirmen gross genug?

   DIE ANZAHL GEHOERT IN DIE BEDINGUNG: Eine Seite, die nichts enthaelt,
   waere sonst die sauberste von allen.

   GEGENPROBE am Ende: ein absichtlich zu breites Element muss bei jeder
   Breite auffallen. */

import { mkdtempSync, rmSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";
import { heuteLokal } from "./helfer-zeit.mjs";

const ordner = mkdtempSync(join(tmpdir(), "ws-breit-"));
process.env.WORKSPACE_DB = join(ordner, "workspace.db");
/* Der Port muss frei sein -- sonst wird gegen einen fremden Server
   gemessen. Begruendung in helfer-port.mjs. */
import { notbremse } from "./helfer-notbremse.mjs";
const { eigenerPort } = await import("./helfer-port.mjs");
const PORT = await eigenerPort(import.meta, "die Breitenpruefung");

process.env.PORT = `${PORT}`;
process.env.SITE_ACCESS_SECRET = "lokaler-test";
process.env.SITE_PUBLIC_LAUNCH_AT = "2020-01-01T00:00:00+01:00";

const express = (await import("express")).default;
const ec = express.response.cookie;
express.response.cookie = function (n, w, o) { return ec.call(this, n, w, { ...(o || {}), secure: false }); };
await import("./index.js");
/* DIE NOTBREMSE. Muss NACH index.js stehen: Der Server haengt dort
   zwei Auffangnetze ein, die einen Absturz nur protokollieren --
   richtig fuer den Betrieb, fatal fuer eine Pruefung. Ohne diese
   Zeile bleibt der Prozess nach einem Fehler ewig stehen, weil der
   Server ihn am Leben haelt (siehe helfer-notbremse.mjs). */
notbremse(480_000, "pruef-breiten");
await new Promise((r) => setTimeout(r, 900));
const BASIS = `http://127.0.0.1:${PORT}`;

let fehler = 0;
const ok = (b, t) => { console.log((b ? "  ok   " : "  FEHL ") + t); if (!b) fehler++; };

/* ---- Bestand ------------------------------------------------------------ */
const { DatabaseSync } = await import("node:sqlite");
const { scryptSync, randomBytes } = await import("node:crypto");
await fetch(BASIS + "/workspace/api/anmelden", {
  method: "POST", headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ rolle: "admin", code: "x" }) }).catch(() => {});
for (let i = 0; i < 60; i++) {
  try {
    const p = new DatabaseSync(process.env.WORKSPACE_DB);
    try { p.prepare("SELECT 1 FROM personen LIMIT 1").get(); break; } finally { p.close(); }
  } catch { await new Promise((r) => setTimeout(r, 250)); }
}
const d = new DatabaseSync(process.env.WORKSPACE_DB);
const jetzt = new Date().toISOString();
/* ORTSZEIT, nicht UTC -- Begruendung in helfer-zeit.mjs. Mit
   `jetzt.slice(0, 10)` lag dieser Wert zwischen Mitternacht und
   zwei Uhr einen Tag daneben. */
const heute = heuteLokal();
function anlegen(name, rolle, code) {
  const salt = randomBytes(16).toString("hex");
  const hash = scryptSync(code, salt, 64, { N: 32768, r: 8, p: 1, maxmem: 96 * 1024 * 1024 }).toString("hex");
  d.prepare("INSERT INTO personen (name, rolle, code_hash, code_salt, code_n, aktiv, erstellt) VALUES (?,?,?,?,?,1,?)")
    .run(name, rolle, hash, salt, 32768, jetzt);
  return d.prepare("SELECT last_insert_rowid() AS id").get().id;
}
const idDogi = anlegen("Filipe Fernandes Ribeiro", "admin", "CODE-DOGI-0001");
const idPat = anlegen("Patrick von Hohenstein", "scout", "CODE-SCOU-0001");
const idLuna = anlegen("SpongBobSchwammKopf", "creator", "CODE-CREA-0001");
d.prepare("INSERT INTO betreuung (creator_id, betreuer_id, seit) VALUES (?,?,?)").run(idLuna, idPat, jetzt);

/* Lange Inhalte ohne Umbruchgelegenheit -- kurze wuerden jeden
   Ueberlauf verstecken. */
const LANG = "Ein absichtlich sehr langer Titel ohne Leerzeichenumbrueche "
  + "damit ein Ueberlauf auffaellt statt sich zu verstecken";
for (const [titel, st] of [[LANG, "offen"], ["Kurz", "arbeit"],
  [LANG + " zwei", "review"], ["Fertig", "erledigt"]]) {
  d.prepare(`INSERT INTO aufgaben (titel, beschreibung, status, prioritaet, frist,
    creator_id, verantwortlich_id, erstellt, erstellt_von) VALUES (?,?,?,'hoch',?,?,?,?,?)`)
    .run(titel, "Eine Beschreibung mit etwas mehr Text darin, damit die Karte Hoehe bekommt.",
         st, heute, idLuna, idPat, jetzt, idDogi);
}
d.prepare(`INSERT INTO termine (titel, art, beginn, dauer_min, ort, creator_id, erstellt, erstellt_von)
  VALUES (?,'call',?,30,'https://meet.example.invalid/ein-sehr-langer-raumname-hier',?,?,?)`)
  .run(LANG, heute + "T10:00", idLuna, jetzt, idDogi);
for (const b of ["live", "community", "technik", "schutz", "content"]) {
  d.prepare(`INSERT INTO eintraege (bereich, art, titel, text, status, dringlichkeit,
    datum, creator_id, erstellt, erstellt_von) VALUES (?,?,?,?,?,?,?,?,?,?)`)
    .run(b, b === "content" ? "idee" : "vorbereitung", LANG, "Text dazu.",
         "offen", "hoch", heute, idLuna, jetzt, idPat);
}
d.prepare(`INSERT INTO leads (name, plattform, handle, status, prioritaet, scout_id, erstellt, naechster_followup)
  VALUES (?, 'tiktok','@einsehrlangername','angesprochen','hoch',?,?,?)`)
  .run(LANG, idPat, jetzt, heute);
d.close();

/* ---- Browser ------------------------------------------------------------ */
const { chromium } = await import(
  "file:///C:/Users/qciga/Documents/Obelix/Analyse/node_modules/playwright/index.mjs");
const browser = await chromium.launch();

/* Die Breiten aus dem Auftrag, dazu die Umbruchpunkte des Hauses.
   320 ist das kleinste Geraet, das noch vorkommt (iPhone SE 1);
   768 ist das klassische Tablet hochkant und liegt genau zwischen den
   beiden bisher gemessenen Punkten. */
const BREITEN = [
  [320, 568, "Handy klein"],
  [390, 844, "Handy"],
  [430, 932, "Handy gross"],
  [768, 1024, "Tablet hoch"],
  [1024, 768, "Tablet quer"],
  [1280, 900, "Laptop"],
  [1440, 900, "Desktop"],
  [1920, 1080, "Desktop gross"],
  [2560, 1440, "sehr breit"],
];

/* ---------- WELCHE SEITEN? ALLE. -----------------------------------------

   Hier stand eine Liste von Hand -- und wie ihre Schwester in
   pruef-handy.mjs war sie veraltet: chat.html und leistung.html fehlten.
   Ausgerechnet der Chat, den man auf dem Handy am ehesten benutzt, war
   bei keiner einzigen der neun Breiten je gemessen worden.

   Eine Liste von Hand altert in dem Moment, in dem jemand weiterarbeitet,
   und sie sagt nichts dazu. Der Lauf blieb gruen, die Zahl der
   Pruefungen stimmte -- gemessen wurde trotzdem zu wenig. Deshalb kommt
   sie jetzt aus dem Verzeichnis: Die naechste neue Seite ist von selbst
   dabei, so wie sie durch die Schranke in workspace.js von selbst
   geschuetzt ist.

   index.html bleibt draussen -- die Anmeldeseite leitet nach der
   Anmeldung weiter und wuerde hier nur start.html ein zweites Mal
   messen. */
const { readdirSync } = await import("node:fs");
const { dirname } = await import("node:path");
const { fileURLToPath } = await import("node:url");
/* Der Ort DIESER Datei, nicht process.cwd(): Der Gesamtlauf startet vom
   Wurzelverzeichnis, von Hand startet man aus server/. */
const SEITEN_ORDNER = join(dirname(fileURLToPath(import.meta.url)), "..", "workspace");
const MIT_ABFRAGE = { "bereich.html": "?b=live" };
const SEITEN = readdirSync(SEITEN_ORDNER)
  .filter((n) => n.endsWith(".html") && n !== "index.html")
  .sort()
  .map((n) => n + (MIT_ABFRAGE[n] || ""));

/* Die Zahl gehoert in die BEDINGUNG, nicht nur in den Meldetext: Faende
   readdirSync nichts, liefe die Schleife unten null Mal -- und der Lauf
   waere gruen, ohne eine einzige Seite angesehen zu haben. */
if (SEITEN.length < 15) {
  console.log(`  FEHL nur ${SEITEN.length} Seiten in ${SEITEN_ORDNER} gefunden `
    + "-- die Breitenpruefung kann so nichts messen");
  process.exit(1);
}
console.log(`${SEITEN.length} Seiten x ${BREITEN.length} Breiten: ${SEITEN.join(", ")}`);

const messen = () => {
  const sichtbar = (e) => {
    const r = e.getBoundingClientRect();
    if (r.width <= 0 || r.height <= 0) return false;
    /* NICHT ZAEHLEN, WAS IN EINEM ZUGEKLAPPTEN <details> STECKT.
       Chromium versteckt dessen Inhalt ueber `content-visibility`, nicht
       ueber `display` -- die Kaesten behalten deshalb eine Groesse und
       sehen fuer jede Messung aus wie sichtbare Bedienelemente. Am
       06.09.2026 meldete das einen "verdeckten" Knopf im
       Kalender-Abo-Kasten, den auf dem Bildschirm niemand sehen konnte.
       Eine Warnung ueber etwas Unsichtbares gewoehnt man sich ab zu
       lesen. */
    if (e.closest("details:not([open])")) return false;
    const st = getComputedStyle(e);
    return st.visibility !== "hidden" && st.display !== "none" && Number(st.opacity) > 0.05;
  };
  const name = (e) => `${e.tagName}${e.id ? "#" + e.id : ""}`
    + `${e.className && typeof e.className === "string" ? "." + e.className.split(" ")[0] : ""}`;

  const alle = [...document.querySelectorAll("body *")].filter(sichtbar);
  const breite = document.documentElement.clientWidth;

  /* 1. Ueberstand nach rechts. */
  const ueber = Math.max(0, Math.round(document.documentElement.scrollWidth - breite));
  const schuld = alle.filter((e) => {
    const r = e.getBoundingClientRect();
    return r.right > breite + 2 && r.width <= breite * 1.5;
  }).slice(0, 3).map((e) => `${name(e)} bis ${Math.round(e.getBoundingClientRect().right)}px`);

  /* 2. Abgeschnittener Text. Ein Kasten von einem Pixel schneidet
        nichts ab, er versteckt -- der zaehlt nicht. */
  const beschnitten = alle.filter((e) => {
    if (e.children.length > 0) return false;
    const st = getComputedStyle(e);
    if (st.overflow === "visible" && st.overflowX === "visible") return false;
    if (st.textOverflow === "ellipsis") return false;       // gewollt gekuerzt
    if (e.clientWidth < 4 || e.clientHeight < 4) return false;
    if (st.clipPath && st.clipPath !== "none") return false;
    return e.scrollWidth > e.clientWidth + 2 && (e.textContent || "").trim().length > 3;
  }).slice(0, 3).map((e) => `${name(e)} "${(e.textContent || "").trim().slice(0, 20)}"`);

  /* 3. Bedienbares, das WIRKLICH nicht zu erreichen ist.

     Der erste Entwurf fragte nur "liegt etwas darueber?" und meldete
     damit lauter Dinge, die genau so gewollt sind:

       * `.speicher-leiste` auf profil.html ist `position: sticky;
         bottom: 0` -- eine Leiste, die beim Scrollen unten stehen
         bleibt. Dass sie ueber dem Formular liegt, IST ihre Aufgabe.
         Sie wanderte bei acht von neun Breiten in die Fehlerliste.
       * Ein dekoratives SVG mit `pointer-events: none` liegt zwar
         optisch ueber einem Feld, faengt aber keinen einzigen Klick ab.

     Eine Warnung, die bei jedem Lauf kommt, ist keine Warnung mehr --
     sie wird weggeklickt, und mit ihr die echte. Deshalb gilt ein
     Element erst dann als verdeckt, wenn das, was darueber liegt,
     Klicks auch WIRKLICH abfaengt und nicht mitscrollt:
       - kein pointer-events: none
       - nicht sticky/fixed (das ist eine Leiste, kein Hindernis)
     Und geprueft wird der ganze Kasten, nicht nur der Mittelpunkt:
     Wer an einer Ecke noch hinkommt, kommt hin. */
  const bedienbar = alle.filter((e) =>
    ["A", "BUTTON", "INPUT", "SELECT", "TEXTAREA"].includes(e.tagName) && !e.disabled);
  const verdeckt = [];
  const laesstDurch = (e) => {
    for (let z = e; z && z !== document.body; z = z.parentElement) {
      const st = getComputedStyle(z);
      if (st.pointerEvents === "none") return true;
      if (st.position === "sticky" || st.position === "fixed") return true;
    }
    return false;
  };
  for (const e of bedienbar.slice(0, 60)) {
    const r = e.getBoundingClientRect();
    if (r.bottom < 0 || r.top > window.innerHeight) continue;   // ausserhalb des Fensters
    /* Fuenf Punkte statt einem: Mitte und die vier Viertelpunkte. */
    const punkte = [[0.5, 0.5], [0.25, 0.3], [0.75, 0.3], [0.25, 0.7], [0.75, 0.7]];
    let erreichbar = false;
    let hindernis = null;
    for (const [fx, fy] of punkte) {
      const x = Math.round(r.left + r.width * fx);
      const y = Math.round(r.top + r.height * fy);
      if (x < 0 || y < 0 || x > breite || y > window.innerHeight) continue;
      const oben = document.elementFromPoint(x, y);
      if (!oben || oben === e || e.contains(oben) || oben.contains(e)) { erreichbar = true; break; }
      if (laesstDurch(oben)) { erreichbar = true; break; }
      hindernis = hindernis || name(oben);
    }
    if (!erreichbar && hindernis) {
      verdeckt.push(`${name(e)} unter ${hindernis}`);
      if (verdeckt.length >= 3) break;
    }
  }

  /* 4. Beruehrziele (WCAG 2.5.8: 24x24, Verweise im Fliesstext ausgenommen). */
  const klein = bedienbar.filter((e) => {
    const r = e.getBoundingClientRect();
    if (r.width >= 24 && r.height >= 24) return false;
    const st = getComputedStyle(e);
    if (e.tagName === "A" && st.display.startsWith("inline")) {
      const eltern = (e.parentElement?.textContent || "").trim().length;
      const selbst = (e.textContent || "").trim().length;
      if (eltern > selbst + 12) return false;
    }
    return true;
  }).slice(0, 3).map((e) => {
    const r = e.getBoundingClientRect();
    return `${name(e)} ${Math.round(r.width)}x${Math.round(r.height)}`;
  });

  return {
    elemente: alle.length, bedienbar: bedienbar.length,
    inhalt: (document.body.innerText || "").trim().length,
    ueber, schuld, beschnitten, verdeckt, klein,
  };
};

let seitenGesamt = 0, elementeGesamt = 0;
const probleme = [];

for (const [breite, hoehe, wie] of BREITEN) {
  const kontext = await browser.newContext({ viewport: { width: breite, height: hoehe } });
  const seite = await kontext.newPage();
  const konsole = [];
  seite.on("console", (m) => { if (m.type() === "error") konsole.push(m.text().slice(0, 70)); });
  seite.on("pageerror", (e) => konsole.push("pageerror: " + e.message.slice(0, 70)));

  await seite.goto(BASIS + "/workspace/", { waitUntil: "domcontentloaded" });
  await seite.click('.rolle[data-rolle="admin"]');
  await seite.fill("#code", "CODE-DOGI-0001");
  await seite.click("button[type=submit]");
  await seite.waitForURL("**/start.html", { timeout: 20000 });

  let schlecht = 0;
  const details = [];
  for (const datei of SEITEN) {
    konsole.length = 0;
    await seite.goto(BASIS + "/workspace/" + datei, { waitUntil: "networkidle" });
    await seite.waitForTimeout(320);
    const r = await seite.evaluate(messen);
    seitenGesamt++;
    elementeGesamt += r.elemente;

    const m = [];
    if (r.inhalt < 40) m.push(`fast kein Inhalt (${r.inhalt})`);
    if (r.ueber > 0) m.push(`${r.ueber}px Ueberstand [${r.schuld.join(" | ")}]`);
    if (r.beschnitten.length) m.push(`abgeschnitten: ${r.beschnitten.join(" | ")}`);
    if (r.verdeckt.length) m.push(`verdeckt: ${r.verdeckt.join(" | ")}`);
    if (breite < 700 && r.klein.length) m.push(`Beruehrziel: ${r.klein.join(" | ")}`);
    if (konsole.length) m.push(`Konsole: ${konsole.slice(0, 2).join(" | ")}`);
    if (m.length) { schlecht++; details.push(`      ${datei.padEnd(22)} ${m.join("; ")}`); }
  }
  const gut = schlecht === 0;
  if (!gut) { fehler++; probleme.push(`${wie} (${breite}px)`); }
  console.log(`  ${gut ? "ok  " : "FEHL"} ${wie.padEnd(14)} ${String(breite).padStart(4)}px  `
    + `${SEITEN.length} Seiten` + (gut ? "" : `  — ${schlecht} beanstandet`));
  for (const z of details.slice(0, 6)) console.log(z);
  await kontext.close();
}

console.log(`\n=== Umfang ===`);
ok(seitenGesamt === BREITEN.length * SEITEN.length,
  `${seitenGesamt} Seitenaufrufe (${SEITEN.length} Seiten x ${BREITEN.length} Breiten)`);
ok(elementeGesamt > 20000, `${elementeGesamt} Elemente vermessen`);

/* =======================================================================
   GEGENPROBE
   ======================================================================= */
console.log(`\n=== Gegenprobe (muss anschlagen) ===`);
{
  for (const testBreite of [320, 768, 1920]) {
    const kontext = await browser.newContext({ viewport: { width: testBreite, height: 900 } });
    const seite = await kontext.newPage();
    await seite.goto(BASIS + "/workspace/", { waitUntil: "domcontentloaded" });
    await seite.click('.rolle[data-rolle="admin"]');
    await seite.fill("#code", "CODE-DOGI-0001");
    await seite.click("button[type=submit]");
    await seite.waitForURL("**/start.html", { timeout: 20000 });
    await seite.waitForTimeout(600);

    const vorher = await seite.evaluate(messen);
    ok(vorher.ueber === 0, `${testBreite}px: die Startseite steht nicht ueber (${vorher.ueber}px)`);

    const nachher = await seite.evaluate(() => {
      const k = document.createElement("div");
      k.style.cssText = "width:3000px;height:30px;background:#333";
      k.textContent = "absichtlich zu breit";
      document.body.append(k);
      const t = document.createElement("div");
      t.style.cssText = "width:40px;overflow:hidden;white-space:nowrap";
      t.textContent = "Dieses Wort passt hier nicht hinein";
      document.body.append(t);
      return true;
    });
    await seite.waitForTimeout(220);
    const r = await seite.evaluate(messen);
    ok(nachher && r.ueber > 0, `${testBreite}px: zu breites Element wird gefunden (${r.ueber}px Ueberstand)`);
    ok(r.beschnitten.length > 0, `${testBreite}px: abgeschnittener Text wird gefunden`);

    /* Der Verdeckt-Test wurde entschaerft (sticky-Leisten und
       pointer-events:none zaehlen nicht mehr). Ohne diesen Beweis
       wuesste niemand, ob er danach ueberhaupt noch etwas findet --
       "0 verdeckte Elemente" waere sonst genauso gut ein stiller
       Ausfall. Ein echtes Hindernis MUSS auffallen. */
    await seite.evaluate(() => {
      const ziel = document.querySelector("button, a[href]");
      if (!ziel) return;
      const r2 = ziel.getBoundingClientRect();
      const deckel = document.createElement("div");
      deckel.style.cssText = `position:absolute; left:${r2.left + window.scrollX}px;`
        + `top:${r2.top + window.scrollY}px; width:${Math.max(r2.width, 30)}px;`
        + `height:${Math.max(r2.height, 30)}px; background:#900; z-index:99999;`
        + "pointer-events:auto;";
      deckel.id = "deckel-test";
      document.body.append(deckel);
    });
    await seite.waitForTimeout(220);
    const v = await seite.evaluate(messen);
    ok(v.verdeckt.length > 0,
      `${testBreite}px: ein echtes Hindernis wird gefunden (${v.verdeckt.join(" | ") || "nichts"})`);
    await kontext.close();
  }
}

await browser.close();
console.log(`\n${fehler === 0 ? "ALLES IN ORDNUNG" : `${fehler} FEHLER`}`
  + (probleme.length ? ` — ${probleme.join(", ")}` : ""));
try { rmSync(ordner, { recursive: true, force: true }); } catch { /* egal */ }
process.exit(fehler ? 1 : 0);