[chase-manning]

Summary

Adds a Download button to the quiz results page that exports the user's top-10 dog matches as a one-page, print-ready PDF.

Changes

• New: src/pages/quiz/PrintableResults.tsx — dedicated A4-portrait printable layout (branded header, personalized title, top-10 table with rank medals, photos, match %, and key traits). Solo & couple modes both supported, with per-partner score breakdowns rendered under each row in couple mode.
• New: src/pages/quiz/ExportResultsButton.tsx — outlined button (with download icon) that triggers PDF generation. Renders the printable layout off-screen, waits for images to load, then rasterizes via html2canvas and wraps the result in a single-page A4 PDF via jsPDF (scaled to fit so it never spills to a second page). Includes loading state ("Preparing...") and success/error toasts. Filename uses the top breed, e.g. dogmatch-golden-retriever.pdf.
• Updated: src/pages/quiz/Results.tsx — "Your perfect match is..." header and the new Download button share a flex row, stacking vertically on mobile.
• Deps: added jspdf and html2canvas (dynamically imported so they land in code-split chunks — main bundle only grows by ~4 kB; the PDF libs are fetched on first click).

UX notes

• Button placed at the top of the results section (in line with the main header) so it's discoverable right away, without competing with the winner reveal.
• Single-page output — scales to fit A4 regardless of content height, centered on the page.
• Dedicated print layout (not a screenshot of the on-screen cards) so the PDF is clean, on-brand, and free of animations / reveal mechanics.
• Graceful failure: if generation errors, the button resets and an error toast is shown.

Test plan

• Run the quiz in solo mode → finish → click Download → PDF downloads with correct breed names, photos, match %, and traits
• Run the quiz in couple mode with two names → click Download → PDF title uses both names and each row shows per-partner percentages
• Confirm the PDF is exactly one page (A4 portrait), centered, with the branded header and footer
• Verify filename is dogmatch-<top-breed>.pdf
• Trigger an error (e.g. offline) → error toast appears and button re-enables
• Desktop: header + button share a row; mobile: header centered above button
• Check bundle: PDF libs should be in a lazy chunk, not the main bundle

[github-actions]

Visit the preview URL for this PR (updated for commit 6723d5b):

https://dogmatch-33--pr4-export-results-son2hfn2.web.app

_{(expires Thu, 23 Apr 2026 20:57:35 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 3be598a5fc061b587f1c015bd81cd7e7b2c794a8}

[Copilot]

Pull request overview

Adds a “Download” button on the quiz results page to export the user’s top-10 matches as a single-page, print-ready A4 PDF, using an off-screen printable layout and client-side rasterization/PDF generation.

Changes:

• Introduces a dedicated printable results layout (PrintableResults) for consistent PDF formatting.
• Adds an export button (ExportResultsButton) that renders the printable view off-screen, captures it with html2canvas, and saves via jsPDF.
• Updates the results header layout to place the new Download button alongside the main results header (responsive stacking on mobile).

Reviewed changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/pages/quiz/Results.tsx	Adds a flex header row and mounts the new export button with required props.
src/pages/quiz/ExportResultsButton.tsx	Implements PDF generation flow (off-screen render → image wait → html2canvas → jsPDF save) plus toast UX.
src/pages/quiz/PrintableResults.tsx	Defines the printable A4-ish layout used for export (branding, title, top-10 table).
package.json	Adds html2canvas and jspdf dependencies.
yarn.lock	Locks new transitive dependencies required by jspdf/html2canvas.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.