A Codex mobile UI audit for WebViewGold apps: safe areas, touch targets and the details reviewers notice

# Pass 1: Codex reads, changes nothing, and the CLI saves the report.
codex exec --sandbox read-only -o ui-audit.md "Read AGENTS.md. This web app runs inside
native iOS and Android WebViews (WebViewGold). Audit every route and shared layout
component and REPORT ONLY, do not edit. For each finding: file:line, severity
(blocker, major, minor), what breaks on a phone, and the smallest fix. Check:
- viewport meta: width=device-width, initial-scale=1, viewport-fit=cover
- fixed or sticky elements at the top or bottom edge and how they handle safe areas
- interactive elements smaller than 44x44 CSS px, or closer than 8px to each other
- input, select and textarea font size under 16px (iOS focus zoom)
- hover-only menus, tooltips and actions
- 100vh layouts, horizontal overflow below 360px width, fixed pixel widths
- modals and sheets without a visible close button
End with a summary table by severity."

# Optional: attach device screenshots from TestFlight or internal testing
codex --sandbox workspace-write -i iphone-home.png,ipad-settings.png "These screenshots
are from the TestFlight build. Add everything visible here that ui-audit.md misses."

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