From 10c874374f0903f3bda5bd9ac28695d2791eae11 Mon Sep 17 00:00:00 2001
From: "Aaron D. Lee" <aaron.daniel.lee@mgial.com>
Date: Wed, 7 Jan 2026 23:05:07 -0500
Subject: [PATCH] Fix QR key loader: remove conflicting CSS, proper centering
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove duplicate qr-crop-container styles from encode/decode templates
- Use only qr-scan-container from style.css (flex centering + object-fit)
- Fix rsaQrSection to use align-items: center for horizontal centering
- Darken channel key fingerprint in header (#f0c674 → #c9a860)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontends/web/static/style.css      |  3 +-
 frontends/web/templates/base.html   |  2 +-
 frontends/web/templates/decode.html | 43 ++---------------------------
 frontends/web/templates/encode.html | 43 ++---------------------------
 4 files changed, 7 insertions(+), 84 deletions(-)

diff --git a/frontends/web/static/style.css b/frontends/web/static/style.css
index 0ca5388..f2cc838 100644
--- a/frontends/web/static/style.css
+++ b/frontends/web/static/style.css
@@ -1253,7 +1253,8 @@ footer {
    ---------------------------------------------------------------------------- */
 #rsaQrSection {
     display: flex;
-    justify-content: center;
+    flex-direction: column;
+    align-items: center;
 }
 
 #rsaQrSection .drop-zone {
diff --git a/frontends/web/templates/base.html b/frontends/web/templates/base.html
index c93506a..5f4c43c 100644
--- a/frontends/web/templates/base.html
+++ b/frontends/web/templates/base.html
@@ -17,7 +17,7 @@
             </a>
             {% if channel_configured %}
             <span class="badge bg-success bg-opacity-25 small" style="padding-left: 0.35rem;" title="Private Channel Key Fingerprint: Messages encoded on this server use this shared channel key for additional encryption. Recipients must have the same channel key to decode.">
-                <i class="bi bi-shield-lock me-2" style="color: #6ee7b7;"></i><code style="font-size: 0.7rem; font-weight: 300; color: #f0c674;">{{ channel_fingerprint }}</code>
+                <i class="bi bi-shield-lock me-2" style="color: #6ee7b7;"></i><code style="font-size: 0.7rem; font-weight: 300; color: #c9a860;">{{ channel_fingerprint }}</code>
             </span>
             {% else %}
             <span class="badge bg-secondary bg-opacity-25 small text-muted" style="padding-left: 0.35rem;" title="Public Channel: No shared channel key configured. Messages use only passphrase and PIN for encryption.">
diff --git a/frontends/web/templates/decode.html b/frontends/web/templates/decode.html
index f150abc..15dc998 100644
--- a/frontends/web/templates/decode.html
+++ b/frontends/web/templates/decode.html
@@ -111,46 +111,7 @@
     box-shadow: 0 0 20px rgba(246, 173, 85, 0.4) !important;
 }
 
-/* QR Crop Animation */
-.qr-crop-container {
-    position: relative;
-    overflow: hidden;
-    border-radius: 8px;
-    background: rgba(0, 0, 0, 0.3);
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 120px;
-}
-.qr-crop-container img {
-    display: block;
-    max-height: 180px;
-    max-width: 180px;
-    width: auto;
-    margin: 0 auto;
-    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.qr-crop-container .qr-original { opacity: 1; }
-.qr-crop-container .qr-cropped {
-    position: absolute;
-    top: 50%; left: 50%;
-    transform: translate(-50%, -50%) scale(0.3);
-    opacity: 0;
-    max-height: 160px;
-    min-width: 140px;
-    min-height: 140px;
-    object-fit: contain;
-}
-.qr-crop-container.scan-complete .qr-original {
-    opacity: 0;
-    transform: scale(1.1);
-    filter: blur(4px);
-}
-.qr-crop-container.scan-complete .qr-cropped {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-}
+/* QR Crop Animation - uses .qr-scan-container from style.css */
 </style>
 
 <div class="row justify-content-center">
@@ -395,7 +356,7 @@
                                                         <i class="bi bi-qr-code-scan fs-5 d-block text-muted mb-1"></i>
                                                         <span class="text-muted small">Drop QR image</span>
                                                     </div>
-                                                    <div class="qr-scan-container qr-crop-container d-none" id="qrCropContainer">
+                                                    <div class="qr-scan-container d-none" id="qrCropContainer">
                                                         <img class="qr-original" id="qrOriginal" alt="Original">
                                                         <img class="qr-cropped" id="qrCropped" alt="Cropped">
                                                     </div>
diff --git a/frontends/web/templates/encode.html b/frontends/web/templates/encode.html
index 1c08603..07f9196 100644
--- a/frontends/web/templates/encode.html
+++ b/frontends/web/templates/encode.html
@@ -111,46 +111,7 @@
     box-shadow: 0 0 20px rgba(246, 173, 85, 0.4) !important;
 }
 
-/* QR Crop Animation */
-.qr-crop-container {
-    position: relative;
-    overflow: hidden;
-    border-radius: 8px;
-    background: rgba(0, 0, 0, 0.3);
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 120px;
-}
-.qr-crop-container img {
-    display: block;
-    max-height: 180px;
-    max-width: 180px;
-    width: auto;
-    margin: 0 auto;
-    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.qr-crop-container .qr-original { opacity: 1; }
-.qr-crop-container .qr-cropped {
-    position: absolute;
-    top: 50%; left: 50%;
-    transform: translate(-50%, -50%) scale(0.3);
-    opacity: 0;
-    max-height: 160px;
-    min-width: 140px;
-    min-height: 140px;
-    object-fit: contain;
-}
-.qr-crop-container.scan-complete .qr-original {
-    opacity: 0;
-    transform: scale(1.1);
-    filter: blur(4px);
-}
-.qr-crop-container.scan-complete .qr-cropped {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-}
+/* QR Crop Animation - uses .qr-scan-container from style.css */
 </style>
 
 <div class="row justify-content-center">
@@ -431,7 +392,7 @@
                                                         <i class="bi bi-qr-code-scan fs-5 d-block text-muted mb-1"></i>
                                                         <span class="text-muted small">Drop QR image</span>
                                                     </div>
-                                                    <div class="qr-scan-container qr-crop-container d-none" id="qrCropContainer">
+                                                    <div class="qr-scan-container d-none" id="qrCropContainer">
                                                         <img class="qr-original" id="qrOriginal" alt="Original">
                                                         <img class="qr-cropped" id="qrCropped" alt="Cropped">
                                                     </div>