Invalid-card presentation

Local HotelPlus Settings, captured at application commit f9e67c89a2471626c99e88f22734b8e05d790b5a. The application commit is 4999ce0ff62e89c2c4570a8638eac1ca94c82334. The commits after the captures change report precedence and request scope only. They do not change this layout. Branch cursor/invalid-card-presentation (pull request 78). Before images are the merged application e0b86e17c2dc277a1d807bc59dceb5deee6787e6. Playwright viewport screenshots in Chrome, device pixel ratio 1, one viewport, not stitched. Each bitmap is the same size as its CSS viewport. Intercepted fixtures only. The signed-in person is Fixture User. Provider responses are simulated and are named in the captions. No shared candidate or preview data was seeded. No channel credentials and no session token. Håvar’s visual acceptance is still open. This page is not a WCAG certification. Headless Chrome left visualViewport.scale at 1 after Control and Equal, so 200% and 400% browser zoom were not captured. The 720 and 360 images are CSS viewports of those widths, not browser zoom.

ZIP of these images · PR 67 gallery

Before

Merged invalid-card list at 1440 — Before. Merge commit e0b86e17. CSS viewport 1440×900, bitmap 1440×900. Guest names and actions read as a bullet list under a long explanation. image

Merged invalid-card list at 390 — Before. CSS viewport 390×844, bitmap 390×844. image

After, in the application shell

Corrected invalid-card panel at 1440 — After. CSS viewport 1440×900, bitmap 1440×900. Simulated list: Amina Wekesa accepted, Baraka Otieno with no report. image

Corrected invalid-card panel at 390 — After. CSS viewport 390×844, bitmap 390×844. Rows stack. image

Corrected invalid-card panel at 768 — After. CSS viewport 768×1024, bitmap 768×1024. Columns remain aligned. image

Corrected invalid-card panel at 320 — After. CSS viewport 320×700, bitmap 320×700. No horizontal overflow. image

Confirmation

Report invalid card dialog at 1440 — Shared dialog. Amina Wekesa, KC-1003, Booking.com. Blue Save and neutral Cancel. CSS viewport 1440×900, bitmap 1440×900. image

Report invalid card dialog at 390 — Shared dialog on a phone. CSS viewport 390×844, bitmap 390×844. image

Dialog with reduced motion — Same dialog with prefers-reduced-motion. The media query matched. CSS viewport 1440×900, bitmap 1440×900. image

List and report states

Failed invalid-card list — Failed initial read. Simulated HTTP 503. Copy: Bookings could not be loaded. Retry is offered. This is not the empty-success screen. CSS viewport 1440×900, bitmap 1440×900. image

Empty invalid-card list — Successful empty list. Copy: No eligible Booking.com bookings to show. CSS viewport 1440×900, bitmap 1440×900. image

Uncertain invalid-card recovery — Simulated provider response UNCERTAIN. Label: Provider response unconfirmed. The explanation says the check reads the report saved in HotelPlus. CSS viewport 1440×900, bitmap 1440×900. image

Accepted booking beside an unresolved save — Simulated ACCEPTED for Amina beside a lost save for Baraka. Baraka shows Save not confirmed and Check report status. Amina is not offered another report. CSS viewport 1440×900, bitmap 1440×900. image

Recovered report kept after the list omits it — Simulated ACCEPTED save, then the next list omits the booking. Amina Wekesa and KC-1003 remain on the row. CSS viewport 1440×900, bitmap 1440×900. image

Keyboard and narrow reflow

Keyboard focus on Amina's report action — Keyboard focus. The active control’s accessible name was “Report invalid card for Amina Wekesa, KC-1003”. CSS viewport 1440×900, bitmap 1440×900. image

Invalid-card panel at a 720 CSS viewport — CSS viewport 720×900, bitmap 720×900. Not browser zoom. Rows stack. No horizontal overflow. image

Invalid-card panel at a 360 CSS viewport — CSS viewport 360×800, bitmap 360×800. Not browser zoom. No horizontal overflow. image