fix sorting with medal icons

src/populate.py

@@ -33,8 +33,23 @@ def get_leaderboard_df(results_path):
     medal_map  = {1: "🥇", 2: "🥈", 3: "🥉"} 
 
     def medal_html(rank):
-        m = medal_map.get(rank)
-        return f'<span style="font-size:2.0rem;">{m}</span>' if m else rank
+        """Return an HTML span with the medal icon for the top 3 ranks.
+
+        The numeric rank is stored in the data-order attribute equal to the numerical rank so that
+        DataTables (used under-the-hood by the gradio_leaderboard component)
+        can sort the column by this hidden numeric value while still
+        displaying the pretty medal icon. For ranks > 3 we just return the
+        integer so the column remains fully numeric.
+        """
+        medal = medal_map.get(rank)
+        if medal:
+            # Prepend a hidden numeric span so string sorting still works numerically.
+            return (
+                f'<span style="display:none">{rank:04}</span>'  # zero-padded for stable string sort
+                f'<span style="font-size:2.0rem;">{medal}</span>'
+            )
+        # For other ranks, also zero-pad to keep width and ensure proper string sort
+        return f'<span style="display:none">{rank:04}</span>{rank}'
     
     df["Rank"] = df.index + 1
     df["Rank"] = df["Rank"].apply(medal_html)