pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-20 10:11:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Resolve overlapping elements in RideCard

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-17 22:36:45 +00:00
parent 2099972ac1
commit 8f9c97737c
1 changed files with 34 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/rides/RideCard.tsx
View File

@@ -130,41 +130,45 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
</div>
{/* Stats */}
<div className="flex items-center justify-between text-sm">
<div className="flex items-center gap-4">
<div className="flex flex-col gap-2">
{/* Stats Row - Conditional spacing based on rating existence */}
{(Number(ride.max_speed_kmh) > 0 || Number(ride.max_height_meters) > 0 || Number(ride.duration_seconds) > 0) && (
<div className={`flex items-center ${ride.average_rating > 0 ? 'gap-2' : 'gap-4'} flex-wrap text-sm`}>
{Number(ride.max_speed_kmh) > 0 && (
<div className="flex items-center gap-1.5">
<div className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center">
<div className="flex items-center gap-1.5 min-w-0">
<div className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
<Zap className="w-3.5 h-3.5 text-primary" />
</div>
<span className="text-primary font-semibold">
<span className="text-primary font-semibold whitespace-nowrap">
<MeasurementDisplay value={ride.max_speed_kmh} type="speed" />
</span>
</div>
)}
{Number(ride.max_height_meters) > 0 && (
<div className="flex items-center gap-1.5">
<div className="w-6 h-6 rounded-full bg-accent/10 flex items-center justify-center">
<div className="flex items-center gap-1.5 min-w-0">
<div className="w-6 h-6 rounded-full bg-accent/10 flex items-center justify-center flex-shrink-0">
<ArrowUp className="w-3.5 h-3.5 text-accent" />
</div>
<span className="text-accent font-semibold">
<span className="text-accent font-semibold whitespace-nowrap">
<MeasurementDisplay value={ride.max_height_meters} type="distance" />
</span>
</div>
)}
{Number(ride.duration_seconds) > 0 && (
<div className="flex items-center gap-1.5">
<div className="w-6 h-6 rounded-full bg-secondary/10 flex items-center justify-center">
<div className="flex items-center gap-1.5 min-w-0">
<div className="w-6 h-6 rounded-full bg-secondary/10 flex items-center justify-center flex-shrink-0">
<Clock className="w-3.5 h-3.5 text-secondary" />
</div>
<span className="text-secondary font-semibold">{Math.floor(ride.duration_seconds / 60)}</span>
<span className="text-secondary font-semibold whitespace-nowrap">{Math.floor(ride.duration_seconds / 60)}</span>
<span className="text-muted-foreground text-xs font-normal">min</span>
</div>
)}
</div>
)}
{/* Rating Row - Separate when rating exists */}
{ride.average_rating > 0 && (
<div className="flex items-center gap-1.5 px-2 py-1 rounded-full bg-yellow-500/10 border border-yellow-500/20">
<div className="flex items-center gap-1.5 px-2 py-1 rounded-full bg-yellow-500/10 border border-yellow-500/20 self-start">
<div className="w-5 h-5 rounded-full bg-gradient-to-br from-yellow-400 to-yellow-500 flex items-center justify-center shadow-sm">
<Star className="w-3 h-3 fill-white text-white" />
</div>