Fix kiosk signature pad: host locally, fix canvas resize timing

- Download signature_pad 4.1.7 to wwwroot/lib/signature-pad/ to eliminate
  CDN SRI hash failures and network dependencies on the tablet
- Wrap resizeCanvas in requestAnimationFrame so offsetWidth is non-zero
  when measured (browser layout pass must complete first)
- Add guard for SignaturePad not defined (shows user-visible error instead
  of silent JS crash)
- Add scrollIntoView on signature validation error for better tablet UX

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/PowderCoating.Web/wwwroot/js/kiosk-terms.js

@@ -3,46 +3,59 @@
 (function () {
     // ── Signature pad (InPerson sessions only) ─────────────────────────────────
     const canvas = document.getElementById("signatureCanvas");
-    if (canvas) {
-        const pad = new SignaturePad(canvas, { penColor: "#1e293b" });
+    if (!canvas) return;
 
-        // Scale canvas to device pixel ratio for crisp rendering on high-DPI tablets
-        function resizeCanvas() {
-            const ratio = Math.max(window.devicePixelRatio || 1, 1);
-            canvas.width  = canvas.offsetWidth  * ratio;
-            canvas.height = canvas.offsetHeight * ratio;
-            canvas.getContext("2d").scale(ratio, ratio);
-            pad.clear();
-        }
-        resizeCanvas();
-        window.addEventListener("resize", resizeCanvas);
+    if (typeof SignaturePad === "undefined") {
+        console.error("signature_pad failed to load — signature capture unavailable");
+        canvas.parentElement.insertAdjacentHTML("beforeend",
+            '<p class="text-danger small mt-1">Signature pad failed to load. Please refresh the page.</p>');
+        return;
+    }
 
-        // Show visual feedback when the canvas has been signed
-        pad.addEventListener("endStroke", function () {
-            canvas.classList.add("signed");
-        });
+    const pad = new SignaturePad(canvas, { penColor: "#1e293b" });
 
-        document.getElementById("clearSignatureBtn")?.addEventListener("click", function () {
-            pad.clear();
-            canvas.classList.remove("signed");
-        });
+    // Scale canvas to device pixel ratio — must run after layout so offsetWidth is non-zero.
+    // requestAnimationFrame ensures the browser has finished its first layout pass.
+    function resizeCanvas() {
+        const ratio = Math.max(window.devicePixelRatio || 1, 1);
+        const w = canvas.offsetWidth;
+        const h = canvas.offsetHeight;
+        if (w === 0 || h === 0) return;   // layout not ready yet; resize event will retry
+        canvas.width  = w * ratio;
+        canvas.height = h * ratio;
+        canvas.getContext("2d").scale(ratio, ratio);
+        pad.clear();
+    }
 
-        // On submit: write base64 PNG to the hidden input
-        const form = document.getElementById("termsForm");
-        if (form) {
-            form.addEventListener("submit", function (e) {
-                const hiddenInput = document.getElementById("SignatureDataBase64");
-                if (hiddenInput) {
-                    if (pad.isEmpty()) {
-                        e.preventDefault();
-                        const msg = document.getElementById("signatureError");
-                        if (msg) msg.classList.remove("d-none");
-                        canvas.classList.add("is-invalid");
-                        return;
-                    }
-                    hiddenInput.value = pad.toDataURL("image/png");
+    requestAnimationFrame(resizeCanvas);
+    window.addEventListener("resize", resizeCanvas);
+
+    // Visual feedback when the canvas has been signed
+    pad.addEventListener("endStroke", function () {
+        canvas.classList.add("signed");
+    });
+
+    document.getElementById("clearSignatureBtn")?.addEventListener("click", function () {
+        pad.clear();
+        canvas.classList.remove("signed");
+    });
+
+    // On submit: write base64 PNG to the hidden input
+    const form = document.getElementById("termsForm");
+    if (form) {
+        form.addEventListener("submit", function (e) {
+            const hiddenInput = document.getElementById("SignatureDataBase64");
+            if (hiddenInput) {
+                if (pad.isEmpty()) {
+                    e.preventDefault();
+                    const msg = document.getElementById("signatureError");
+                    if (msg) msg.classList.remove("d-none");
+                    canvas.classList.add("is-invalid");
+                    canvas.scrollIntoView({ behavior: "smooth", block: "center" });
+                    return;
                 }
-            });
-        }
+                hiddenInput.value = pad.toDataURL("image/png");
+            }
+        });
     }
 })();