frontend: dashboard recent-activities widget no longer scrolls

Rows now flex to fill the card height so the list always fits exactly,
removing the vertical scrollbar that appeared once rows carried a route
line, and the spurious horizontal scrollbar caused by overflow-auto +
the -mx-2 hover bleed. Empty state preserved.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/pages/DashboardPage.jsx

@@ -459,11 +459,15 @@ function RecentActivities({ activities }) {
   const unit = useUnit()
   return (
     <Card title="Recent activities" viewHref="/activities">
-      <div className="space-y-2 overflow-auto h-full">
+      {activities?.length ? (
-        {activities?.slice(0, 6).map(activity => (
+        // Rows flex to fill the card height so the list always fits exactly —
+        // no scrollbars (and never a spurious horizontal one). The visible count
+        // adapts to the widget's height rather than a fixed slice overflowing.
+        <div className="h-full flex flex-col overflow-hidden">
+          {activities.slice(0, 6).map(activity => (
             <Link key={activity.id} to={`/activities/${activity.id}`}
-            className="flex items-center gap-3 py-2 border-b border-gray-800/50 hover:bg-gray-800/30 rounded-lg px-2 -mx-2 transition-colors">
+              className="flex items-center gap-3 flex-1 min-h-0 overflow-hidden px-2 border-b border-gray-800/50 last:border-0 hover:bg-gray-800/30 rounded-lg transition-colors">
-            <span className="text-lg">{sportIcon(activity.sport_type)}</span>
+              <span className="text-lg shrink-0">{sportIcon(activity.sport_type)}</span>
               <div className="flex-1 min-w-0">
                 <p className="text-sm font-medium text-white truncate">{activity.name}</p>
                 {activity.named_route_name && (
@@ -471,16 +475,16 @@ function RecentActivities({ activities }) {
                 )}
                 <p className="text-xs text-gray-500">{formatDate(activity.start_time)}</p>
               </div>
-            <div className="text-right text-sm">
+              <div className="text-right text-sm shrink-0">
                 <p className="text-gray-200">{formatDistance(activity.distance_m, unit)}</p>
                 <p className="text-xs text-red-400">{formatHeartRate(activity.avg_heart_rate)}</p>
               </div>
             </Link>
           ))}
-        {!activities?.length && (
+        </div>
+      ) : (
         <p className="text-gray-600 text-sm text-center py-8">No activities yet — <Link to="/upload" className="text-blue-400 hover:underline">import some data</Link></p>
       )}
-      </div>
     </Card>
   )
 }