From d0998458c9538bec55eb9ee3d7e52c2584154b67 Mon Sep 17 00:00:00 2001
From: Chris Parsons <438676+chrisparsons83@users.noreply.github.com>
Date: Thu, 30 Apr 2026 10:51:14 -0700
Subject: [PATCH] Fix horizontal scroll on league page from long event names
 (#360)

Add min-w-0 to Link wrapper and overflow-hidden to SportRow flex
container so grid/flex children can shrink below intrinsic content
size, allowing truncate to work properly on mobile.
---
 AGENTS.md                                      | 1 +
 app/components/league/SportsSeasonsSummary.tsx | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index 9b0fa0f..bf239ad 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -7,6 +7,7 @@ Brackt.com is a fantasy sports drafting platform (React Router 7 + SSR, Socket.I
 ```bash
 npm run dev               # development with HMR
 npm run typecheck         # TypeScript check
+npm run lint              # lint check (run alongside typecheck after edits)
 npm run db:generate       # generate Drizzle migration
 npm run db:migrate        # apply migrations
 npm run test:run          # unit tests (once)
diff --git a/app/components/league/SportsSeasonsSummary.tsx b/app/components/league/SportsSeasonsSummary.tsx
index d1ab5e6..1e3d775 100644
--- a/app/components/league/SportsSeasonsSummary.tsx
+++ b/app/components/league/SportsSeasonsSummary.tsx
@@ -169,7 +169,7 @@ function SportRow({
 
   const inner = (
     <div
-      className={`group flex gap-3 rounded-lg px-3 py-2.5 transition-colors ${
+      className={`group flex gap-3 rounded-lg px-3 py-2.5 overflow-hidden transition-colors ${
         isCompleted
           ? "hover:bg-white/[0.04] opacity-70 hover:opacity-100"
           : "hover:bg-white/[0.06]"
@@ -206,7 +206,7 @@ function SportRow({
   return (
     <Link
       to={`/leagues/${leagueId}/sports-seasons/${item.id}`}
-      className="block"
+      className="block min-w-0"
       aria-label={`${item.sportName} — ${item.seasonName}`}
     >
       {inner}