fix(qr): tighten container padding and force white background (#156)

* fix(qr): tighten container padding and force white background

Drop .yivi-qr-container padding from 10px to 4px and switch the
background from var(--pg-general-background) to white so the QR
keeps a high-contrast quiet zone in both light and dark mode.

* fix(qr): bump QR container to 320x320 in the popup

Match $qr-code-size from yivi-css so the QR renders at its full
intended size inside the desktop popup card.

* fix(qr): size container so QR pattern is exactly 320x320

Bump .yivi-qr-container from 320 to 330 (320 + 4 px padding +
1 px border on each side, with box-sizing: border-box) so the
QR SVG inside renders at the canonical $qr-code-size from yivi-css.

Also bumps @privacybydesign/yivi-css to ^1.0.0-beta.7, which carries
the canvas → SVG QR migration and the .yivi-web-centered fill rule.

Author: rubenhensen

package-lock.json

@@ -72,7 +72,7 @@
         "@deltablot/dropzone": "^7.4.3",
         "@e4a/pg-js": "^1.6.0",
         "@iconify/svelte": "^5.2.1",
-        "@privacybydesign/yivi-css": "^1.0.0-beta.6",
+        "@privacybydesign/yivi-css": "^1.0.0-beta.7",
         "country-flag-icons": "^1.6.17",
         "libphonenumber-js": "^1.12.42",
         "postal-mime": "^2.7.4",

package.json

@@ -75,16 +75,16 @@
 
 <style>
     .yivi-qr-container {
-        width: 250px;
-        height: 250px;
+        width: 330px;
+        height: 330px;
         display: flex;
         justify-content: center;
         align-items: center;
         overflow: hidden;
-        background: var(--pg-general-background);
+        background: white;
         border: 1px solid var(--pg-strong-background);
         border-radius: var(--pg-border-radius-sm);
-        padding: 10px;
+        padding: 4px;
     }
 
     .yivi-qr-container.responsive {