fix: responsive park column — percentage width, no nowrap, original font sizes
All checks were successful
Build and Deploy / Build & Push (push) Successful in 49s
All checks were successful
Build and Deploy / Build & Push (push) Successful in 49s
Root cause was a hardcoded 240px column width + whiteSpace:nowrap that prevented content from ever fitting on smaller displays. Now uses 25% width so the column scales with the viewport, removed nowrap so text wraps naturally when squeezed, and reverted clamp() back to fixed sizes. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -216,7 +216,6 @@ function ParkRow({
|
|||||||
padding: 0,
|
padding: 0,
|
||||||
borderBottom: "1px solid var(--color-border)",
|
borderBottom: "1px solid var(--color-border)",
|
||||||
borderRight: "1px solid var(--color-border)",
|
borderRight: "1px solid var(--color-border)",
|
||||||
whiteSpace: "nowrap",
|
|
||||||
verticalAlign: "middle",
|
verticalAlign: "middle",
|
||||||
background: rowBg,
|
background: rowBg,
|
||||||
transition: "background 120ms ease",
|
transition: "background 120ms ease",
|
||||||
@@ -230,7 +229,7 @@ function ParkRow({
|
|||||||
}}>
|
}}>
|
||||||
<div style={{ minWidth: 0, flex: 1 }}>
|
<div style={{ minWidth: 0, flex: 1 }}>
|
||||||
<div style={{ display: "flex", alignItems: "center", gap: 6 }}>
|
<div style={{ display: "flex", alignItems: "center", gap: 6 }}>
|
||||||
<span style={{ fontWeight: 500, fontSize: "clamp(0.68rem, 1.1vw, 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}
|
||||||
</span>
|
</span>
|
||||||
{rideCounts?.[park.id] !== undefined && (
|
{rideCounts?.[park.id] !== undefined && (
|
||||||
@@ -246,12 +245,12 @@ function ParkRow({
|
|||||||
}} />
|
}} />
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div style={{ fontSize: "clamp(0.58rem, 0.9vw, 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>
|
||||||
</div>
|
</div>
|
||||||
{rideCounts?.[park.id] !== undefined && (
|
{rideCounts?.[park.id] !== undefined && (
|
||||||
<div style={{ fontSize: "clamp(0.58rem, 0.95vw, 0.72rem)", color: isClosing ? "var(--color-closing-hours)" : "var(--color-open-hours)", fontWeight: 600, textAlign: "right", whiteSpace: "nowrap" }}>
|
<div style={{ fontSize: "0.72rem", color: isClosing ? "var(--color-closing-hours)" : "var(--color-open-hours)", fontWeight: 600, 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
|
||||||
@@ -295,7 +294,7 @@ export function WeekCalendar({ parks, weekDates, data, grouped, rideCounts, coas
|
|||||||
tableLayout: "fixed",
|
tableLayout: "fixed",
|
||||||
}}>
|
}}>
|
||||||
<colgroup>
|
<colgroup>
|
||||||
<col style={{ width: 240 }} />
|
<col style={{ width: "25%" }} />
|
||||||
{weekDates.map((d) => (
|
{weekDates.map((d) => (
|
||||||
<col key={d} style={{ width: 130 }} />
|
<col key={d} style={{ width: 130 }} />
|
||||||
))}
|
))}
|
||||||
|
|||||||
Reference in New Issue
Block a user