update leaderboard style

app.py

@@ -126,8 +126,9 @@ def prepare_dataframe_for_display(df, for_game=None):
             game_name = col.replace(' Score', '')
             new_col = f"{game_name}\nScore"
             new_columns[col] = new_col
-        elif col == 'Organization':
-            new_columns[col] = 'Organi-\nzation'
+        # Keep Organization without line breaks
+        # elif col == 'Organization':
+        #    new_columns[col] = 'Organi-\nzation'
     
     # Rename columns with new line breaks
     if new_columns:
@@ -151,7 +152,7 @@ def update_df_with_height(df):
                      show_fullscreen_button=True,
                      line_breaks=True,
                      show_search="search",
-                     max_height=700,
+                     max_height=None,  # Remove height limitation
                      column_widths=col_widths)
 
 def update_leaderboard(mario_overall, mario_details,
@@ -497,148 +498,101 @@ def create_timeline_slider():
 
 def build_app():
     with gr.Blocks(css="""
-        /* Fix for disappearing scrollbar */
+        /* Fix for scrolling issues */
         html, body {
-            overflow-y: scroll !important;
+            overflow-y: hidden !important;
+            overflow-x: hidden !important;
+            width: 100% !important;
             height: 100% !important;
-            min-height: 100vh !important;
+            max-height: none !important;
+            position: relative !important;
         }
         
-        /* Prevent content from shrinking to center */
-        .gradio-container {
+        /* Force scrolling to work on the main container */
+        .gradio-container, #root, #app {
             width: 100% !important;
             max-width: 1200px !important;
             margin-left: auto !important;
             margin-right: auto !important;
-            min-height: 100vh !important;
+            min-height: auto !important;
+            height: auto !important;
+            overflow: visible !important;
+            position: relative !important;
         }
         
-        /* Force table to maintain width */
-        .table-container {
-            width: 100% !important;
-            min-width: 100% !important;
+        /* Remove ALL inner scrollbars - very important! */
+        .gradio-container * {
+            scrollbar-width: none !important;  /* Firefox */
         }
         
-        .table-container table {
-            width: 100% !important;
+        /* Hide scrollbars for Chrome, Safari and Opera */
+        .gradio-container *::-webkit-scrollbar {
+            display: none !important;
         }
         
-        .visualization-container .js-plotly-plot {
-            margin-left: auto !important;
-            margin-right: auto !important;
+        /* Only allow scrollbar on body */
+        body::-webkit-scrollbar {
             display: block !important;
+            width: 10px !important;
         }
-
-        /* Optional: limit width for better layout on large screens */
-        .visualization-container .js-plotly-plot {
-            max-width: 1000px;
+        
+        body::-webkit-scrollbar-track {
+            background: #f1f1f1 !important;
         }
-
-        .section-title {
-            font-size: 1.5em;
-            font-weight: bold;
-            color: #2c3e50;
-            margin-bottom: 15px;
-            padding-bottom: 10px;
-            border-bottom: 2px solid #e9ecef;
-            text-align: center;
+        
+        body::-webkit-scrollbar-thumb {
+            background: #888 !important;
+            border-radius: 5px !important;
         }
-        .container {
-            max-width: 1400px;
-            margin: 0 auto;
-            padding: 0 20px;
+        
+        body::-webkit-scrollbar-thumb:hover {
+            background: #555 !important;
         }
         
-        /* Enhanced table styling - SIMPLIFIED */
+        /* Clean up table styling */
         .table-container {
-            height: auto !important;
-            min-height: auto !important;
-            max-height: none !important;
-            overflow: visible !important;
+            width: 100% !important;
+            overflow: hidden !important;
             border-radius: 8px;
             box-shadow: 0 2px 10px rgba(0,0,0,0.1);
         }
         
-        /* Target the specific table elements */
+        /* Remove duplicate scrollbars */
         .gradio-dataframe [data-testid="table"],
-        [data-testid="dataframe"] [data-testid="table"] {
-            display: block !important;
-            height: auto !important;
-            max-height: none !important;
-        }
-        
-        /* Target the tbody that contains the rows */
+        [data-testid="dataframe"] [data-testid="table"],
         .gradio-dataframe tbody,
-        [data-testid="dataframe"] tbody {
-            display: table-row-group !important;
+        [data-testid="dataframe"] tbody,
+        .table-container > div,
+        .table-container > div > div {
+            overflow: hidden !important;
             max-height: none !important;
         }
         
-        /* Responsive height adjustments for different screen sizes */
-        @media screen and (min-height: 600px) {
-            .gradio-dataframe [data-testid="table"],
-            [data-testid="dataframe"] [data-testid="table"] {
-                min-height: 400px !important;
-            }
-        }
-        
-        @media screen and (min-height: 800px) {
-            .gradio-dataframe [data-testid="table"],
-            [data-testid="dataframe"] [data-testid="table"] {
-                min-height: 600px !important;
-            }
-        }
-        
-        @media screen and (min-height: 1000px) {
-            .gradio-dataframe [data-testid="table"],
-            [data-testid="dataframe"] [data-testid="table"] {
-                min-height: 800px !important;
-            }
-        }
-        
-        @media screen and (min-height: 1200px) {
-            .gradio-dataframe [data-testid="table"],
-            [data-testid="dataframe"] [data-testid="table"] {
-                min-height: 950px !important;
-            }
-        }
-        
-        @media screen and (min-height: 1400px) {
-            .gradio-dataframe [data-testid="table"],
-            [data-testid="dataframe"] [data-testid="table"] {
-                min-height: 1100px !important;
-            }
-        }
-        
-        /* Remove unnecessary container styles */
-        .table-container > div,
-        .table-container > div > div,
-        .gradio-dataframe > div,
-        [data-testid="dataframe"] > div {
+        /* Ensure table contents are visible without scrollbars */
+        .gradio-dataframe,
+        [data-testid="dataframe"] {
             overflow: visible !important;
-            height: auto !important;
             max-height: none !important;
+            border: none !important;
         }
         
-        /* Target Gradio's pagination system and disable it */
-        .table-container [data-testid="pagination"],
-        .gradio-container [data-testid="pagination"] {
-            display: none !important;
+        /* Visualization styling */
+        .visualization-container .js-plotly-plot {
+            margin-left: auto !important;
+            margin-right: auto !important;
+            display: block !important;
+            max-width: 1000px;
         }
         
-        /* Large screen adjustments */
-        @media screen and (min-height: 1200px) {
-            .table-container {
-                height: auto !important;
-                max-height: none !important;
-                overflow: visible !important;
-            }
-            
-            .gradio-container {
-                height: auto !important;
-                max-height: none !important;
-                overflow: visible !important;
-            }
+        /* Section styling */
+        .section-title {
+            font-size: 1.5em;
+            font-weight: bold;
+            color: #2c3e50;
+            margin-bottom: 15px;
+            padding-bottom: 10px;
+            border-bottom: 2px solid #e9ecef;
+            text-align: center;
         }
         
         /* Fix table styling */
@@ -649,26 +603,6 @@ def build_app():
             table-layout: fixed !important;
         }
         
-        /* Targeting row number column directly */
-        table th[role="cell"][aria-colindex="1"],
-        table td[role="cell"][aria-colindex="1"],
-        table col[data-col-index="0"],
-        .table-container tr > *:first-child[aria-colindex="1"],
-        th[scope="row"],
-        th[aria-sort],
-        td[data-index],
-        th[data-row-header] {
-            width: 30px !important;
-            min-width: 30px !important;
-            max-width: 30px !important;
-            padding: 2px 4px !important;
-            font-size: 0.85em !important;
-            text-align: center !important;
-            overflow: hidden !important;
-            text-overflow: ellipsis !important;
-            white-space: nowrap !important;
-        }
-        
         /* Column width customization - adjust for row numbers being first column */
         .table-container th:nth-child(2), 
         .table-container td:nth-child(2) {
@@ -727,15 +661,7 @@ def build_app():
             background-color: #f8fafc;
         }
         
-        /* Row containing the table */
-        .gradio-container .gr-row {
-            min-height: auto !important;
-            height: auto !important;
-            overflow: visible !important;
-            margin-bottom: 20px;
-        }
-        
-        /* Additional specific selectors for row numbers */
+        /* Row number column styling */
         .gradio-dataframe thead tr th[id="0"],
         .gradio-dataframe tbody tr td:nth-child(1),
         [data-testid="dataframe"] thead tr th[id="0"],
@@ -750,27 +676,139 @@ def build_app():
             font-size: 0.85em !important;
         }
         
-        /* Fix overflow issues */
-        .table-container {
-            overflow: auto !important;
-            max-height: 700px !important;
+        /* Fix for Gradio footer causing scroll issues */
+        footer {
+            position: relative !important;
+            width: 100% !important;
+            margin-top: 40px !important;
         }
+    """) as demo:
+        gr.Markdown("# 🎮 Game Arena: Gaming Agent 🎲")
         
-        body, html {
-            overflow-x: hidden !important;
-            overflow-y: auto !important;
-            height: 100% !important;
-            width: 100% !important;
-            margin: 0 !important;
-            padding: 0 !important;
+        # Add custom JavaScript for table header line breaks
+        gr.HTML("""
+        <script>
+        // Function to add line breaks to table headers
+        function formatTableHeaders() {
+            // Find all table headers in the document
+            const headers = document.querySelectorAll('th');
+            
+            headers.forEach(header => {
+                let text = header.textContent || '';
+                
+                // Skip if already processed
+                if (header.getAttribute('data-processed') === 'true') {
+                    return;
+                }
+                
+                // Store original content for reference
+                if (!header.getAttribute('data-original')) {
+                    header.setAttribute('data-original', header.innerHTML);
+                }
+                
+                let newContent = header.innerHTML;
+                
+                // Format Super Mario Bros header
+                if (text.includes('Super Mario Bros')) {
+                    newContent = newContent.replace(/Super\s+Mario\s+Bros/g, 'Super<br>Mario Bros');
+                }
+                
+                // Format Tetris headers
+                if (text.includes('Tetris (complete)')) {
+                    newContent = newContent.replace(/Tetris\s+\(complete\)/g, 'Tetris<br>(complete)');
+                }
+                
+                if (text.includes('Tetris (planning only)')) {
+                    newContent = newContent.replace(/Tetris\s+\(planning\s+only\)/g, 'Tetris<br>(planning)');
+                }
+                
+                // Format Candy Crash header
+                if (text.includes('Candy Crash')) {
+                    newContent = newContent.replace(/Candy\s+Crash/g, 'Candy<br>Crash');
+                }
+                
+                // Make Organization header wider and fix its name
+                if (text.includes('Organization') || text.includes('Organi-zation')) {
+                    header.style.minWidth = '150px';
+                    header.style.width = '150px';
+                    
+                    // Fix the Organization header name if it has a line break
+                    if (text.includes('Organi-') || text.includes('zation')) {
+                        newContent = newContent.replace(/Organi-<br>zation|Organi-zation/, 'Organization');
+                    }
+                }
+                
+                // Update content if changed
+                if (newContent !== header.innerHTML) {
+                    header.innerHTML = newContent;
+                    header.setAttribute('data-processed', 'true');
+                    
+                    // Also ensure headers have proper styling
+                    header.style.whiteSpace = 'normal';
+                    header.style.lineHeight = '1.2';
+                    header.style.verticalAlign = 'middle';
+                    header.style.minHeight = '70px';
+                    header.style.fontSize = '0.9em';
+                }
+            });
         }
         
-        .gradio-container {
-            overflow: visible !important;
-            max-height: none !important;
+        // Function to fix player name cells to prevent line breaking
+        function fixPlayerCells() {
+            // Find all table cells in the document
+            const tables = document.querySelectorAll('table');
+            
+            tables.forEach(table => {
+                // Process rows starting from index 1 (skip header)
+                const rows = table.querySelectorAll('tr');
+                
+                rows.forEach((row, index) => {
+                    // Skip header row
+                    if (index === 0) return;
+                    
+                    // Get the player cell (typically 2nd cell)
+                    const playerCell = row.querySelector('td:nth-child(2)');
+                    const orgCell = row.querySelector('td:nth-child(3)');
+                    
+                    if (playerCell) {
+                        playerCell.style.whiteSpace = 'nowrap';
+                        playerCell.style.overflow = 'hidden';
+                        playerCell.style.textOverflow = 'ellipsis';
+                        playerCell.style.maxWidth = '230px';
+                        playerCell.style.textAlign = 'left';
+                    }
+                    
+                    if (orgCell) {
+                        orgCell.style.whiteSpace = 'nowrap';
+                        orgCell.style.overflow = 'hidden';
+                        orgCell.style.textOverflow = 'ellipsis';
+                        orgCell.style.minWidth = '150px';
+                        orgCell.style.width = '150px';
+                    }
+                });
+            });
         }
-    """) as demo:
-        gr.Markdown("# 🎮 Game Arena: Gaming Agent 🎲")
+        
+        // Function to run all formatting
+        function formatTable() {
+            formatTableHeaders();
+            fixPlayerCells();
+        }
+        
+        // Run on load and then periodically to catch any new tables
+        setInterval(formatTable, 500);
+        
+        // Also run when the DOM content is loaded
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', formatTable);
+        } else {
+            formatTable();
+        }
+        
+        // Run when the page is fully loaded with resources
+        window.addEventListener('load', formatTable);
+        </script>
+        """)
         
         with gr.Tabs():
             with gr.Tab("🏆 Leaderboard"):
@@ -880,7 +918,7 @@ def build_app():
                         show_row_numbers=True,
                         show_fullscreen_button=True,
                         line_breaks=True,
-                        max_height=700,
+                        max_height=None,  # Remove height limitation to avoid scrollbar
                         show_search="search",
                         column_widths=col_widths
                     )