From 576fe3ab15c3faa921eb68e42ebf5d007910a0a2 Mon Sep 17 00:00:00 2001
From: user <user@Mac.lan guest wan>
Date: Sat, 28 Feb 2026 15:37:27 -0800
Subject: [PATCH] fix: replace visibility:hidden with smooth collapse for
 zero-tx warning

Instead of permanently reserving space with visibility:hidden, the warning
container now uses max-height + opacity transitions. Space is reserved during
the async check, then smoothly collapses to 0 if the warning isn't needed.
This reclaims ~40px of popup viewport in the common case.
---
 src/popup/index.html         |  9 ++++++++-
 src/popup/views/confirmTx.js | 24 ++++++++++++++++--------
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/popup/index.html b/src/popup/index.html
index c77bd37..7083141 100644
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -580,7 +580,14 @@
                 <div
                     id="confirm-recipient-warning"
                     class="mb-2"
-                    style="visibility: hidden"
+                    style="
+                        overflow: hidden;
+                        transition:
+                            max-height 0.3s ease,
+                            opacity 0.3s ease;
+                        max-height: 60px;
+                        opacity: 0;
+                    "
                 >
                     <div
                         class="border border-red-500 border-dashed p-2 text-xs font-bold text-red-500"
diff --git a/src/popup/views/confirmTx.js b/src/popup/views/confirmTx.js
index f9b4f34..f51ac0c 100644
--- a/src/popup/views/confirmTx.js
+++ b/src/popup/views/confirmTx.js
@@ -243,10 +243,11 @@ function show(txInfo) {
     state.viewData = { pendingTx: txInfo };
     showView("confirm-tx");
 
-    // Reset recipient warning: reserve space (visibility:hidden) while
-    // the async check runs, preventing layout shift per README policy.
+    // Reset recipient warning: reserve space (max-height) while the async
+    // check runs, then collapse smoothly if not needed.
     const recipientWarning = $("confirm-recipient-warning");
-    recipientWarning.style.visibility = "hidden";
+    recipientWarning.style.maxHeight = "60px";
+    recipientWarning.style.opacity = "0";
 
     estimateGas(txInfo);
     checkRecipientHistory(txInfo);
@@ -301,18 +302,25 @@ async function checkRecipientHistory(txInfo) {
         // the nonce, i.e. sent-tx count only).
         const code = await provider.getCode(txInfo.to);
         if (code && code !== "0x") {
-            // Contract address — no warning needed, keep space reserved
-            // but invisible to prevent layout shift
+            // Contract address — no warning needed, collapse smoothly
+            el.style.maxHeight = "0";
+            el.style.opacity = "0";
             return;
         }
         const txCount = await provider.getTransactionCount(txInfo.to);
         if (txCount === 0) {
-            el.style.visibility = "visible";
+            // Show warning: fade in (space already reserved)
+            el.style.opacity = "1";
+        } else {
+            // Recipient has history — collapse the reserved space smoothly
+            el.style.maxHeight = "0";
+            el.style.opacity = "0";
         }
-        // If txCount > 0, leave visibility:hidden — space stays reserved
     } catch (e) {
         log.errorf("recipient history check failed:", e.message);
-        // On error, leave visibility:hidden — no layout shift, no false warning
+        // On error, collapse space — no false warning
+        el.style.maxHeight = "0";
+        el.style.opacity = "0";
     }
 }