From 4096c3739e3e04d435eee403f0b7c0b15541e10a Mon Sep 17 00:00:00 2001
From: justin <justin@liquidator.optimal-reality.com>
Date: Mon, 27 Apr 2026 08:15:32 -0500
Subject: [PATCH] Improve business name search results UI

Results now show as proper clickable cards with:
- Entity name (bold), DBA (if different from legal name)
- FRN (monospace) and Filer ID on the right
- Clear "click to check compliance" hint
- Bordered list with dividers and hover state
- Hides results after selection

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../pages/tools/fcc-compliance-check.astro    | 29 +++++++++++--------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/site/src/pages/tools/fcc-compliance-check.astro b/site/src/pages/tools/fcc-compliance-check.astro
index 6286dc3..93463d6 100644
--- a/site/src/pages/tools/fcc-compliance-check.astro
+++ b/site/src/pages/tools/fcc-compliance-check.astro
@@ -222,20 +222,24 @@ import Base from "../../layouts/Base.astro";
           return;
         }
 
-        let html = `<p class="text-xs text-gray-400 mb-2">${items.length} result${items.length !== 1 ? "s" : ""}</p>`;
-        html += '<div class="space-y-1 max-h-60 overflow-y-auto">';
+        let html = `<p class="text-xs text-gray-400 mb-2">${items.length} result${items.length !== 1 ? "s" : ""} — click to check compliance</p>`;
+        html += '<div class="space-y-2 max-h-72 overflow-y-auto border border-gray-200 rounded-lg divide-y divide-gray-100">';
         for (const item of items) {
-          const label = [
-            item.legal_name || "",
-            item.dba ? `DBA: ${item.dba}` : "",
-            item.frn ? `FRN: ${item.frn}` : "",
-            item.filer_id ? `Filer ID: ${item.filer_id}` : "",
-          ].filter(Boolean).join(" — ");
-
+          const dba = (item.dba && item.dba !== "None" && item.dba !== item.legal_name) ? item.dba : "";
           html += `<button
             data-frn="${item.frn || ""}"
-            class="name-result-btn block w-full text-left px-3 py-2 rounded-lg text-sm hover:bg-pw-50 border border-transparent hover:border-pw-200 transition"
-          >${label}</button>`;
+            class="name-result-btn w-full text-left px-4 py-3 flex items-center justify-between gap-3 hover:bg-pw-50 transition cursor-pointer"
+            style="display:flex;"
+          >
+            <div style="min-width:0;flex:1;">
+              <p style="font-weight:600;font-size:14px;color:#111827;margin:0;">${item.legal_name || "Unknown"}</p>
+              ${dba ? `<p style="font-size:12px;color:#6b7280;margin:2px 0 0;">d/b/a ${dba}</p>` : ""}
+            </div>
+            <div style="text-align:right;flex-shrink:0;">
+              <p style="font-family:monospace;font-size:12px;color:#1a2744;font-weight:600;margin:0;">${item.frn || "—"}</p>
+              <p style="font-size:11px;color:#9ca3af;margin:2px 0 0;">ID: ${item.filer_id || "—"}</p>
+            </div>
+          </button>`;
         }
         html += "</div>";
         nameResults.innerHTML = html;
@@ -244,10 +248,11 @@ import Base from "../../layouts/Base.astro";
           btn.addEventListener("click", () => {
             const frn = btn.getAttribute("data-frn");
             if (!frn) {
-              showError("No FRN available for this entity.");
+              showError("No FRN available for this entity. Try entering the FRN manually.");
               return;
             }
             frnInput.value = frn;
+            nameResults.classList.add("hidden");
             runCheck();
           });
         });