Table now takes whole screen

app.py

@@ -75,19 +75,26 @@ def init_leaderboard(dataframe, benchmark_type):
 black_logo_path = "src/assets/logo-icon-black.png"
 white_logo_path = "src/assets/logo-icon-white.png"
 
-demo = gr.Blocks(css=custom_css, theme=gr.themes.Default(primary_hue=gr.themes.colors.pink))
+demo = gr.Blocks(
+    css=custom_css,
+    theme=gr.themes.Default(primary_hue=gr.themes.colors.pink),
+    fill_height=True,
+    fill_width=True,
+)
 with demo:
     gr.HTML(f"""
-    <div id="page-header" style="text-align:center; margin-bottom:1rem;">
-        <div id="left-container">
-            <img id="black-logo" src="/gradio_api/file={black_logo_path}">
-            <img id="white-logo" src="/gradio_api/file={white_logo_path}">
-        </div>
-        <div id="centre-container">
-            <h1 style="margin-bottom: 0.25rem;">{TITLE}</h1>
-            <p style="color:#eb088a; margin:0; font-size:1.2rem;">Performance Insights &amp; Comparison</p>
+    <div id="page-header">
+        <div id="header-container">
+            <div id="left-container">
+                <img id="black-logo" src="/gradio_api/file={black_logo_path}">
+                <img id="white-logo" src="/gradio_api/file={white_logo_path}">
+            </div>
+            <div id="centre-container">
+                <h1 style="margin-bottom: 0.25rem;">{TITLE}</h1>
+                <p style="color:#eb088a; margin:0; font-size:1.2rem;">Performance Insights &amp; Comparison</p>
+            </div>
+            <div id="right-container"></div>
         </div>
-        <div id="right-container"></div>
     </div>
     """)
     # gr.HTML(TITLE)
@@ -96,13 +103,13 @@ with demo:
     # gr.Markdown(INTRODUCTION_TEXT, elem_classes="markdown-text")
 
     with gr.Tabs(elem_classes=["leaderboard-table", "tab-buttons"]) as tabs:
-        with gr.TabItem("Base Benchmark", elem_id="llm-benchmark-tab-table", id=0):
+        with gr.TabItem("Base Benchmark", elem_classes="llm-benchmark-tab-table", id=0):
             leaderboard = init_leaderboard(ST_LEADERBOARD_DF, "base")
 
-        with gr.TabItem("Agentic Benchmark", elem_id="llm-benchmark-tab-table", id=1):
+        with gr.TabItem("Agentic Benchmark", elem_classes="llm-benchmark-tab-table", id=1):
             leaderboard = init_leaderboard(AGENTIC_LEADERBOARD_DF, "agentic")
 
-        with gr.TabItem("About", elem_id="llm-benchmark-tab-table", id=2):
+        with gr.TabItem("About", elem_classes="llm-benchmark-tab-table", id=2):
             gr.Markdown(LLM_BENCHMARKS_TEXT, elem_classes="markdown-text")
 
 assets = [black_logo_path, white_logo_path]

src/display/css_html_js.py

@@ -225,10 +225,6 @@ custom_css = """
     padding: 20px;
 }
 
-table.table {
-    font-family: var(--font);
-}
-
 .header-row {
     height: 0;
     min-height: 0;
@@ -244,6 +240,14 @@ table.table {
 
 #page-header {
     display: flex;
+    justify-content: center;
+    text-align: center;
+    margin-bottom: 1rem;
+}
+
+#header-container{
+    display: flex;
+    width: 800px;
 }
 
 #left-container {
@@ -271,6 +275,12 @@ table.table {
     flex: 1;
 }
 
+.llm-benchmark-tab-table .table-wrap table.table {
+    font-family: var(--font);
+    overflow-y: auto;
+    overflow-x: auto;
+}
+
 @media (prefers-color-scheme: dark) {
     #left-container #black-logo {
         display: none;