The QRCodeCanvas component was not automatically re-rendering when users zoomed the browser page, causing QR codes to appear blurry at different zoom levels. This happened because the component only read window.devicePixelRatio once during initial render and didn't detect subsequent changes.

Changes Made

• Added devicePixelRatio state tracking: QRCodeCanvas now maintains window.devicePixelRatio in component state with SSR-safe initialization
• Added resize event listener: Detects when devicePixelRatio changes (which occurs during browser zoom) and updates the state
• Updated canvas rendering: The canvas drawing effect now uses the state value and includes devicePixelRatio in its dependencies, ensuring automatic re-rendering when zoom changes
• Added comprehensive test: Verifies that the component properly handles devicePixelRatio changes and resize events

How It Works

1. QRCodeCanvas tracks window.devicePixelRatio in component state
2. A resize event listener detects devicePixelRatio changes during zoom
3. State updates trigger canvas re-rendering with correct pixel density
4. QR codes remain sharp at any zoom level

Testing

The implementation has been thoroughly tested:

• All existing tests continue to pass
• New test verifies devicePixelRatio detection and event handling
• Manual testing confirms QR codes stay crisp when zooming
• Canvas correctly scales (e.g., 256px actual size for 128px visual size at 2x pixel ratio)

Screenshots

Before/after zoom testing shows QR codes maintain sharp quality:

Before zoom simulation:

After zoom simulation (2x devicePixelRatio):

The canvas properly scales from 128×128 to 256×256 pixels while maintaining 128px visual size when devicePixelRatio changes from 1 to 2, ensuring crisp rendering.

Fixes #372.

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.