From 8f9c97737ce52e1e6d8d4a13f78c02fc2eb832ca Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 17 Oct 2025 22:36:45 +0000
Subject: [PATCH] Fix: Resolve overlapping elements in RideCard

---
 src/components/rides/RideCard.tsx | 64 ++++++++++++++++---------------
 1 file changed, 34 insertions(+), 30 deletions(-)

diff --git a/src/components/rides/RideCard.tsx b/src/components/rides/RideCard.tsx
index a8f1fe83..7e77ab94 100644
--- a/src/components/rides/RideCard.tsx
+++ b/src/components/rides/RideCard.tsx
@@ -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">
-              {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">
-                    <Zap className="w-3.5 h-3.5 text-primary" />
+          <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 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 whitespace-nowrap">
+                      <MeasurementDisplay value={ride.max_speed_kmh} type="speed" />
+                    </span>
                   </div>
-                  <span className="text-primary font-semibold">
-                    <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">
-                    <ArrowUp className="w-3.5 h-3.5 text-accent" />
+                )}
+                {Number(ride.max_height_meters) > 0 && (
+                  <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 whitespace-nowrap">
+                      <MeasurementDisplay value={ride.max_height_meters} type="distance" />
+                    </span>
                   </div>
-                  <span className="text-accent font-semibold">
-                    <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">
-                    <Clock className="w-3.5 h-3.5 text-secondary" />
+                )}
+                {Number(ride.duration_seconds) > 0 && (
+                  <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 whitespace-nowrap">{Math.floor(ride.duration_seconds / 60)}</span>
+                    <span className="text-muted-foreground text-xs font-normal">min</span>
                   </div>
-                  <span className="text-secondary font-semibold">{Math.floor(ride.duration_seconds / 60)}</span>
-                  <span className="text-muted-foreground text-xs font-normal">min</span>
-                </div>
-              )}
-            </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>