fix: ride count now wraps below park name instead of colliding
Removed flex:1 from left side so ride count has a real minimum width to trigger wrapping. Added whiteSpace:nowrap so flexbox knows when to wrap it. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -238,7 +238,7 @@ function ParkRow({
|
|||||||
padding: "10px 14px",
|
padding: "10px 14px",
|
||||||
gap: 10,
|
gap: 10,
|
||||||
}}>
|
}}>
|
||||||
<div style={{ minWidth: 0, flex: 1 }}>
|
<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)", whiteSpace: "nowrap" }}>
|
<span style={{ fontWeight: 500, fontSize: "0.85rem", lineHeight: 1.2, color: "var(--color-text)", whiteSpace: "nowrap" }}>
|
||||||
{park.name}
|
{park.name}
|
||||||
@@ -254,7 +254,7 @@ function ParkRow({
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{!isWeatherDelay && rideCounts?.[park.id] !== undefined && (
|
{!isWeatherDelay && rideCounts?.[park.id] !== undefined && (
|
||||||
<div style={{ fontSize: "0.72rem", color: isClosing ? "var(--color-closing-hours)" : "var(--color-open-hours)", fontWeight: 600, textAlign: "right" }}>
|
<div style={{ fontSize: "0.72rem", color: isClosing ? "var(--color-closing-hours)" : "var(--color-open-hours)", fontWeight: 600, textAlign: "right", whiteSpace: "nowrap" }}>
|
||||||
{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
|
||||||
|
|||||||
Reference in New Issue
Block a user