Add floating full-name hover reveal for podium [Top 3]

frontend/header.html

@@ -29,7 +29,7 @@
         <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-12">
 
             <!-- Podium -->
-            <div class="rounded-xl p-6 shadow-sm text-white relative overflow-hidden group col-span-1 sm:col-span-2 lg:col-span-1 transition-all duration-300 ease-in-out transform hover:-translate-y-1 cursor-default"
+            <div class="rounded-xl p-6 shadow-sm text-white relative overflow-visible group col-span-1 sm:col-span-2 lg:col-span-1 transition-all duration-300 ease-in-out transform hover:-translate-y-1 cursor-default"
                 style="background: linear-gradient(to bottom, #2d7d65, #1f604f);">
                 <div class="absolute -right-6 -top-6 w-20 h-20 rounded-full opacity-50 group-hover:scale-[2.5] transition-transform duration-500"
                     style="background-color: #174d3e;"></div>
@@ -37,7 +37,7 @@
                     <p class="text-sm font-medium text-white/80 uppercase tracking-wider">Podium</p>
                     <i data-lucide="trophy" class="w-5 h-5 text-yellow-300"></i>
                 </div>
-                <div id="top-performers-list" class="space-y-3 relative z-10"></div>
+                <div id="top-performers-list" class="space-y-3 relative z-10 overflow-visible"></div>
             </div>
 
             <!-- Total Models -->
@@ -125,6 +125,12 @@
 
         function renderHeaderTableStats(data) {
             const $ = (selector) => document.querySelector(selector);
+            const esc = (v) => String(v ?? "")
+                .replace(/&/g, "&amp;")
+                .replace(/</g, "&lt;")
+                .replace(/>/g, "&gt;")
+                .replace(/\"/g, "&quot;")
+                .replace(/'/g, "&#039;");
             if ($('#stat-total-models')) $('#stat-total-models').innerText = data.length;
             if ($('#stat-metrics') && window.EVAL_COLUMNS) $('#stat-metrics').innerText = window.EVAL_COLUMNS.filter(c => c !== "Average").length;
             const avgK = Object.keys(data[0] || {}).find(k => k.includes("Average"));
@@ -132,10 +138,17 @@
                 const top3 = [...data].sort((a, b) => parseFloat(b[avgK]) - parseFloat(a[avgK])).slice(0, 3);
                 const rankStyles = ['bg-yellow-400 text-emerald-900', 'bg-slate-300 text-emerald-900', 'bg-orange-300 text-emerald-900'];
                 $('#top-performers-list').innerHTML = top3.map((m, i) => `
-                    <div class="flex items-center gap-3">
-                        <div class="w-4 h-5 shrink-0 rounded-full ${rankStyles[i] || 'bg-slate-100 text-emerald-900'} flex items-center justify-center text-xs font-bold">${i + 1}</div>
-                        <span class="text-sm font-semibold truncate">${m["Model Name"]}</span>
-                        <span class="ml-auto text-xs font-mono text-emerald-300">${parseFloat(m[avgK]).toFixed(1)}</span>
+                    <div class="group/podium relative py-0.5">
+                        <div class="flex items-center gap-3">
+                            <div class="w-4 h-5 shrink-0 rounded-full ${rankStyles[i] || 'bg-slate-100 text-emerald-900'} flex items-center justify-center text-xs font-bold">${i + 1}</div>
+                            <span class="text-sm font-semibold truncate flex-1 min-w-0 cursor-help">${esc(m["Model Name"])}</span>
+                            <span class="ml-auto text-xs font-mono text-emerald-300">${parseFloat(m[avgK]).toFixed(1)}</span>
+                        </div>
+                        <div class="absolute left-7 top-full mt-1 z-30 pointer-events-none opacity-0 translate-y-1 group-hover/podium:opacity-100 group-hover/podium:translate-y-0 transition-all duration-200 ease-out">
+                            <div class="inline-block w-max max-w-[34rem] rounded-md border border-emerald-300/60 bg-emerald-950/90 backdrop-blur px-2 py-1 text-[11px] text-emerald-100 break-words shadow-lg">
+                                ${esc(m["Model Name"])}
+                            </div>
+                        </div>
                     </div>
                 `).join('');
             }
@@ -147,4 +160,4 @@
     </script>
 
 </body>
-</html>
+</html>