fix(recent-imagery): scroll the DETAILS card into view when it opens (#970)

renderDetails() revealed the card inside render(), whose preserveScroll() wrapper restored the previous scrollTop in its finally block, undoing the reveal. The reveal now runs in the DETAILS open handler after render() returns, once per opening; closing and refreshes do not scroll.

src/ui/recentImagery.js

@@ -344,7 +344,6 @@ export function createRecentImageryPanel({
   const detailsHost = el('div', 'ri-details', root);
   detailsHost.id = 'ri-details';
   let detailsOpen = false;
-  let detailsShownOpen = false;
   const details = createRailCards({
     container: detailsHost,
     document,
@@ -352,6 +351,8 @@ export function createRecentImageryPanel({
     onOpen: () => {
       detailsOpen = !detailsOpen;
       render();
+      // After the render: preserveScroll() puts the old position back.
+      if (detailsOpen) revealCard(container, detailsHost.children[0]);
     },
   });
 
@@ -875,9 +876,6 @@ export function createRecentImageryPanel({
         ],
       },
     ]);
-    if (detailsOpen && !detailsShownOpen)
-      revealCard(container, detailsHost.children[0]);
-    detailsShownOpen = detailsOpen;
   }
 
   // ---- divider ----------------------------------------------------------

src/ui/recentImagery.test.mjs

@@ -1147,6 +1147,29 @@ test('the body scroll position survives renders even when DOM mutations reset it
   assert.equal(f.body.scrollTop, 120);
 });
 
+test('opening DETAILS scrolls its card into view, and closing it does not scroll', async () => {
+  const f = fixture();
+  await f.ready();
+  // The body is 100 px high and scrolled 40 px; the card opens 150 px down.
+  f.body.scrollTop = 40;
+  f.body.clientHeight = 100;
+  f.body.getBoundingClientRect = () => ({ top: 0 });
+  const header = f
+    .byId('ri-details')
+    .find((node) => node.classList.contains('rail-card-header'));
+  const card = header.parentNode;
+  card.getBoundingClientRect = () => ({
+    top: 150,
+    height: card.dataset.open === 'true' ? 60 : 0,
+  });
+  header.click();
+  assert.equal(card.dataset.open, 'true');
+  assert.equal(f.body.scrollTop, 150);
+  header.click();
+  assert.equal(card.dataset.open, 'false');
+  assert.equal(f.body.scrollTop, 150);
+});
+
 test('destroy returns every listener, the divider and the panel state', async () => {
   const f = fixture();
   await f.ready();