josh/SixFlagsSuperCalendar
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: move ride count below park name to prevent overflow on small displays
All checks were successful
Build and Deploy / Build & Push (push) Successful in 51s
Details

Browse Source 
Removes the space-between flex layout that pushed the count to the right
edge of a fixed-width column. Now stacks under city/state so it always
fits within the park name column regardless of screen size.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Josh Wright
2026-04-05 14:10:45 -04:00
parent d7f046a4d6
commit e2498af481
1 changed files with 8 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
components/WeekCalendar.tsx
View File

@@ -224,11 +224,10 @@ function ParkRow({
<Link href={`/park/${park.id}`} className="park-name-link" style={{ <Link href={`/park/${park.id}`} className="park-name-link" style={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "space-between",
padding: "10px 14px", padding: "10px 14px",
gap: 10, gap: 10,
}}> }}>
<div> <div style={{ minWidth: 0 }}>
<div style={{ display: "flex", alignItems: "center", gap: 6 }}> <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
<span style={{ fontWeight: 500, fontSize: "0.85rem", lineHeight: 1.2, color: "var(--color-text)" }}> <span style={{ fontWeight: 500, fontSize: "0.85rem", lineHeight: 1.2, color: "var(--color-text)" }}>
{park.name} {park.name}
@@ -249,14 +248,14 @@ function ParkRow({
<div style={{ fontSize: "0.7rem", color: "var(--color-text-muted)", marginTop: 2 }}> <div style={{ fontSize: "0.7rem", color: "var(--color-text-muted)", marginTop: 2 }}>
{park.location.city}, {park.location.state} {park.location.city}, {park.location.state}
</div> </div>
{rideCounts?.[park.id] !== undefined && (
<div style={{ fontSize: "0.7rem", color: isClosing ? "var(--color-closing-hours)" : "var(--color-open-hours)", fontWeight: 600, marginTop: 3 }}>
{rideCounts[park.id]} {coastersOnly
? (rideCounts[park.id] === 1 ? "coaster" : "coasters")
: (rideCounts[park.id] === 1 ? "ride" : "rides")} operating
</div>
)}
</div> </div>
{rideCounts?.[park.id] !== undefined && (
<div style={{ fontSize: "0.72rem", color: isClosing ? "var(--color-closing-hours)" : "var(--color-open-hours)", fontWeight: 600, whiteSpace: "nowrap", flexShrink: 0 }}>
{rideCounts[park.id]} {coastersOnly
? (rideCounts[park.id] === 1 ? "coaster" : "coasters")
: (rideCounts[park.id] === 1 ? "ride" : "rides")} operating
</div>
)}
</Link> </Link>
</td> </td>