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

fix: scale park column text with viewport width using clamp()
All checks were successful
Build and Deploy / Build & Push (push) Successful in 56s
Details

Browse Source 
Park name, city/state, and ride count all use clamp() so they shrink
proportionally on smaller displays without truncating or overflowing.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Josh Wright
2026-04-05 14:25:52 -04:00
parent fa269db3ef
commit f809f9171b
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/WeekCalendar.tsx
View File

@@ -230,7 +230,7 @@ function ParkRow({
}}> }}>
<div style={{ minWidth: 0, flex: 1 }}> <div style={{ minWidth: 0, flex: 1 }}>
<div style={{ display: "flex", alignItems: "center", gap: 6, minWidth: 0 }}> <div style={{ display: "flex", alignItems: "center", gap: 6, minWidth: 0 }}>
<span style={{ fontWeight: 500, fontSize: "0.85rem", lineHeight: 1.2, color: "var(--color-text)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}> <span style={{ fontWeight: 500, fontSize: "clamp(0.68rem, 1.1vw, 0.85rem)", lineHeight: 1.2, color: "var(--color-text)" }}>
{park.name} {park.name}
</span> </span>
{rideCounts?.[park.id] !== undefined && ( {rideCounts?.[park.id] !== undefined && (
@@ -246,12 +246,12 @@ function ParkRow({
}} /> }} />
)} )}
</div> </div>
<div style={{ fontSize: "0.7rem", color: "var(--color-text-muted)", marginTop: 2 }}> <div style={{ fontSize: "clamp(0.58rem, 0.9vw, 0.7rem)", color: "var(--color-text-muted)", marginTop: 2 }}>
{park.location.city}, {park.location.state} {park.location.city}, {park.location.state}
</div> </div>
</div> </div>
{rideCounts?.[park.id] !== undefined && ( {rideCounts?.[park.id] !== undefined && (
<div style={{ fontSize: "0.72rem", color: isClosing ? "var(--color-closing-hours)" : "var(--color-open-hours)", fontWeight: 600, flexShrink: 0, textAlign: "right" }}> <div style={{ fontSize: "clamp(0.58rem, 0.95vw, 0.72rem)", color: isClosing ? "var(--color-closing-hours)" : "var(--color-open-hours)", fontWeight: 600, flexShrink: 0, textAlign: "right" }}>
{rideCounts[park.id]} {coastersOnly {rideCounts[park.id]} {coastersOnly
? (rideCounts[park.id] === 1 ? "coaster" : "coasters") ? (rideCounts[park.id] === 1 ? "coaster" : "coasters")
: (rideCounts[park.id] === 1 ? "ride" : "rides")} operating : (rideCounts[park.id] === 1 ? "ride" : "rides")} operating