github-mirror/project-nomad
1
0
Fork 0
mirror of https://github.com/Crosstalk-Solutions/project-nomad.git synced 2026-04-03 07:19:27 +02:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix(UI): constrain install activity feed height with auto-scroll (#611)

Browse Source 
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>
This commit is contained in:
chriscrosstalk 2026-04-01 10:32:26 -07:00 committed by GitHub
parent 01699ff11d
commit a3f164d695
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
admin/inertia/components/InstallActivityFeed.tsx
View File

@ -1,3 +1,4 @@
import { useEffect, useRef } from 'react'
import { IconCircleCheck, IconCircleX } from '@tabler/icons-react' import { IconCircleCheck, IconCircleX } from '@tabler/icons-react'
import classNames from '~/lib/classNames' import classNames from '~/lib/classNames'
@ -44,10 +45,18 @@ export type InstallActivityFeedProps = {
} }
const InstallActivityFeed: React.FC<InstallActivityFeedProps> = ({ activity, className, withHeader = false }) => { 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 ( return (
<div className={classNames('bg-surface-primary shadow-sm rounded-lg p-6', className)}> <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>} {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) => ( {activity.map((activityItem, activityItemIdx) => (
<li key={activityItem.timestamp} className="relative flex gap-x-4"> <li key={activityItem.timestamp} className="relative flex gap-x-4">
<div <div