From 6927baf51f6d5427d9de951d228e6a08bf431d34 Mon Sep 17 00:00:00 2001
From: c4ch3c4d3 <bryce@zuccaro.me>
Date: Wed, 19 Aug 2026 07:34:09 -0500
Subject: [PATCH] fix: encryption ring renders as a true circle, not a squashed
 ellipse

The enc canvas was drawn at 233x120 internally but .recon-chart-box canvas
forced width:100%/height:100% onto a ~233x115 box, scaling the bitmap and
flattening the ring. #recon-encryption is now a static 112px square with the
doughnut drawn at height 112, so internal and CSS pixels match (1:1) and the
circle stays circular. Verified on device: box and bitmap both 112x112,
card fits without overflow, legend intact, no JS exceptions.
---
 payload/user/remote_access/pager-webui/www/css/app.css | 1 +
 payload/user/remote_access/pager-webui/www/js/views.js | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/payload/user/remote_access/pager-webui/www/css/app.css b/payload/user/remote_access/pager-webui/www/css/app.css
index 476f712..50acfb8 100644
--- a/payload/user/remote_access/pager-webui/www/css/app.css
+++ b/payload/user/remote_access/pager-webui/www/css/app.css
@@ -325,6 +325,7 @@ html.dark .muted { color: #bdbdbd; }
 }
 .recon-chart-box { position: relative; flex: 1; min-height: 0; margin-top: auto; }
 .recon-chart-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
+#recon-encryption { position: static; display: block; width: 112px; height: 112px; margin: 0 auto; }
 .recon-no-data { font-style: italic; color: #787878; display: flex; justify-content: center; align-items: center; padding: 8px; text-align: center; }
 .recon-enc-legend { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 4px; align-items: baseline; }
 .recon-enc-entry { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text); }
diff --git a/payload/user/remote_access/pager-webui/www/js/views.js b/payload/user/remote_access/pager-webui/www/js/views.js
index 692e740..673f216 100644
--- a/payload/user/remote_access/pager-webui/www/js/views.js
+++ b/payload/user/remote_access/pager-webui/www/js/views.js
@@ -2310,7 +2310,7 @@ views.recon = (root) => {
     if (enc && typeof MiniChart !== 'undefined' && MiniChart.doughnut) {
       try {
         if (aps.length) {
-          MiniChart.doughnut(enc, encSegs, { legend: false, height: 120 });
+          MiniChart.doughnut(enc, encSegs, { legend: false, height: 112 });
           enc.classList.remove('hidden');
           encEmpty.classList.add('hidden');
         } else {