From bf21c1055a41d1add1d15f3a2232cb874d3b8161 Mon Sep 17 00:00:00 2001
From: Mark Saroufim <marksaroufim@meta.com>
Date: Fri, 13 Feb 2026 17:22:54 -0800
Subject: [PATCH] Fix admin ranking row overflow for long filenames

Add overflow/ellipsis handling to grid cells and the code dialog
button so long filenames truncate instead of bleeding into adjacent
columns.
---
 .../leaderboard/components/RankingLists.tsx    | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/leaderboard/components/RankingLists.tsx b/frontend/src/pages/leaderboard/components/RankingLists.tsx
index 5138f5c..47c0887 100644
--- a/frontend/src/pages/leaderboard/components/RankingLists.tsx
+++ b/frontend/src/pages/leaderboard/components/RankingLists.tsx
@@ -40,6 +40,11 @@ const styles: Record<string, SxProps<Theme>> = {
   rankingRow: {
     borderBottom: 1,
     borderColor: "divider",
+    "& > .MuiGrid-root": {
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+    },
   },
   header: {
     display: "flex",
@@ -189,7 +194,18 @@ export default function RankingsList({
                     </Typography>
                   </Grid>
                   <Grid size={isAdmin ? 2 : 3}>
-                    <Typography>
+                    <Typography
+                      sx={{
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                        "& .MuiButton-root": {
+                          maxWidth: "100%",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                        },
+                      }}
+                    >
                       <CodeDialog
                         code={codes.get(item?.submission_id)}
                         fileName={item.file_name}