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"

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";
     }
 }