chrisp/brackt
1
1
Fork 0
Code Issues 42 Pull requests Projects Releases Packages Wiki Activity Actions

Fix draft room Summary tab layout and board scroll clipping

Browse source 
- 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>
This commit is contained in:
Chris Parsons 2026-05-19 23:23:10 -07:00
parent 461847c414
commit 36cedf84a7
2 changed files with 5 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/components/draft/DraftGridSection.tsx
View file

@ -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) => {

8
app/components/draft/DraftSummaryView.tsx
View file

@ -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" : ""}`}>