Die Kopfleiste bleibt auch in einer fremden Sicht in EINER Reihe

Filipe, mit Bildschirmfoto aus der installierten App: "es ist noch
nicht alles in einer zeile und irgendwie funktionieren nicht alle
knoepfe."

DER GRUND WAR NICHT DIE BREITE SEINES GERAETS, SONDERN DER ZUSTAND.
In der eigenen Sicht klappt der Umschalter auf 36 px zusammen; sobald
man die Sicht einer anderen Person uebernimmt, stand der Name darin und
er war 152 px breit. Gemessen waren es dann zwei Zeilen bei 320, 360,
390, 412 UND 430 px -- ausnahmslos. Auf seinem Bild stand "Miesmus..."
im Umschalter und der goldene Rahmen um die Seite: er war in einer
fremden Sicht.

MEINE PRUEFUNGEN HABEN DEN FALSCHEN ZUSTAND GEMESSEN. pruef-handy lief
ausschliesslich in der eigenen Sicht und war deshalb gruen, waehrend
es beim Nutzer zweizeilig war. Ein gruener Haken sagt nur, dass die
Bedingung erfuellt war -- nicht, dass sie den Zustand geprueft hat, in
dem der Nutzer ist. Die Pruefung wechselt jetzt selbst in eine fremde
Sicht (92 -> 99 Pruefungen).

WAS SICH AENDERT
- Auf dem Handy ist der Umschalter auch in fremder Sicht ein
  Zeichenknopf: Auge + Anfangsbuchstabe, 46-48 statt 152 px, in der
  ROLLENFARBE der Person, deren Sicht laeuft. Die Farbe kommt aus
  `data-rolle` -- dieselbe Zuordnung, die gate.css ohnehin hat, keine
  zweite Farbliste.
- Der volle Name wandert in ein Band unter die Leiste, zusammen mit
  "Zurueck zu meiner Sicht" als ganzem Satz statt als 28-px-Kreuz. Er
  steht dort GANZ statt als "Miesmus...". Am Rechner bleibt alles wie
  bisher; dort ist Platz.
- Der Rahmen um die Seite nimmt dieselbe Farbe an. Man sieht damit
  nicht nur DASS eine fremde Sicht laeuft, sondern WESSEN.
- Das `:not([data-fremd="ja"])` faellt an beiden Stellen weg. Es war
  der ganze Fehler: eine Regel, die den wichtigeren Fall ausnahm.

UND DER BLOCK FUER SCHMALE GERAETE STAND AN DER FALSCHEN STELLE
Er galt bis 340 px und stand 3600 Zeilen VOR dem 560er-Block -- bei
gleicher Spezifitaet verliert er damit. Gewirkt hat er nur, weil sein
Selektor zufaellig ein `:not()` trug. Jetzt steht er direkt hinter dem
560er und gilt bis 400 px (34 px je Knopf, 4 px Abstand). Damit bleibt
auch bei 360 px auf den UNTERSEITEN alles in einer Reihe -- dort stehen
zusaetzlich der Zurueck-Knopf und die Glocke.

Gemessen nach dem Umbau, eigene und fremde Sicht, Start- und
Unterseite: 360, 390, 412 und 430 px alle einzeilig. Offen bleibt
320 px (iPhone SE 1. Generation bzw. Anzeige-Zoom) -- dort passt es
ohne das Weglassen einer Funktion nicht, das ist eine Entscheidung
und kein Handgriff.

DER SICHERE BEREICH (auf Filipes Zusage)
Jede der 20 Seiten sagt `viewport-fit=cover`, aber im ganzen Workspace
stand kein einziges `env(safe-area-inset-*)`. Sein Android ist NICHT
betroffen (im Bildschirmfoto nachgesehen), ein iPhone waere es: Von
einem 36-px-Knopf blieben unter einer 47 px hohen Statusleiste
rechnerisch 5 px zum Antippen. Einmal zentral benannt (gate.css) und an
den vier Stellen angewandt, wo etwas am Rand klebt: Kopfleiste (oben und
seitlich), Inhalt (seitlich und unten), Speichern-Leiste im Profil,
Chat-Eingabe. Auf Geraeten ohne Aussparung sind alle vier Werte 0.

