use yivi-web minimal mode, remove QR style overrides (#45)

Use the new minimal: true option from yivi-web which renders only
the QR code and animations without the form wrapper. This removes
~80 lines of CSS overrides that were fighting yivi-css styles.

Author: rubenhensen

src/lib/components/filesharing/YiviQRCode.svelte

@@ -58,29 +58,6 @@
 </div>
 
 <style>
-    /*
-     * Reset all Yivi plugin CSS, but preserve the styles of Yivi's animation elements.
-     * Animation elements (phone, checkmark, etc.) rely on their Yivi CSS rules for
-     * colour, size, and keyframe animations — stripping them would break the visuals.
-     */
-    .yivi-qr-container :global(*:not(
-        .yivi-web-waiting-for-user-animation,
-        .yivi-web-checkmark-animation,
-        .yivi-web-forbidden-animation,
-        .yivi-web-clock-animation
-    )) {
-        all: revert !important;
-        box-shadow: none !important;
-        margin: 0 !important;
-        padding: 0 !important;
-        border: none !important;
-        background: transparent !important;
-    }
-
-    .yivi-qr-container :global(.yivi-web-content) {
-        min-width: 0px !important;
-    }
-
     .yivi-qr-container {
         width: 250px;
         height: 250px;
@@ -95,7 +72,6 @@
     }
 
     .yivi-qr-container.responsive {
-        /* width: 100%; */
         height: auto;
         min-height: 200px;
     }
@@ -106,40 +82,6 @@
         height: auto !important;
     }
 
-    /*
-     * Hide everything except the QR canvas/svg and Yivi's post-scan animation states
-     * (waiting-for-user, success, cancelled, timeout/error).
-     * The :has() selectors ensure ancestor divs of visible content are also shown.
-     */
-    .yivi-qr-container :global(:not(
-        canvas, svg,
-        div:has(canvas), div:has(svg),
-        .yivi-web-waiting-for-user-animation,
-        .yivi-web-checkmark-animation,
-        .yivi-web-forbidden-animation,
-        .yivi-web-clock-animation,
-        div:has(.yivi-web-waiting-for-user-animation),
-        div:has(.yivi-web-checkmark-animation),
-        div:has(.yivi-web-forbidden-animation),
-        div:has(.yivi-web-clock-animation)
-    )) {
-        display: none !important;
-    }
-
-    .yivi-qr-container :global(div:has(> canvas)),
-    .yivi-qr-container :global(div:has(> svg)) {
-        display: flex !important;
-        justify-content: center;
-        align-items: center;
-    }
-
-    .yivi-qr-container :global(canvas),
-    .yivi-qr-container :global(svg) {
-        display: block !important;
-        image-rendering: pixelated !important;
-        image-rendering: crisp-edges !important;
-    }
-
     .spinner {
         animation: spin 1s linear infinite;
         color: var(--pg-text-secondary);

src/lib/global.scss

@@ -353,14 +353,7 @@ h3 {
     }
 }
 
-.yivi-web-content,
-.yivi-web-form {
-    min-width: 0 !important;
-}
 
-#crypt-irma-qr {
-    min-height: 0;
-}
 
 
 /* ── Utility classes (from shared-styles.css) ───────────────────────── */

src/lib/yivi-tools.ts

@@ -70,6 +70,7 @@ async function RetrieveSignKeys(pub: AttributeCon, priv?: AttributeCon): Promise
     // Always use YiviWeb: it handles QR rendering on desktop
     // and deep link generation on mobile.
     yiviConfig.element = '#crypt-irma-qr'
+    yiviConfig.minimal = true
 
     const yivi = new YiviCore(yiviConfig)