From 5af507f234cc1d310e4e6cfc1674abf773a1f699 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 12 May 2026 14:57:16 +0000
Subject: [PATCH] Address code review: cleanup mlb streak type, fix soccer GP
 on mobile, hoist showSubRow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- mlb.ts: drop redundant `?? undefined` after optional chain; document that
  streakCode is the full string (e.g. "W3") and streakNumber is unused
- RegularSeasonStandings: hoist hasSecondaryStats → showSubRow to component
  level (it only depends on a prop, not on individual row data)
- Remove non-functional `truncate`/`min-w-0` from team name cell — truncation
  requires table-layout:fixed which we don't use; team names size naturally
- Soccer GP was hidden on mobile with no sub-row to surface it; GP now shows
  inline for soccer on all viewports, hidden only for non-soccer (which has
  the secondary sub-row)
- Add comment explaining totalCols counts hidden-on-mobile columns for colSpan
- Add missing test for GB column hiding when no rows have gamesBack data

https://claude.ai/code/session_01RADi3LhYMPbRDm5no1ZpdF
---
 .../sport-season/RegularSeasonStandings.tsx   | 22 ++++++++++---------
 .../__tests__/RegularSeasonStandings.test.tsx | 11 ++++++++++
 app/services/standings-sync/mlb.ts            |  9 +++++---
 3 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/app/components/sport-season/RegularSeasonStandings.tsx b/app/components/sport-season/RegularSeasonStandings.tsx
