fix: compact variant and tooltip rendering

leaderboard_core.py

@@ -1734,6 +1734,7 @@ def render_html(payload: dict[str, Any]) -> str:
             if more_count
             else ""
         )
+        artifact_more = f'<span class="artifact-more">{artifact_toggle}</span>' if more_count else ""
         artifact_extra = f'<span class="artifact-extra" hidden>{extra_artifacts}</span>' if more_count else ""
         row_attrs = {
             "data-class": group["candidate_class"],
@@ -1759,14 +1760,13 @@ def render_html(payload: dict[str, Any]) -> str:
               <td class="rank" data-label="Rank">{group['rank']}</td>
               <td class="model-cell" data-label="Model">
                 <a class="model-link" href="{html.escape(model_url(str(group['representative_id'])))}" target="_blank" rel="noreferrer">{html.escape(str(group['group_key']))}</a>
-                <div class="model-sub">{html.escape(str(group['representative_id']))}</div>
               </td>
-              <td class="num metric has-tooltip" data-label="Avg Downloads / Month" data-metric="downloads_per_month" data-tooltip="{attr(group_downloads_tooltip)}" title="{attr(group_downloads_tooltip)}"><span class="metric-value">{group_downloads_label}</span></td>
-              <td class="num metric has-tooltip" data-label="Avg Likes / month" data-metric="likes_per_month" data-tooltip="{attr(group_likes_tooltip)}" title="{attr(group_likes_tooltip)}"><span class="metric-value">{group_likes_label}</span></td>
+              <td class="num metric has-tooltip" data-label="Avg Downloads / Month" data-metric="downloads_per_month" data-tooltip="{attr(group_downloads_tooltip)}"><span class="metric-value">{group_downloads_label}</span></td>
+              <td class="num metric has-tooltip" data-label="Avg Likes / month" data-metric="likes_per_month" data-tooltip="{attr(group_likes_tooltip)}"><span class="metric-value">{group_likes_label}</span></td>
               <td data-label="Params">{format_params(group['parameter_count_b'])}</td>
               <td class="date-cell" data-label="Created">{render_created(group.get('created_at'), generated_at_dt)}</td>
               <td class="artifacts" data-label="Related repos">
-                <span class="artifact-list">{visible_artifact}{artifact_toggle}{artifact_extra}</span>
+                <span class="artifact-list"><span class="artifact-primary">{visible_artifact}</span>{artifact_more}{artifact_extra}</span>
               </td>
             </tr>
             """
@@ -2011,10 +2011,8 @@ def render_html(payload: dict[str, Any]) -> str:
     .model-cell {{ min-width: 260px; }}
     .model-link {{ display: block; color: var(--ink); font-weight: 800; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }}
     .model-link:hover {{ color: var(--accent); }}
-    .model-sub {{ margin-top: 4px; color: var(--muted); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }}
     .num {{ text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }}
     .metric {{ position: relative; }}
-    .metric.has-tooltip {{ cursor: help; }}
     .metric.has-tooltip:hover::after,
     .metric.has-tooltip:focus-within::after {{
       content: attr(data-tooltip);
@@ -2053,35 +2051,40 @@ def render_html(payload: dict[str, Any]) -> str:
     }}
     .artifacts {{ min-width: 280px; color: var(--muted); }}
     .artifact-list {{
-      display: flex;
-      align-items: center;
-      gap: 5px 10px;
+      display: block;
       min-width: 0;
       overflow: hidden;
-      white-space: nowrap;
     }}
     .artifact-list.is-expanded {{
-      align-items: flex-start;
-      flex-wrap: wrap;
       overflow: visible;
-      white-space: normal;
     }}
-    .artifact-list > a {{
+    .artifact-primary,
+    .artifact-more {{
+      display: block;
+      min-width: 0;
+    }}
+    .artifact-more {{
+      margin-top: 3px;
+      line-height: 1.2;
+    }}
+    .artifact-primary > a {{
+      display: block;
       min-width: 0;
-      max-width: 170px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      flex: 0 1 auto;
     }}
-    .artifact-list.is-expanded > a,
+    .artifact-list.is-expanded .artifact-primary > a,
     .artifact-list.is-expanded .artifact-extra a {{
       max-width: none;
       white-space: normal;
       overflow-wrap: anywhere;
     }}
     .artifact-extra {{
-      display: contents;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 5px 10px;
+      margin-top: 6px;
     }}
     .artifact-toggle {{
       flex: 0 0 auto;
@@ -2142,7 +2145,6 @@ def render_html(payload: dict[str, Any]) -> str:
       th {{ font-size: 11px; }}
       th:nth-child(7),
       td:nth-child(7) {{ display: none; }}
-      .model-sub {{ font-size: 13px; }}
       .metric small,
       .age-stamp {{ font-size: 12px; }}
       .method {{ padding: 18px 16px; }}
@@ -2167,7 +2169,7 @@ def render_html(payload: dict[str, Any]) -> str:
           <span aria-hidden="true"></span>
           <span aria-hidden="true"></span>
         </button>
-        <h1 aria-label="Open LLM Distribution Leaderboard"><img class="hf-logo" src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="" /><span class="title-text"><span>Open LLM Distribution </span><span class="title-tail">Leaderboard<a class="info-link" href="#method" aria-label="How this is calculated" title="How this is calculated"><svg class="lucide lucide-info info-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg></a></span></span></h1>
+        <h1 aria-label="Open LLM Distribution Leaderboard"><img class="hf-logo" src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="" /><span class="title-text"><span>Open LLM Distribution </span><span class="title-tail">Leaderboard<a class="info-link" href="#method" aria-label="How this is calculated"><svg class="lucide lucide-info info-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg></a></span></span></h1>
       </div>
       <nav id="filters-panel" class="controls" aria-label="Leaderboard filters">
         <div class="control search-control">

tests/test_leaderboard_core.py

@@ -706,9 +706,12 @@ class RenderTests(unittest.TestCase):
         self.assertIn("data-group-downloads-tooltip=", text)
         self.assertIn("data-group-likes-tooltip=", text)
         self.assertIn("class=\"num metric has-tooltip\"", text)
+        self.assertNotIn("title=", text)
+        self.assertNotIn("cursor: help", text)
         self.assertNotIn("class=\"metric-detail\"", text)
         self.assertNotIn("<small class=\"metric-detail\"", text)
         self.assertIn(">Model<", text)
+        self.assertNotIn("class=\"model-sub\"", text)
         self.assertNotIn("Model group", text)
         self.assertNotIn("visibleCount", text)
         self.assertIn("How This Is Calculated", text)
@@ -723,6 +726,9 @@ class RenderTests(unittest.TestCase):
         self.assertIn("123.5K recent HF downloads", text)
         self.assertIn("1.2K likes across 3 repos", text)
         self.assertIn("class=\"artifact-list\"", text)
+        self.assertIn("class=\"artifact-primary\"", text)
+        self.assertIn("class=\"artifact-more\"", text)
+        self.assertIn(".artifact-more {\n      margin-top: 3px;", text)
         self.assertIn("class=\"artifact-toggle\"", text)
         self.assertIn("+ 2 more variants", text)
         self.assertIn("class=\"artifact-extra\" hidden", text)