From ea125e0d5e889e49aca941d83d84ee4d1e37a1a7 Mon Sep 17 00:00:00 2001
From: Chris Parsons <438676+chrisparsons83@users.noreply.github.com>
Date: Tue, 19 May 2026 23:31:40 -0700
Subject: [PATCH] Fix draft room Summary tab layout and board scroll clipping
 (#452)

- Add display:contents to rowgroup divs in DraftSummaryView so cells
  flow correctly into the CSS grid (sports as rows, teams as columns)
- Use opaque bg-muted on team column headers to prevent content
  bleeding through during sticky scroll
- Remove whitespace-nowrap and add break-words on sport row headers
  so long names like "FIFA Men's World Cup" wrap within the column
- Add pb-4 to DraftGridSection scroll wrapper so the last pick row
  isn't flush against the scroll boundary

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/components/draft/DraftGridSection.tsx | 2 +-
 app/components/draft/DraftSummaryView.tsx | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/components/draft/DraftGridSection.tsx b/app/components/draft/DraftGridSection.tsx
index 9c990f0..00f220f 100644
--- a/app/components/draft/DraftGridSection.tsx
+++ b/app/components/draft/DraftGridSection.tsx
@@ -101,7 +101,7 @@ export const DraftGridSection = memo(function DraftGridSection({
   return (
     <div className="h-full flex flex-col p-4">
       <div className="flex-1 overflow-auto">
-        <div className="inline-block min-w-full min-h-full">
+        <div className="inline-block min-w-full min-h-full pb-4">
           {/* Team Headers */}
           <div className="flex gap-1.5 mb-1.5 sticky top-0 z-10 bg-background/95 backdrop-blur-sm py-1">
             {draftSlots.map((slot) => {
diff --git a/app/components/draft/DraftSummaryView.tsx b/app/components/draft/DraftSummaryView.tsx
index 20a91f9..afb75ae 100644
--- a/app/components/draft/DraftSummaryView.tsx
+++ b/app/components/draft/DraftSummaryView.tsx
@@ -76,7 +76,7 @@ export const DraftSummaryView = memo(function DraftSummaryView({
       <div role="table" aria-label="Draft summary by sport and team" className="grid w-full" style={{ gridTemplateColumns: gridCols }}>
 
         {/* Header row */}
-        <div role="rowgroup">
+        <div role="rowgroup" className="contents">
         <div role="row" className="contents">
         <div role="columnheader" className="sticky top-0 left-0 z-30 bg-muted border-r border-b border-border px-3 py-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
           Sport
@@ -93,7 +93,7 @@ export const DraftSummaryView = memo(function DraftSummaryView({
             <div
               role="columnheader"
               key={slot.id}
-              className={`sticky top-0 z-20 bg-muted/40 border-b border-border px-1 py-2 min-w-0 ${!isLast ? "border-r" : ""}`}
+              className={`sticky top-0 z-20 bg-muted border-b border-border px-1 py-2 min-w-0 ${!isLast ? "border-r" : ""}`}
             >
               <div className="flex flex-col items-center gap-1">
                 <TeamAvatar
@@ -120,7 +120,7 @@ export const DraftSummaryView = memo(function DraftSummaryView({
         </div>{/* end rowgroup */}
 
         {/* Data rows */}
-        <div role="rowgroup">
+        <div role="rowgroup" className="contents">
         {sports.map((sport, sportIndex) => {
           const isLastRow = sportIndex === sports.length - 1;
           const { total: sportTotal, teams: sportTeamCount } =
@@ -128,7 +128,7 @@ export const DraftSummaryView = memo(function DraftSummaryView({
           return (
             <Fragment key={sport.id}>
               <div role="row" className="contents">
-              <div role="rowheader" className={`sticky left-0 z-10 bg-muted border-r border-border px-3 py-2.5 font-medium text-sm whitespace-nowrap ${!isLastRow ? "border-b" : ""}`}>
+              <div role="rowheader" className={`sticky left-0 z-10 bg-muted border-r border-border px-3 py-2.5 font-medium text-sm break-words ${!isLastRow ? "border-b" : ""}`}>
                 {sport.name}
               </div>
               <div role="cell" className={`border-r border-border px-2 py-2.5 text-center bg-muted/20 ${!isLastRow ? "border-b" : ""}`}>