Fix overflow on small screens

app.py

@@ -29,7 +29,7 @@ from src.results import (
 result_paths_per_model = sort_result_paths_per_model(fetch_result_paths())
 load_results_dataframes = partial(load_results_dataframes, result_paths_per_model=result_paths_per_model)
 
-with gr.Blocks(fill_height=True, fill_width=True) as demo:
+with gr.Blocks(fill_height=True, fill_width=True, css=".col_heading {width: 50%}") as demo:
     gr.HTML("<h1 style='text-align: center;'>Compare Results of the 🤗 Open LLM Leaderboard</h1>")
     gr.HTML("<h3 style='text-align: center;'>Select 2 models to load and compare their results</h3>")
     gr.HTML(

src/details.py

@@ -74,23 +74,26 @@ def display_details(sample_idx, show_only_differences, *dfs):
     # Pop model_name and add it to the column name
     df = pd.concat([row.rename(row.pop("model_name")) for row in rows], axis="columns")
 
-    # Wrap long strings to avoid overflow; e.g. URLs in "doc.Websites visited_NEV_2"
-    def wrap(row):
-        try:
-            result = row.str.wrap(140)
-            return result if result.notna().all() else row  # NaN when data is a list
-        except AttributeError:  # when data is number
-            return row
-
-    df = df.apply(wrap, axis=1)
+    # Style
+    # - Option: Show only differences
+    any_difference = pd.Series(False, index=df.index)
     if show_only_differences:
         any_difference = df.ne(df.iloc[:, 0], axis=0).any(axis=1)
-    # Style
+
     return (
         df.style.format(escape="html", na_rep="")
         # .hide(axis="index")
         # Hide non-different rows
         .hide([row for row in df.index if show_only_differences and not any_difference[row]])
+        # Fix overflow
+        .set_table_styles(
+            [
+                {
+                    "selector": "td",
+                    "props": [("overflow-wrap", "break-word"), ("max-width", "1px")],
+                }
+            ]
+        )
         .to_html()
     )