ui(deploy): scrollIntoView when expanding a history row

On long deployment histories the StartupLogPanel would render off-screen
when the user clicked a row. Ref + useEffect scrolls the panel into view
with block:'nearest' so expanding a row that's already in view doesn't
cause a disorienting jump.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-23 00:38:23 +02:00
parent ffdaeabc9f
commit 629a009b36

View File

@@ -1,4 +1,4 @@
import { useState } from 'react';
import { useEffect, useRef, useState } from 'react';
import { DataTable } from '@cameleer/design-system';
import type { Column } from '@cameleer/design-system';
import type { Deployment, AppVersion } from '../../../../api/queries/admin/apps';
@@ -16,8 +16,15 @@ interface Props {
export function HistoryDisclosure({ deployments, versions, appSlug, envSlug }: Props) {
const [open, setOpen] = useState(false);
const [expanded, setExpanded] = useState<string | null>(null);
const logPanelRef = useRef<HTMLDivElement | null>(null);
const versionMap = new Map(versions.map((v) => [v.id, v]));
useEffect(() => {
if (expanded && logPanelRef.current) {
logPanelRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
}, [expanded]);
const rows = deployments
.slice()
.sort((a, b) => (b.createdAt ?? '').localeCompare(a.createdAt ?? ''));
@@ -55,7 +62,11 @@ export function HistoryDisclosure({ deployments, versions, appSlug, envSlug }: P
{expanded && (() => {
const d = rows.find((r) => r.id === expanded);
if (!d) return null;
return <StartupLogPanel deployment={d} appSlug={appSlug} envSlug={envSlug} />;
return (
<div ref={logPanelRef}>
<StartupLogPanel deployment={d} appSlug={appSlug} envSlug={envSlug} />
</div>
);
})()}
</>
)}