From cce478ae326639a8fe3ae6664293c73b5690f878 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:41:23 +0000
Subject: [PATCH] Fix long ride and park names

---
 src/components/rides/RideCard.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/rides/RideCard.tsx b/src/components/rides/RideCard.tsx
index 37cc469b..78209d06 100644
--- a/src/components/rides/RideCard.tsx
+++ b/src/components/rides/RideCard.tsx
@@ -102,17 +102,17 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
 
         <CardContent className="p-2.5 space-y-1.5 border-t border-border/30">
           {/* Header */}
-          <div className="space-y-0.5">
-            <h3 className="font-bold text-base group-hover:text-primary transition-colors line-clamp-2 group-hover:drop-shadow-[0_0_8px_rgba(var(--primary),0.5)] transition-all duration-300">
+          <div className="space-y-0.5 min-w-0">
+            <h3 className="font-bold text-base group-hover:text-primary transition-colors line-clamp-2 break-words group-hover:drop-shadow-[0_0_8px_rgba(var(--primary),0.5)] transition-all duration-300">
               {ride.name}
             </h3>
             
             {showParkName && ride.park?.name && (
-              <Badge className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-background/80 backdrop-blur-md border-border/50 text-foreground shadow-lg shadow-primary/10 hover:shadow-xl hover:shadow-primary/20 hover:border-primary/50 transition-all duration-300 group/badge max-w-[200px]">
-                <div className="w-4 h-4 rounded-full bg-gradient-to-br from-primary to-primary/50 flex items-center justify-center shadow-sm group-hover/badge:scale-110 transition-transform">
+              <Badge className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-background/80 backdrop-blur-md border-border/50 text-foreground shadow-lg shadow-primary/10 hover:shadow-xl hover:shadow-primary/20 hover:border-primary/50 transition-all duration-300 group/badge max-w-[calc(100%-1rem)]">
+                <div className="w-4 h-4 rounded-full bg-gradient-to-br from-primary to-primary/50 flex items-center justify-center shadow-sm group-hover/badge:scale-110 transition-transform flex-shrink-0">
                   <MapPin className="w-2.5 h-2.5 text-primary-foreground" />
                 </div>
-                <span className="font-medium truncate text-xs">
+                <span className="font-medium truncate text-xs min-w-0">
                   {ride.park.name}
                 </span>
               </Badge>