Fix verifier QR rendering in Proof Vessel

[kojibai]

Motivation

• Ensure the QR code in the Proof Vessel (verifier) renders as a fully-scannable image rather than relying on the inlined react-qr-code component which caused display issues.
• Provide consistent sizing for compact and full layouts so the QR block scales and the fallback UI aligns exactly with the QR image.
• Avoid printing long URLs in the UI while still making the QR reliably available for scanners.

Description

• Replaced the in-component QR renderer with a generated PNG data URL via qrDataURL and stored it in component state qrDataUrl inside src/components/KaiVoh/VerifierFrame.tsx.
• Render the QR as an <img> with explicit width/height and alt, and show a styled fallback when generation fails.
• Added a CSS variable --qr-size and .kv-qr-image styling in src/components/KaiVoh/styles/VerifierFrame.css so the QR and fallback share sizing for compact and full modes.
• Removed the previous QR resolution/pick logic and dependency on printing the URL in the fallback to reduce visual clutter and improve scan reliability.

Testing

• Launched the dev server with vite (npm run dev) and it started successfully (served at http://localhost:4173/).
• Ran an automated Playwright script to open /verify/ and capture a screenshot (artifacts/verify-proof-vessel.png), and the run completed successfully producing the artifact.
• No unit tests were modified or required for this change.
• The changes were committed as part of the PR (Fix verifier QR rendering).

---

Codex Task

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
phi-network-5aii	Ready	Preview, Comment	Jan 11, 2026 3:40pm