From aab3e57e9fa490826aa7d86909b0ecafd36f5a43 Mon Sep 17 00:00:00 2001
From: you <you@example.com>
Date: Mon, 23 Mar 2026 16:27:49 +0000
Subject: [PATCH] fix: QR code smaller, side pane reorganized
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- QR globally reduced (140px → 100px, overlay 64px)
- Side pane: name/badges first, then map with QR overlaid in bottom-right corner
- Removed standalone QR section from side pane — saves vertical space
- Public key shown inline below map instead of separate section
- No-location nodes still get standalone centered QR
- Full detail page QR wrap narrower (max 160px)
---
 public/nodes.js  | 10 ++++++----
 public/style.css |  7 +++++--
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/public/nodes.js b/public/nodes.js
index bedcf7a4..d820c9ae 100644
--- a/public/nodes.js
+++ b/public/nodes.js
@@ -502,17 +502,19 @@
 
     panel.innerHTML = `
       <div class="node-detail">
-        ${hasLoc ? `<div class="node-map-container node-detail-map" id="nodeMap" style="border-radius:8px;overflow:hidden;"></div>` : ''}
         <div class="node-detail-name">${escapeHtml(n.name || '(unnamed)')}</div>
         <div class="node-detail-role"><span class="badge" style="background:${roleColor}20;color:${roleColor}">${n.role}</span> ${n.hash_size ? `<span class="badge" style="background:var(--nav-bg);color:var(--nav-text);font-family:var(--mono)">${n.public_key.slice(0, n.hash_size * 2).toUpperCase()}</span>` : ''} ${statusLabel}
           <a href="#/nodes/${encodeURIComponent(n.public_key)}" class="btn-primary" style="display:inline-block;text-decoration:none;font-size:11px;padding:2px 8px;margin-left:8px">🔍 Details</a>
           <a href="#/nodes/${encodeURIComponent(n.public_key)}/analytics" class="btn-primary" style="display:inline-block;margin-left:4px;text-decoration:none;font-size:11px;padding:2px 8px">📊 Analytics</a>
         </div>
 
+        ${hasLoc ? `<div class="node-map-qr-wrap">
+          <div class="node-map-container node-detail-map" id="nodeMap" style="border-radius:8px;overflow:hidden;"></div>
+          <div class="node-map-qr-overlay node-qr" id="nodeQrCode"></div>
+        </div>` : `<div class="node-qr" id="nodeQrCode" style="margin:8px 0"></div>`}
+
         <div class="node-detail-section">
-          <h4>Public Key</h4>
-          <div class="node-detail-key mono">${n.public_key}</div>
-          <div class="node-qr" id="nodeQrCode"></div>
+          <div class="node-detail-key mono" style="font-size:11px;word-break:break-all;margin-bottom:4px">${n.public_key}</div>
         </div>
 
         <div class="node-detail-section">
diff --git a/public/style.css b/public/style.css
index 902c71de..126eb68f 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1113,9 +1113,12 @@ button.ch-item.ch-item-encrypted .ch-badge { filter: grayscale(0.6); }
 }
 .observer-selector { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }
 .node-qr { text-align: center; margin-top: 8px; }
-.node-qr svg { max-width: 140px; border-radius: 4px; }
+.node-qr svg { max-width: 100px; border-radius: 4px; }
 [data-theme="dark"] .node-qr svg rect[fill="#ffffff"] { fill: var(--card-bg); }
 [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: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; padding: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
+.node-map-qr-overlay svg { max-width: 64px; display: block; }
 
 /* Replay on Live Map button in packet detail */
 .detail-actions {
@@ -1389,7 +1392,7 @@ tr[data-hops]:hover { background: rgba(59,130,246,0.1); }
 .node-top-row { display: flex; gap: 16px; margin-bottom: 12px; }
 .node-top-row .node-map-wrap { flex: 3; min-height: 200px; border-radius: 8px; overflow: hidden; }
 .node-top-row .node-map-wrap .node-detail-map { height: 100%; }
-.node-top-row .node-qr-wrap { flex: 1; min-width: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 16px; }
+.node-top-row .node-qr-wrap { flex: 1; min-width: 120px; max-width: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
 .node-qr-wrap--full { max-width: 240px; margin: 0 auto; }
 .node-stats-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
 .node-stats-table td { padding: 6px 12px; border-bottom: 1px solid var(--border); }