From 045328f3b90b93ba5e579a2c967c8a282c44651d Mon Sep 17 00:00:00 2001
From: user <user@Mac.lan guest wan>
Date: Sat, 28 Feb 2026 15:46:58 -0800
Subject: [PATCH] fix: use visibility:hidden/visible instead of CSS transitions
 for zero-tx warning

Remove all CSS transitions, max-height changes, and opacity animations.
The warning container always reserves its space with visibility:hidden
and switches to visibility:visible when needed. No layout shift ever.
---
 src/popup/index.html         |  9 +--------
 src/popup/views/confirmTx.js | 20 +++-----------------
 2 files changed, 4 insertions(+), 25 deletions(-)

diff --git a/src/popup/index.html b/src/popup/index.html
index 7083141..c77bd37 100644
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -580,14 +580,7 @@
                 <div
                     id="confirm-recipient-warning"
                     class="mb-2"
-                    style="
-                        overflow: hidden;
-                        transition:
-                            max-height 0.3s ease,
-                            opacity 0.3s ease;
-                        max-height: 60px;
-                        opacity: 0;
-                    "
+                    style="visibility: hidden"
                 >
                     <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 f51ac0c..c71475b 100644
--- a/src/popup/views/confirmTx.js
+++ b/src/popup/views/confirmTx.js
@@ -243,11 +243,8 @@ function show(txInfo) {
     state.viewData = { pendingTx: txInfo };
     showView("confirm-tx");
 
-    // 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.maxHeight = "60px";
-    recipientWarning.style.opacity = "0";
+    // Reset recipient warning to hidden (space always reserved, no layout shift)
+    $("confirm-recipient-warning").style.visibility = "hidden";
 
     estimateGas(txInfo);
     checkRecipientHistory(txInfo);
@@ -302,25 +299,14 @@ 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, collapse smoothly
-            el.style.maxHeight = "0";
-            el.style.opacity = "0";
             return;
         }
         const txCount = await provider.getTransactionCount(txInfo.to);
         if (txCount === 0) {
-            // 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";
+            el.style.visibility = "visible";
         }
     } catch (e) {
         log.errorf("recipient history check failed:", e.message);
-        // On error, collapse space — no false warning
-        el.style.maxHeight = "0";
-        el.style.opacity = "0";
     }
 }