Nebenbei: chat.js misst die Hoehe ueber der Chatflaeche jetzt
einschliesslich des Bandes -- sonst stuende das Eingabefeld genau um
dessen Hoehe unter dem Bildschirmrand. Derselbe Fehler wie mit den
festen 62 px, nur mit einem anderen Element.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
2026-09-09 19:44:25 +02:00
co-authored by Claude Opus 5
parent d0ac8ee8d1
commit 6c48579f66
28 changed files with 664 additions and 282 deletions
+87 -10
View File
@@ -451,8 +451,31 @@ console.log("\n=== Kein Licht ohne Zeiger");
gehoert. Eine Regel kann von einer rollenabhaengigen ueberschrieben
werden, und dann faellt es nur bei einer auf.
--------------------------------------------------------------------- */
/* EINE Messung, zweimal benutzt (eigene und fremde Sicht). Zwei Kopien
waeren zwei Kopien, die auseinanderlaufen -- und dann prueft die eine
etwas anderes als die andere, ohne dass es auffaellt.
Gemessen wird die ZEILENZAHL, nicht die Hoehe: Eine Hoehengrenze waere
wieder eine Zahl von gestern -- sie stimmt, bis jemand die Polsterung
anfasst. Ob zwei Dinge in derselben Zeile stehen, sieht man an ihrer
Oberkante, und das gilt immer. */
async function kopfMessen(seite) {
return await seite.evaluate(() => {
const k = document.querySelector(".kopfleiste");
const teile = [...k.querySelectorAll(".kopfleiste__rechts > *"), k.querySelector(".marke")]
.filter((e) => e && e.getBoundingClientRect().width > 0);
const kanten = teile.map((e) => Math.round(e.getBoundingClientRect().top));
return { zeilen: new Set(kanten).size, spanne: Math.max(...kanten) - Math.min(...kanten),
anzahl: teile.length,
ueber: document.documentElement.scrollWidth - document.documentElement.clientWidth };
});
}
let fremdGeprueft = 0;
const mitUmschalter = new Set();
const KOPF_GERAETE = [[360, 800], [390, 844], [412, 915]];
console.log("\n=== Ring und Uhr stehen mittig (alle Rollen)");
for (const [breite, hoehe] of [[360, 800], [390, 844], [412, 915]]) {
for (const [breite, hoehe] of KOPF_GERAETE) {
for (const [rolle, code] of [["admin", "CODE-DOGI-0001"], ["spicy", "CODE-SPIC-0001"],
["manager", "CODE-MANA-0001"], ["scout", "CODE-SCOU-0001"], ["creator", "CODE-ANNA-0001"]]) {
const kontext = await browser.newContext({ viewport: { width: breite, height: hoehe } });
@@ -489,25 +512,79 @@ for (const [breite, hoehe] of [[360, 800], [390, 844], [412, 915]]) {
waere wieder eine Zahl von gestern -- sie stimmt, bis jemand die
Polsterung anfasst. Ob zwei Dinge in derselben Zeile stehen,
sieht man an ihrer Oberkante, und das gilt immer. */
const kopf = await seite.evaluate(() => {
const k = document.querySelector(".kopfleiste");
const teile = [...k.querySelectorAll(".kopfleiste__rechts > *"), k.querySelector(".marke")]
.filter((e) => e && e.getBoundingClientRect().width > 0);
const kanten = teile.map((e) => Math.round(e.getBoundingClientRect().top));
return { zeilen: new Set(kanten).size, spanne: Math.max(...kanten) - Math.min(...kanten),
anzahl: teile.length,
ueber: document.documentElement.scrollWidth - document.documentElement.clientWidth };
});
const kopf = await kopfMessen(seite);
/* 12 px Nachsicht: Ein Knopf von 36 px und ein Bild von 28 px sind
mittig ausgerichtet und haben deshalb verschiedene Oberkanten --
das ist dieselbe Zeile. Eine zweite Zeile liegt 40 px tiefer. */
ok(kopf.anzahl >= 3 && kopf.spanne <= 12 && kopf.ueber <= 1,
`${breite}px ${rolle.padEnd(8)} Kopfleiste: ${kopf.anzahl} Teile in einer Reihe `
+ `(Spanne ${kopf.spanne} px)`);
/* ---- UND DASSELBE IN EINER FREMDEN SICHT (09.09.2026) ----------
DIESE PRUEFUNG FEHLTE, UND GENAU DAS HAT DER FEHLER AUSGENUTZT.
Filipe meldete aus der installierten App "es ist noch nicht alles
in einer zeile" -- waehrend hier alles gruen war. Der Grund: Alle
Messungen liefen in der EIGENEN Sicht. Dort klappt der Umschalter
auf 36 px zusammen; sobald man die Sicht einer anderen Person
uebernimmt, stand der Name darin und er war 152 px breit. Auf
320, 360, 390, 412 UND 430 px waren es dann zwei Zeilen.
Ein gruener Haken sagt nur, dass die Bedingung erfuellt war --
nicht, dass sie den Zustand geprueft hat, in dem der Nutzer ist.
Wer keinen Umschalter hat (Creator, Scout ...), wird nicht
uebersprungen, sondern gar nicht erst gezaehlt; dass ueberhaupt
jemand geprueft wurde, steht unten in einer eigenen Bedingung. */
const wenAnsehen = await seite.evaluate(() => {
const s = document.getElementById("sicht-feld");
if (!s) return null;
const o = [...s.options].find((x) => x.value);
return o ? { id: o.value, name: o.textContent } : null;
});
if (wenAnsehen) {
await seite.evaluate((x) => localStorage.setItem("dfw-sicht", x), wenAnsehen.id);
await seite.reload({ waitUntil: "networkidle" });
await seite.waitForTimeout(1400);
const fremd = await kopfMessen(seite);
const band = await seite.evaluate(() => {
const b = document.querySelector(".fremd-band");
if (!b) return { da: false };
const r = b.getBoundingClientRect();
return { da: r.width > 0 && r.height > 0, text: (b.textContent || "").trim().slice(0, 60) };
});
fremdGeprueft++;
mitUmschalter.add(rolle);
ok(fremd.anzahl >= 3 && fremd.spanne <= 12 && fremd.ueber <= 1,
`${breite}px ${rolle.padEnd(8)} fremde Sicht: ${fremd.anzahl} Teile in einer Reihe `
+ `(Spanne ${fremd.spanne} px)`);
/* Der Name darf nicht einfach verschwinden -- er ist aus der
Leiste ins Band gewandert, und dass er DORT steht, gehoert
geprueft. Sonst waere "eine Reihe" damit erkauft, dass niemand
mehr sieht, wessen Zahlen er ansieht. */
ok(band.da && band.text.includes(wenAnsehen.name.trim()),
`${breite}px ${rolle.padEnd(8)} das Band nennt den vollen Namen`);
await seite.evaluate(() => localStorage.removeItem("dfw-sicht"));
}
await kontext.close();
}
}
/* Die Zahl gehoert in die Bedingung, nicht nur in den Bericht: Findet
die Schleife keinen einzigen Umschalter (umbenannt, Rechte geaendert),
waere oben alles gruen, ohne dass die fremde Sicht je gemessen wurde.
Die Erwartung wird ABGELEITET, nicht hingeschrieben: so viele Rollen
mit Umschalter, wie es gibt, mal so viele Breiten, wie geprueft
werden. Heute hat nur DogFather einen -- bekommt Spicy morgen auch
einen, steigt die Zahl von selbst mit, statt still danebenzuliegen.
(Beim ersten Anlauf stand hier eine 6, geraten; gemessen waren es 3.
Genau die Sorte Zahl, die spaeter grundlos rot wird.) */
ok(mitUmschalter.size >= 1 && fremdGeprueft === KOPF_GERAETE.length * mitUmschalter.size,
`die fremde Sicht wurde ${fremdGeprueft}-mal gemessen `
+ `(${mitUmschalter.size} Rolle(n) mit Umschalter x ${KOPF_GERAETE.length} Breiten)`);
await browser.close();
try { rmSync(ordner, { recursive: true, force: true }); } catch { /* egal */ }
console.log(fehler ? `\n${fehler} Prüfung(en) fehlgeschlagen.` : "\nAlles in Ordnung.");