lucasw89/gacha-event-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: wrap the focus chips where the bar is a rail, not a page

Browse Source 
In a 20rem column the scrolling strip shows four chips of a thirteen-game
reader's set behind a hairline scrollbar, and a game you cannot see is a
game you will not focus. Past `lg` they wrap instead: the rail is short and
the list beside it is long, so the extra rows cost that column nothing it
was using. On a phone the strip is right and stays.

Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
This commit is contained in:
Lucas Winther
2026-08-18 22:12:54 +02:00
co-authored by Claude Opus 5
parent 16fcfed9b3
commit ae5ac3aa98
1 changed files with 6 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/components/GameFocus.tsx
+6 -1
View File
@@ -53,10 +53,15 @@ export function GameFocus({
</button> </button>
</div> </div>
{/* A scrolling strip where the bar is as wide as the page, wrapped rows
where it is a 20rem rail: a thirteen-game reader would otherwise get
four chips and a hairline scrollbar, and a game you cannot see is a
game you will not focus. The rail is short and the list beside it is
long, so the rows cost nothing that column was using. */}
<div <div
role="group" role="group"
aria-label="Focus on one game" aria-label="Focus on one game"
className="scroll-x -mx-4 mt-2 flex gap-1.5 px-4 pb-1" className="scroll-x -mx-4 mt-2 flex gap-1.5 px-4 pb-1 lg:flex-wrap"
> >
<Chip <Chip
label="All" label="All"