From 6a0195b9fca853bc1275216eef8b4e5f3760baa7 Mon Sep 17 00:00:00 2001
From: chriscrosstalk <49691103+chriscrosstalk@users.noreply.github.com>
Date: Wed, 1 Apr 2026 10:32:26 -0700
Subject: [PATCH] fix(UI): constrain install activity feed height with
 auto-scroll (#611)

The App Installation Activity list on the Easy Setup complete page grew
unboundedly, pushing Active Downloads off-screen. Caps the list at ~8
visible items with overflow scrolling, auto-scrolling to keep the latest
activity visible.

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 admin/inertia/components/InstallActivityFeed.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/admin/inertia/components/InstallActivityFeed.tsx b/admin/inertia/components/InstallActivityFeed.tsx
index 21da57d..152964c 100644
--- a/admin/inertia/components/InstallActivityFeed.tsx
+++ b/admin/inertia/components/InstallActivityFeed.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useRef } from 'react'
 import { IconCircleCheck, IconCircleX } from '@tabler/icons-react'
 import classNames from '~/lib/classNames'
 
@@ -44,10 +45,18 @@ export type InstallActivityFeedProps = {
 }
 
 const InstallActivityFeed: React.FC<InstallActivityFeedProps> = ({ activity, className, withHeader = false }) => {
+  const listRef = useRef<HTMLUListElement>(null)
+
+  useEffect(() => {
+    if (listRef.current) {
+      listRef.current.scrollTop = listRef.current.scrollHeight
+    }
+  }, [activity])
+
   return (
     <div className={classNames('bg-surface-primary shadow-sm rounded-lg p-6', className)}>
       {withHeader && <h2 className="text-lg font-semibold text-text-primary">Installation Activity</h2>}
-      <ul role="list" className={classNames("space-y-6 text-desert-green", withHeader ? 'mt-6' : '')}>
+      <ul ref={listRef} role="list" className={classNames("space-y-6 text-desert-green max-h-[400px] overflow-y-auto scroll-smooth", withHeader ? 'mt-6' : '')}>
         {activity.map((activityItem, activityItemIdx) => (
           <li key={activityItem.timestamp} className="relative flex gap-x-4">
             <div