# gngtickets Verification Notes

## Discovery error state

The homepage supports a development-only preview route at `/?preview=discovery-error`. In development, this disables the published-event query and renders the same designed error branch used for a real query failure.

Visual verification completed on 2026-08-14 at the desktop 1280×720 viewport using the full-page preview. The page showed the gngtickets branded header and hero, the discovery heading and filters, a calm bordered error panel reading “We could not load published events.”, supporting retry copy, and a visible “Retry” action. The surrounding editorial layout remained intact rather than collapsing into a browser-default error page.

This preview mechanism is development-only and does not affect normal published-event discovery.

## Responsive layout verification — 2026-08-14

The gngtickets responsive pass was reviewed at 390×844 phone, 768×1024 tablet, 1280×720 standard desktop, and 1440×900 wide desktop viewports. The public discovery route, organizer create-event route, attendee wallet, event-details fallback, organizer dashboard, and order-status route were captured.

At phone width, headers wrap without horizontal page overflow, the homepage hero remains readable, the create-event form collapses to a single column, dashboard metrics stack vertically, ticket cards remain readable with the QR surface visible, and order-status actions remain usable. At tablet width, navigation and content use the available width while forms and dashboard metric cards use two-column compositions where appropriate. At standard and wide desktop widths, the homepage hero returns to a two-column editorial composition, create-event uses a spacious form-plus-banner layout, dashboard metrics form a four-column row, and ticket cards use the wide content-plus-QR arrangement.

The event-details fallback and order-status states were also reviewed at phone, tablet, and standard desktop sizes; their messages and actions remain centered, legible, and contained within the viewport. The responsive rules are centralized in `client/src/index.css` so shared containers, headers, form grids, card surfaces, and wide-screen spacing remain consistent across routes.


The final 1440×900 review of `/event/sample`, `/dashboard`, and `/order/1` showed no new overflow or spacing regressions. The event fallback remains centered with a contained retry action; dashboard metrics remain in a four-column row with the portfolio and quick-actions surfaces aligned; and order status remains a centered, readable card with its action buttons contained within the viewport.
## Dark-mode contrast verification — 2026-08-14

The development-only `?theme=dark` override was used to verify the discovery page, organizer dashboard, and attendee wallet at a 390×844 phone viewport. The first review exposed low-contrast dashboard metric values on dark cards; the dashboard now applies coordinated dark surfaces and light foreground tokens. The follow-up capture shows readable revenue, ticket counts, labels, navigation, ticket status, token, and QR content without visible mobile overflow. TypeScript and all 44 Vitest tests pass after the fix.

The dark-mode event-details fallback was also captured at 390×844 using `/event/sample?theme=dark`; the failure message and retry control remain readable, centered, and contained within the viewport.

## Explicit theme route evidence — light mode

At the 1280×720 viewport, explicit light-mode captures were reviewed for `/`, `/event/sample`, `/dashboard`, and `/tickets`. Discovery retained its editorial hero and empty-state card; the event fallback kept a readable retry action; dashboard metric cards and quick actions remained legible; and the attendee wallet displayed readable ticket metadata and QR content.

## Explicit theme route evidence — dark mode

At the 1280×720 viewport, explicit dark-mode captures were reviewed for `/`, `/event/sample`, `/dashboard`, and `/tickets`. Discovery preserved readable editorial typography and the empty-state card; event details retained a legible fallback and retry action; dashboard metrics, portfolio, and quick actions used readable dark surfaces and light foregrounds; and the attendee wallet retained readable ticket metadata with a high-contrast QR image.