index 2036748..8974f04 100644
--- a/app/components/sport-season/RegularSeasonStandings.tsx
+++ b/app/components/sport-season/RegularSeasonStandings.tsx
@@ -243,10 +243,16 @@ function StandingsTable({
 
   // # Team GP W [D] L [GF GA GD PTS] [OTL PTS] [PCT] [GB] [L10] [STK] Mgr
   // Soccer: 11 fixed columns. Non-soccer: 5 base + GP + optional cols.
+  // GP and PCT are always counted even when hidden on mobile; colSpan must
+  // reflect all rendered columns regardless of CSS visibility.
   const totalCols = showSoccerTable
     ? 11
     : 5 + 1 /* GP */ + (showOtLosses ? 2 : 0) + 1 /* PCT */ + (hasGB ? 1 : 0) + (hasLastTen ? 1 : 0) + (hasStreak ? 1 : 0);
 
+  // Non-soccer rows get a secondary sub-row on mobile showing GP/PCT/GB/L10.
+  // Soccer tables show GP inline (no sub-row) since they already show many columns.
+  const showSubRow = !showSoccerTable;
+
   return (
     <div className="overflow-x-auto -mx-6 px-6">
       <table className="w-full min-w-[360px] text-sm">
@@ -254,7 +260,7 @@ function StandingsTable({
           <tr className="text-xs text-muted-foreground uppercase tracking-wide border-b">
             <th className="text-left py-1.5 pr-2 w-6">#</th>
             <th className="text-left py-1.5">Team</th>
-            <th className="hidden sm:table-cell text-right py-1.5 px-2 w-10">GP</th>
+            <th className={`${showSubRow ? "hidden sm:table-cell " : ""}text-right py-1.5 px-2 w-10`}>GP</th>
             <th className="text-right py-1.5 px-2 w-8">W</th>
             {showSoccerTable && <th className="text-right py-1.5 px-2 w-8">D</th>}
             <th className="text-right py-1.5 px-2 w-8">L</th>
@@ -314,19 +320,16 @@ function StandingsTable({
               const isUserTeam = userParticipantIds.includes(row.participantId);
               const ownership = teamOwnerships[row.participantId];
 
-              // Non-soccer rows get a secondary sub-row on mobile showing GP/PCT/GB/L10
-              const hasSecondaryStats = !showSoccerTable;
-
               sectionRows.push(
                 <tr
                   key={row.id}
-                  className={`${hasSecondaryStats ? "" : "border-b border-border/50 last:border-0"} ${
+                  className={`${showSubRow ? "" : "border-b border-border/50 last:border-0"} ${
                     isUserTeam ? "bg-primary/5" : "hover:bg-muted/30"
                   }`}
                 >
                   <td className="py-2 pr-2 text-muted-foreground tabular-nums">{rank}</td>
-                  <td className="py-2 min-w-0">
-                    <span className={`font-medium truncate ${isUserTeam ? "text-primary" : ""}`}>
+                  <td className="py-2">
+                    <span className={`font-medium ${isUserTeam ? "text-primary" : ""}`}>
                       {row.participant.shortName ?? row.participant.name}
                     </span>
                     {section.showDivisionLabel && row.division && (
@@ -335,7 +338,7 @@ function StandingsTable({
                       </span>
                     )}
                   </td>
-                  <td className="hidden sm:table-cell py-2 px-2 text-right tabular-nums text-muted-foreground">
+                  <td className={`${showSubRow ? "hidden sm:table-cell " : ""}py-2 px-2 text-right tabular-nums text-muted-foreground`}>
                     {row.gamesPlayed}
                   </td>
                   <td className="py-2 px-2 text-right tabular-nums font-medium">{row.wins}</td>
@@ -411,8 +414,7 @@ function StandingsTable({
                 </tr>
               );
 
-              // Secondary stats sub-row for mobile (hidden on sm+)
-              if (hasSecondaryStats) {
+              if (showSubRow) {
                 sectionRows.push(
                   <tr
                     key={`${row.id}-sub`}
diff --git a/app/components/sport-season/__tests__/RegularSeasonStandings.test.tsx b/app/components/sport-season/__tests__/RegularSeasonStandings.test.tsx
index 0a6db08..3911fd7 100644
--- a/app/components/sport-season/__tests__/RegularSeasonStandings.test.tsx
+++ b/app/components/sport-season/__tests__/RegularSeasonStandings.test.tsx
@@ -142,6 +142,17 @@ describe("RegularSeasonStandings", () => {
     expect(screen.queryByText("L10")).not.toBeInTheDocument();
   });
 
+  it("hides GB column when no rows have gamesBack data", () => {
+    render(
+      <RegularSeasonStandings
+        standings={[makeRow({ gamesBack: null })]}
+        teamOwnerships={NO_OWNERSHIPS}
+        userParticipantIds={NO_USER_IDS}
+      />
+    );
+    expect(screen.queryByText("GB")).not.toBeInTheDocument();
+  });
+
   it("shows soccer table columns when showSoccerTable=true", () => {
     render(
       <RegularSeasonStandings
diff --git a/app/services/standings-sync/mlb.ts b/app/services/standings-sync/mlb.ts
index f3d0c18..c84711e 100644
--- a/app/services/standings-sync/mlb.ts
+++ b/app/services/standings-sync/mlb.ts
@@ -27,7 +27,10 @@ interface MlbTeamRecord {
   leagueRank?: string;           // rank within the 15-team AL or NL
   gamesBack: string;             // "-" for leader, "2.0" otherwise
   wildCardGamesBack?: string;
-  streak?: { streakCode: string; streakNumber: number };
+  streak?: {
+    streakCode: string;  // full streak string e.g. "W3" or "L5" — NOT just the letter
+    streakNumber: number; // numeric part; redundant with streakCode, not used
+  };
   records?: { splitRecords?: MlbSplitRecord[] };
 }
 
@@ -115,8 +118,8 @@ export class MlbStandingsAdapter implements StandingsSyncAdapter {
       // Conference rank: use the per-league rank computed above
       const conferenceRank = conferenceRankMap.get(team.team.id) ?? null;
 
-      // Streak: streakCode from the MLB API already contains the full string e.g. "W3" or "L2"
-      const streak = team.streak?.streakCode ?? undefined;
+      // streakCode is the full string e.g. "W3"; streakNumber is the numeric part embedded within it
+      const streak = team.streak?.streakCode;
 
       // Split records
       const splits = team.records?.splitRecords ?? [];