From 629a009b369c3ae4bd620bc4ce83dd21ed1657da Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Thu, 23 Apr 2026 00:38:23 +0200
Subject: [PATCH] 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>
---
 .../DeploymentTab/HistoryDisclosure.tsx           | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/ui/src/pages/AppsTab/AppDeploymentPage/DeploymentTab/HistoryDisclosure.tsx b/ui/src/pages/AppsTab/AppDeploymentPage/DeploymentTab/HistoryDisclosure.tsx
index bb74b60c..fdc2e4cb 100644
--- a/ui/src/pages/AppsTab/AppDeploymentPage/DeploymentTab/HistoryDisclosure.tsx
+++ b/ui/src/pages/AppsTab/AppDeploymentPage/DeploymentTab/HistoryDisclosure.tsx
@@ -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>
+            );
           })()}
         </>
       )}