update leaderboard style

app.py

@@ -30,9 +30,7 @@ from data_visualization import (
 )
 from gallery_tab import create_video_gallery
 
-# Try to import enhanced leaderboard, use standard DataFrame if not available
 
-from gradio_leaderboard import Leaderboard, SelectColumns, ColumnFilter
 
 HAS_ENHANCED_LEADERBOARD = True
 
@@ -125,7 +123,11 @@ def prepare_dataframe_for_display(df, for_game=None):
 # Helper function to ensure leaderboard updates maintain consistent height
 def update_df_with_height(df):
     """Update DataFrame with consistent height parameter."""
-    return gr.update(value=df)
+    return gr.update(value=df, 
+                     show_row_numbers=True, 
+                     show_fullscreen_button=True,
+                    line_breaks=True,
+                    max_height=700)
 
 def update_leaderboard(mario_overall, mario_details,
                        sokoban_overall, sokoban_details,
@@ -498,12 +500,64 @@ def build_app():
         /* Enhanced table styling - SIMPLIFIED */
         .table-container {
             height: auto !important;
+            min-height: auto !important;
             max-height: none !important;
             overflow: visible !important;
             border-radius: 8px;
             box-shadow: 0 2px 10px rgba(0,0,0,0.1);
         }
         
+        /* Target the specific table elements */
+        .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 */
+        .gradio-dataframe tbody,
+        [data-testid="dataframe"] tbody {
+            display: table-row-group !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,
@@ -514,6 +568,12 @@ def build_app():
             max-height: none !important;
         }
         
+        /* Target Gradio's pagination system and disable it */
+        .table-container [data-testid="pagination"],
+        .gradio-container [data-testid="pagination"] {
+            display: none !important;
+        }
+        
         /* Large screen adjustments */
         @media screen and (min-height: 1200px) {
             .table-container {
@@ -672,7 +732,11 @@ def build_app():
                         interactive=True,
                         elem_id="leaderboard-table",
                         elem_classes="table-container",
-                        wrap=True
+                        wrap=True,
+                        show_row_numbers=True,
+                        show_fullscreen_button=True,
+                        line_breaks=True,
+                        max_height=700
                     )
                 
                 # Add the score note below the table