fix: prevent scroll jump when clicking on cell output

Add scroll-margin CSS to data-el-cell-body to reduce scroll jumps when
the cell body receives focus (e.g., when clicking on cell output).

Add mousedown handler in cell.js to preserve scroll position when
clicking on non-editor areas of the cell body.

Author: dl-alexandre

assets/css/js_interop.css

@@ -6,6 +6,12 @@ we hide/show certain elements. This way we don't have to engage the
 server in solely client-side operations.
 */
 
+/* Prevent scroll jump when cell body is focused (e.g., clicking on output) */
+[data-el-cell-body] {
+  scroll-margin-top: 50px;
+  scroll-margin-bottom: 50px;
+}
+
 /* Hooks */
 
 [phx-hook="Dropzone"][data-js-dragging] {

assets/js/hooks/cell.js

@@ -68,6 +68,26 @@ const Cell = {
       this.el.setAttribute("data-js-hover", "");
     });
 
+    // Prevent scroll jump when clicking on cell output by handling mousedown
+    // on the cell body. This ensures clicking on output doesn't trigger
+    // unwanted scroll behavior when the cell body receives focus.
+    const cellBody = this.el.querySelector(`[data-el-cell-body]`);
+    if (cellBody) {
+      cellBody.addEventListener("mousedown", (event) => {
+        // If clicking on output (not an editor), prevent default focus scroll
+        if (!event.target.closest(`[data-el-editor-container]`)) {
+          // Save scroll position before focus changes
+          const scrollX = window.scrollX;
+          const scrollY = window.scrollY;
+
+          // After focus is applied, restore scroll position
+          requestAnimationFrame(() => {
+            window.scrollTo(scrollX, scrollY);
+          });
+        }
+      });
+    }
+
     this.el.addEventListener("mouseleave", (event) => {
       this.el.removeAttribute("data-js-hover");
     });