From 01fa2bc2b6c524511cd184c9c8686cfa45b86051 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Wed, 30 Sep 2026 10:36:09 +0200
Subject: [PATCH] Preserve card edit scroll position

---
 modules/shared/auth/ui/home.php               |  2 +-
 public/scripts/shared-editable-action-card.js | 57 ++++++++++++++++++-
 2 files changed, 57 insertions(+), 2 deletions(-)

diff --git a/modules/shared/auth/ui/home.php b/modules/shared/auth/ui/home.php
index 27d2d8c..d5b57e0 100644
--- a/modules/shared/auth/ui/home.php
+++ b/modules/shared/auth/ui/home.php
@@ -965,7 +965,7 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $otcM
     echo '</div>';
     echo '</section>';
     echo '<script src="/scripts/help-icon-overlays.js"></script>';
-    echo '<script src="/scripts/shared-editable-action-card.js?v=20260920-2"></script>';
+    echo '<script src="/scripts/shared-editable-action-card.js?v=20260930-1"></script>';
     echo '<script src="/scripts/shared-mobile-detail.js?v=20260925-1"></script>';
     echo '<script src="/scripts/large-table-column-resize.js?v=' . filemtime(__DIR__ . '/../../../../public/scripts/large-table-column-resize.js') . '"></script>';
     echo '<script>';
diff --git a/public/scripts/shared-editable-action-card.js b/public/scripts/shared-editable-action-card.js
index 78e1f77..ebf791b 100644
--- a/public/scripts/shared-editable-action-card.js
+++ b/public/scripts/shared-editable-action-card.js
@@ -2,9 +2,53 @@
   'use strict';
 
   const cardSelector = '[data-shared-editable-action-card]';
+  const scrollRestoreStates = new WeakMap();
 
   const getCard = (element) => element.closest(cardSelector);
 
+  const getScrollContainer = (element) => {
+    let candidate = element?.parentElement || null;
+
+    while (candidate && candidate !== document.body) {
+      const style = window.getComputedStyle(candidate);
+      const scrollable = /(auto|scroll|overlay)/.test(style.overflowY);
+      if (scrollable && candidate.scrollHeight > candidate.clientHeight) {
+        return candidate;
+      }
+      candidate = candidate.parentElement;
+    }
+
+    return document.scrollingElement || document.documentElement;
+  };
+
+  const captureScrollPosition = (root, card) => {
+    const container = getScrollContainer(card);
+    scrollRestoreStates.set(root, {
+      card,
+      container,
+      top: container.scrollTop,
+      left: container.scrollLeft,
+      scheduled: false,
+    });
+  };
+
+  const restoreScrollPosition = (root) => {
+    const state = scrollRestoreStates.get(root);
+    if (!state || state.scheduled) {
+      return;
+    }
+
+    state.scheduled = true;
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        if (state.container?.isConnected) {
+          state.container.scrollTo({ top: state.top, left: state.left, behavior: 'auto' });
+        }
+        scrollRestoreStates.delete(root);
+      });
+    });
+  };
+
   const getDirectDeleteElement = (card, selector) => Array.from(card?.children || [])
     .find((child) => child.matches(selector)) || null;
 
@@ -93,7 +137,9 @@
     root.addEventListener('click', (event) => {
       const edit = event.target.closest('[data-shared-editable-card-edit]');
       if (edit && root.contains(edit)) {
-        setEditMode(getCard(edit), true);
+        const card = getCard(edit);
+        captureScrollPosition(root, card);
+        setEditMode(card, true);
         return;
       }
 
@@ -102,6 +148,7 @@
         const card = getCard(cancel);
         resetDeleteConfirmation(card);
         setEditMode(card, false);
+        scrollRestoreStates.delete(root);
         return;
       }
 
@@ -117,6 +164,14 @@
       }
     });
 
+    const scrollObserver = new MutationObserver(() => {
+      const state = scrollRestoreStates.get(root);
+      if (state && !root.contains(state.card)) {
+        restoreScrollPosition(root);
+      }
+    });
+    scrollObserver.observe(root, { childList: true, subtree: true });
+
     root.addEventListener('input', (event) => {
       const input = event.target.closest('[data-shared-editable-card-delete-input]');
       if (input && root.contains(input)) {