From a0912fd09a13549aa3da67cc3f1dd6421cd32c46 Mon Sep 17 00:00:00 2001
From: owain <owain@jarrett.eu>
Date: Thu, 18 Jun 2026 22:00:42 +0100
Subject: [PATCH] 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 | 48 +++++++++++++++-------------
 1 file changed, 26 insertions(+), 22 deletions(-)

diff --git a/frontend/src/pages/DashboardPage.jsx b/frontend/src/pages/DashboardPage.jsx
index aa8570d..a9c2e26 100644
--- a/frontend/src/pages/DashboardPage.jsx
+++ b/frontend/src/pages/DashboardPage.jsx
@@ -459,28 +459,32 @@ function RecentActivities({ activities }) {
   const unit = useUnit()
   return (
     <Card title="Recent activities" viewHref="/activities">
-      <div className="space-y-2 overflow-auto h-full">
-        {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">
-            <span className="text-lg">{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 && (
-                <p className="text-xs text-blue-400 truncate">📍 {activity.named_route_name}</p>
-              )}
-              <p className="text-xs text-gray-500">{formatDate(activity.start_time)}</p>
-            </div>
-            <div className="text-right text-sm">
-              <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 && (
-          <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>
+      {activities?.length ? (
+        // 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 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 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 && (
+                  <p className="text-xs text-blue-400 truncate">📍 {activity.named_route_name}</p>
+                )}
+                <p className="text-xs text-gray-500">{formatDate(activity.start_time)}</p>
+              </div>
+              <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>
+          ))}
+        </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>
+      )}
     </Card>
   )
 }