Una auditoría de UI móvil con Codex para apps WebViewGold: área segura, áreas táctiles y los detalles en los que se fijan los revisores

# Pasada 1: Codex lee, no cambia nada, y la CLI guarda el informe.
codex exec --sandbox read-only -o ui-audit.md "Lee AGENTS.md. Esta app web se ejecuta dentro
de WebViews nativos de iOS y Android (WebViewGold). Audita cada ruta y cada componente
de layout compartido y SOLO HAZ UN INFORME, no edites nada. Para cada hallazgo:
archivo:línea, gravedad (blocker, major, minor), qué se rompe en un móvil y el arreglo
más pequeño posible. Revisa:
- viewport meta: width=device-width, initial-scale=1, viewport-fit=cover
- elementos fijos o sticky en el borde superior o inferior y cómo gestionan el área segura
- elementos interactivos de menos de 44x44 px CSS, o a menos de 8px entre sí
- tamaño de fuente de input, select y textarea por debajo de 16px (zoom al enfocar en iOS)
- menús, tooltips y acciones que solo funcionan con hover
- layouts con 100vh, desbordamiento horizontal por debajo de 360px de ancho, anchos fijos en píxeles
- modales y paneles sin un botón de cerrar visible
Termina con una tabla resumen por gravedad."

# Opcional: adjunta capturas del dispositivo desde TestFlight o las pruebas internas
codex --sandbox workspace-write -i iphone-home.png,ipad-settings.png "Estas capturas
son de la build de TestFlight. Añade todo lo que se ve aquí y que falta en ui-audit.md."

// 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);
    });
  }
}