From 43e3d0b8f3c2923adc33f3b3d5c63b83492790b8 Mon Sep 17 00:00:00 2001
From: Khalim Conn-Kowlessar <kconnkowlessar@gmail.com>
Date: Thu, 7 May 2026 21:05:55 +0000
Subject: [PATCH] making activity log scrollable

---
 .../your-projects/live/ActivityLog.tsx        | 47 ++++++++++---------
 1 file changed, 26 insertions(+), 21 deletions(-)

diff --git a/src/app/portfolio/[slug]/(portfolio)/your-projects/live/ActivityLog.tsx b/src/app/portfolio/[slug]/(portfolio)/your-projects/live/ActivityLog.tsx
index c43e2e1d..52e0099c 100644
--- a/src/app/portfolio/[slug]/(portfolio)/your-projects/live/ActivityLog.tsx
+++ b/src/app/portfolio/[slug]/(portfolio)/your-projects/live/ActivityLog.tsx
@@ -56,27 +56,32 @@ export function ActivityLog({
   }
 
   return (
-    <div className="pl-4 pr-2 pb-3 space-y-1.5">
-      {events.map((e) => (
-        <div key={e.id} className="flex items-center gap-2 text-xs">
-          <span
-            className={`px-1.5 py-0.5 rounded text-xs font-medium ${
-              e.action === "approved"
-                ? "bg-emerald-50 text-emerald-700"
-                : "bg-red-50 text-red-600"
-            }`}
-          >
-            {e.action === "approved" ? "Approved" : "Unapproved"}
-          </span>
-          <span className="font-medium text-gray-700">{e.measureName}</span>
-          <span className="text-gray-400">·</span>
-          <span className="text-gray-500">
-            {e.actedByName ?? e.actedByEmail}
-          </span>
-          <span className="text-gray-400">·</span>
-          <span className="text-gray-400">{formatDate(e.actedAt)}</span>
-        </div>
-      ))}
+    <div className="relative">
+      <div className="max-h-48 overflow-y-auto pl-4 pr-2 pb-3 space-y-1.5">
+        {events.map((e) => (
+          <div key={e.id} className="flex items-center gap-2 text-xs">
+            <span
+              className={`px-1.5 py-0.5 rounded text-xs font-medium ${
+                e.action === "approved"
+                  ? "bg-emerald-50 text-emerald-700"
+                  : "bg-red-50 text-red-600"
+              }`}
+            >
+              {e.action === "approved" ? "Approved" : "Unapproved"}
+            </span>
+            <span className="font-medium text-gray-700">{e.measureName}</span>
+            <span className="text-gray-400">·</span>
+            <span className="text-gray-500">
+              {e.actedByName ?? e.actedByEmail}
+            </span>
+            <span className="text-gray-400">·</span>
+            <span className="text-gray-400">{formatDate(e.actedAt)}</span>
+          </div>
+        ))}
+      </div>
+      {events.length > 4 && (
+        <div className="pointer-events-none absolute bottom-0 left-0 right-0 h-10 bg-gradient-to-t from-white to-transparent" />
+      )}
     </div>
   );
 }