Set model_title to every row (not cell) and only if table is scrolled

app.py

@@ -397,9 +397,9 @@ tr.row_odd {
   font-weight: bolder;
 }
 
-.leaderboard-table td[model_title]:hover::after, .leaderboard-table-model-details td[model_title]:hover::after {
+.leaderboard-table tr[model_title]:hover::after, .leaderboard-table-model-details tr[model_title]:hover::after {
   content: attr(model_title);
-  position: absolute;
+  position: fixed;
   background-color: rgba(50, 50, 50, 0.9);
   color: white;
   padding: 5px;
@@ -407,6 +407,8 @@ tr.row_odd {
   white-space: nowrap;
   z-index: 10;
   pointer-events: none;
+  left: 120px;
+  transform: translateY(150%);
 }
 
 """
@@ -414,34 +416,43 @@ tr.row_odd {
 custom_js = """
 <script>
 
-function addTitleForEachCellOfLeaderboardTable(){
-    const rows = document.querySelectorAll('.leaderboard-table tr, .leaderboard-table-model-details tr');
+function addTitleForEachRowOfLeaderboardTable(){
+    const tables = document.querySelectorAll('.leaderboard-table table, .leaderboard-table-model-details table');
     
-    rows.forEach(row => {
-        // Find the first cell in the row that contains a link
-        const firstCellLink = row.querySelector('td a');
+    tables.forEach(table => {
+        const rows = table.querySelectorAll('tr');
         
-        if (firstCellLink) {
-            // Get the value of the title attribute from the first link
-            const titleText = firstCellLink.getAttribute('title');
-
-            // Set the model_title attribute for all cells in the row except the first one
-            row.querySelectorAll('td').forEach((cell, index) => {
-                if (index !== 0) {
-                    // If the cell already has a model_title attribute, break the loop
-                    if (cell.hasAttribute('model_title')) {
-                        return; // Exit the current iteration for this row
-                    }
+        if (table.scrollLeft > 10) {
+            rows.forEach(row => {
+                // Find the first cell in the row that contains a link
+                const firstCellLink = row.querySelector('td a');
+                
+                if (firstCellLink) {
+                    // Get the value of the title attribute from the first link
+                    const titleText = firstCellLink.getAttribute('title');
+                    
+                    // Set the model_title attribute for the row
+                    row.setAttribute('model_title', titleText);
+                }
+            });
+        } else {
+            rows.forEach(row => {
+                // Find the first cell in the row that contains a link
+                const firstCellLink = row.querySelector('td a');
+                
+                if (firstCellLink) {
+                    // Get the value of the title attribute from the first link
+                    const titleText = firstCellLink.getAttribute('title');
                     
-                    // Set the model_title attribute permanently
-                    cell.setAttribute('model_title', titleText);
+                    // Remove the model_title attribute for the row
+                    row.removeAttribute('model_title');
                 }
             });
         }
     });
 }
 
-const intervalId = setInterval(addTitleForEachCellOfLeaderboardTable, 1000);
+const intervalId = setInterval(addTitleForEachRowOfLeaderboardTable, 1000);
 
 </script>
 """