Ein mobiler UI-Audit mit Codex für WebViewGold-Apps: Safe Areas, Touch-Targets und die Details, die Reviewern auffallen

# Durchgang 1: Codex liest, ändert nichts, und die CLI speichert den Bericht.
codex exec --sandbox read-only -o ui-audit.md "Lies AGENTS.md. Diese Web-App läuft in
nativen iOS- und Android-WebViews (WebViewGold). Prüfe jede Route und jede gemeinsame
Layout-Komponente und ERSTELLE NUR EINEN BERICHT, bearbeite nichts. Für jeden Befund:
Datei:Zeile, Schweregrad (blocker, major, minor), was auf einem Handy kaputtgeht, und
der kleinste Fix. Prüfe:
- viewport meta: width=device-width, initial-scale=1, viewport-fit=cover
- fixierte oder sticky Elemente am oberen oder unteren Rand und wie sie mit Safe Areas umgehen
- interaktive Elemente kleiner als 44x44 CSS-px oder näher als 8px beieinander
- Schriftgröße von input, select und textarea unter 16px (Fokus-Zoom auf iOS)
- Menüs, Tooltips und Aktionen, die nur per Hover funktionieren
- 100vh-Layouts, horizontaler Overflow unter 360px Breite, feste Pixelbreiten
- Modals und Sheets ohne sichtbaren Schließen-Button
Schließe mit einer Übersichtstabelle nach Schweregrad."

# Optional: Geräte-Screenshots aus TestFlight oder dem internen Test anhängen
codex --sandbox workspace-write -i iphone-home.png,ipad-settings.png "Diese Screenshots
stammen aus dem TestFlight-Build. Ergänze alles, was hier sichtbar ist und in ui-audit.md fehlt."

// tests/mobile-ui.spec.js (run: npx playwright test tests/mobile-ui.spec.js)
import { test, expect } from "@playwright/test";

const ROUTES = ["/", "/login", "/settings", "/projects/demo"];
const WIDTHS = [320, 375, 430, 768]; // small phone, phone, large phone, iPad portrait
const ALLOW = ["a.inline-link", "input[type=checkbox]"]; // reviewed exceptions

for (const width of WIDTHS) {
  for (const route of ROUTES) {
    test(route + " at " + width + "px", async ({ page }) => {
      await page.setViewportSize({ width, height: 860 });
      await page.goto(route);

      // 1. No sideways scrolling
      const overflow = await page.evaluate(
        () => document.documentElement.scrollWidth - window.innerWidth);
      expect(overflow, "horizontal overflow in px").toBeLessThanOrEqual(0);

      // 2. Tap targets of at least 44 x 44 CSS px
      const small = await page.$$eval("a, button, [role=button], [role=tab], select",
        (els, allow) => els
          .filter((el) => !allow.some((sel) => el.matches(sel)))
          .filter((el) => { const r = el.getBoundingClientRect();
            return r.width > 0 && (r.width < 44 || r.height < 44); })
          .map((el) => (el.getAttribute("aria-label") || el.textContent || el.tagName)
            .trim().slice(0, 40)),
        ALLOW);
      expect(small, "tap targets under 44px").toEqual([]);

      // 3. No iOS focus zoom: form fields at 16px or more
      const tiny = await page.$$eval("input, select, textarea",
        (els) => els.filter((el) => parseFloat(getComputedStyle(el).fontSize) < 16).length);
      expect(tiny, "form fields under 16px").toBe(0);
    });
  }
}