From 41222e1960739532af2b1bc9155ad3f4008fb13c Mon Sep 17 00:00:00 2001
From: you <you@example.com>
Date: Mon, 23 Mar 2026 16:31:18 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20QR=20overlay=20actually=20transparent=20?=
 =?UTF-8?q?=E2=80=94=20JS=20strips=20white=20fills,=2070%=20opacity?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CSS fill-opacity selectors weren't matching the QR library's output.
Now JS directly sets white rects to transparent after SVG generation.
Overlay at 70% opacity so it doesn't fight the map for attention.
Removed 'Scan with MeshCore app' label from overlay version.
---
 public/nodes.js  | 16 ++++++++++++++--
 public/style.css |  4 +---
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/public/nodes.js b/public/nodes.js
index d820c9a..444867f 100644
--- a/public/nodes.js
+++ b/public/nodes.js
@@ -593,9 +593,21 @@
         const qr = qrcode(0, 'M');
         qr.addData(meshcoreUrl);
         qr.make();
-        qrEl.innerHTML = `<div style="font-size:11px;color:var(--text-muted);margin-bottom:4px">Scan with MeshCore app to add contact</div>` + qr.createSvgTag(3, 0);
+        const isOverlay = !!qrEl.closest('.node-map-qr-overlay');
+        qrEl.innerHTML = (isOverlay ? '' : `<div style="font-size:11px;color:var(--text-muted);margin-bottom:4px">Scan with MeshCore app to add contact</div>`) + qr.createSvgTag(3, 0);
         const svg = qrEl.querySelector('svg');
-        if (svg) { svg.style.display = 'block'; svg.style.margin = '0 auto'; }
+        if (svg) {
+          svg.style.display = 'block'; svg.style.margin = '0 auto';
+          // Make QR background transparent for map overlay
+          if (isOverlay) {
+            svg.querySelectorAll('rect').forEach(r => {
+              const fill = (r.getAttribute('fill') || '').toLowerCase();
+              if (fill === '#ffffff' || fill === 'white' || fill === '#fff') {
+                r.setAttribute('fill', 'transparent');
+              }
+            });
+          }
+        }
       } catch {}
     }
 
diff --git a/public/style.css b/public/style.css
index f941c0d..29de33a 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1118,9 +1118,7 @@ button.ch-item.ch-item-encrypted .ch-badge { filter: grayscale(0.6); }
 [data-theme="dark"] .node-qr svg rect[fill="#000000"] { fill: var(--text); }
 .node-map-qr-wrap { position: relative; }
 .node-map-qr-overlay { position: absolute; bottom: 8px; right: 8px; z-index: 400; background: none; border: none; padding: 0; }
-.node-map-qr-overlay svg { max-width: 64px; display: block; }
-.node-map-qr-overlay svg rect[fill="#ffffff"] { fill-opacity: 0.1; }
-[data-theme="dark"] .node-map-qr-overlay svg rect[fill="#ffffff"] { fill-opacity: 0.1; }
+.node-map-qr-overlay svg { max-width: 64px; display: block; opacity: 0.7; }
 [data-theme="dark"] .node-map-qr-overlay svg rect[fill="#000000"] { fill: var(--text); }
 
 /* Replay on Live Map button in packet detail */