From 2c5a5b9922a0b2c6a27bac992c9283c8cd9934ee Mon Sep 17 00:00:00 2001
From: Mark Saroufim <marksaroufim@meta.com>
Date: Fri, 6 Feb 2026 22:34:11 -0800
Subject: [PATCH] Only show LOC column for concluded competitions and fix
 alignment

- Pass deadline prop to RankingsList and use isExpired() to gate LOC display
- Hide LOC column entirely for ongoing competitions
- Right-align LOC text for consistent column alignment
- Restore original grid widths (3/3/3/3) when LOC is hidden
---
 .../src/pages/leaderboard/Leaderboard.tsx     |  2 +-
 .../leaderboard/components/RankingLists.tsx   | 31 ++++++++++++-------
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/frontend/src/pages/leaderboard/Leaderboard.tsx b/frontend/src/pages/leaderboard/Leaderboard.tsx
index 4408d51..d566643 100644
--- a/frontend/src/pages/leaderboard/Leaderboard.tsx
+++ b/frontend/src/pages/leaderboard/Leaderboard.tsx
@@ -155,7 +155,7 @@ export default function Leaderboard() {
         <TabPanel value={tab} index={0}>
           <Box>
             {Object.entries(data.rankings).length > 0 ? (
-              <RankingsList rankings={data.rankings} leaderboardId={id} />
+              <RankingsList rankings={data.rankings} leaderboardId={id} deadline={data.deadline} />
             ) : (
               <Box display="flex" flexDirection="column" alignItems="center">
                 <Typography variant="h6" fontWeight="bold">
diff --git a/frontend/src/pages/leaderboard/components/RankingLists.tsx b/frontend/src/pages/leaderboard/components/RankingLists.tsx
index c606ab7..e6785d5 100644
--- a/frontend/src/pages/leaderboard/components/RankingLists.tsx
+++ b/frontend/src/pages/leaderboard/components/RankingLists.tsx
@@ -14,6 +14,7 @@ import { formatMicroseconds } from "../../../lib/utils/ranking.ts";
 import { getMedalIcon } from "../../../components/common/medal.tsx";
 import { fetchCodes } from "../../../api/api.ts";
 import { CodeDialog } from "./CodeDialog.tsx";
+import { isExpired } from "../../../lib/date/utils.ts";
 
 interface RankingItem {
   file_name: string;
@@ -27,6 +28,7 @@ interface RankingItem {
 interface RankingsListProps {
   rankings: Record<string, RankingItem[]>;
   leaderboardId?: string;
+  deadline?: string;
 }
 
 const styles: Record<string, SxProps<Theme>> = {
@@ -70,13 +72,16 @@ const styles: Record<string, SxProps<Theme>> = {
   loc: {
     fontFamily: "monospace",
     color: "text.secondary",
+    textAlign: "right",
   },
 };
 
 export default function RankingsList({
   rankings,
   leaderboardId,
+  deadline,
 }: RankingsListProps) {
+  const showLoc = !!deadline && isExpired(deadline);
   const [expanded, setExpanded] = useState<Record<string, boolean>>({});
   const [colorHash, _] = useState<string>(
     Math.random().toString(36).slice(2, 8),
@@ -168,12 +173,12 @@ export default function RankingsList({
                       {item.user_name} {getMedalIcon(item.rank)}
                     </Typography>
                   </Grid>
-                  <Grid size={2}>
+                  <Grid size={showLoc ? 2 : 3}>
                     <Typography sx={styles.score}>
                       {formatMicroseconds(item.score)}
                     </Typography>
                   </Grid>
-                  <Grid size={2}>
+                  <Grid size={showLoc ? 2 : 3}>
                     <Typography sx={styles.delta}>
                       {item.prev_score > 0 &&
                         `+${formatMicroseconds(item.prev_score)}`}
@@ -187,16 +192,18 @@ export default function RankingsList({
                       />
                     </Typography>
                   </Grid>
-                  <Grid size={2}>
-                    <Typography sx={styles.loc}>
-                      {(() => {
-                        const code = codes.get(item?.submission_id);
-                        if (!code) return "";
-                        const lines = code.split("\n").length;
-                        return `${lines} LOC`;
-                      })()}
-                    </Typography>
-                  </Grid>
+                  {showLoc && (
+                    <Grid size={2}>
+                      <Typography sx={styles.loc}>
+                        {(() => {
+                          const code = codes.get(item?.submission_id);
+                          if (!code) return "";
+                          const lines = code.split("\n").length;
+                          return `${lines} LOC`;
+                        })()}
+                      </Typography>
+                    </Grid>
+                  )}
                 </Grid>
               ))}
             </Stack>