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.
This commit is contained in:
parent
437ac2ce24
commit
d0998458c9
2 changed files with 3 additions and 2 deletions
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue