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:
@@ -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>
|
||||
);
|
||||
})()}
|
||||
</>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user