fix: match approval view display consistency for decoded calldata

- Restructured calldata section to use same well layout as approval view:
  Action label + bold name + structured details
- Always show raw data section below decoded well
- Unknown contract calls show method name in well instead of inline

src/popup/views/transactionDetail.js

@@ -164,28 +164,14 @@ function render() {
         });
 }
 
-function renderDecodedCalldata(decoded) {
-    let html = `<div class="font-bold mb-1">${escapeHtml(decoded.name)}</div>`;
-    if (decoded.description) {
-        html += `<div class="text-muted mb-1">${escapeHtml(decoded.description)}</div>`;
-    }
-    for (const detail of decoded.details || []) {
-        html += `<div class="mb-1"><span class="text-muted">${escapeHtml(detail.label)}:</span> `;
-        if (detail.address) {
-            const dot = addressDotHtml(detail.address);
-            html += `${dot}${copyableHtml(detail.value, "break-all")}`;
-        } else {
-            html += escapeHtml(detail.value);
-        }
-        html += `</div>`;
-    }
-    return html;
-}
-
 async function loadCalldata(txHash, toAddress) {
     const section = $("tx-detail-calldata-section");
-    const container = $("tx-detail-calldata");
-    if (!section || !container) return;
+    const actionEl = $("tx-detail-calldata-action");
+    const detailsEl = $("tx-detail-calldata-details");
+    const wellEl = $("tx-detail-calldata-well");
+    const rawSection = $("tx-detail-rawdata-section");
+    const rawEl = $("tx-detail-rawdata");
+    if (!section || !actionEl || !detailsEl) return;
 
     try {
         const resp = await debugFetch(
@@ -198,14 +184,39 @@ async function loadCalldata(txHash, toAddress) {
 
         const decoded = decodeCalldata(inputData, toAddress || "");
         if (decoded) {
-            container.innerHTML = renderDecodedCalldata(decoded);
+            // Render decoded calldata matching approval view style
+            actionEl.textContent = decoded.name;
+            let detailsHtml = "";
+            if (decoded.description) {
+                detailsHtml += `<div class="mb-2">${escapeHtml(decoded.description)}</div>`;
+            }
+            for (const d of decoded.details || []) {
+                detailsHtml += `<div class="mb-2">`;
+                detailsHtml += `<div class="text-muted">${escapeHtml(d.label)}</div>`;
+                if (d.address) {
+                    const dot = addressDotHtml(d.address);
+                    detailsHtml += `<div>${dot}${copyableHtml(d.value, "break-all")}</div>`;
+                } else {
+                    detailsHtml += `<div class="font-bold">${escapeHtml(d.value)}</div>`;
+                }
+                detailsHtml += `</div>`;
+            }
+            detailsEl.innerHTML = detailsHtml;
+            if (wellEl) wellEl.classList.remove("hidden");
         } else {
-            const method = txData.method || "Unknown method";
-            let html = `<div class="font-bold mb-1">Unknown contract call</div>`;
-            html += `<div class="text-muted mb-1">${escapeHtml(method)}</div>`;
-            html += `<div class="break-all font-mono text-xs">${copyableHtml(inputData, "break-all")}</div>`;
-            container.innerHTML = html;
+            // Unknown contract call — show method name in well
+            const method = txData.method || "Unknown contract call";
+            actionEl.textContent = method;
+            detailsEl.innerHTML = "";
+            if (wellEl) wellEl.classList.remove("hidden");
         }
+
+        // Always show raw data
+        if (rawSection && rawEl) {
+            rawEl.innerHTML = copyableHtml(inputData, "break-all");
+            rawSection.classList.remove("hidden");
+        }
+
         section.classList.remove("hidden");
 
         // Bind copy handlers for new elements