Keep form actions visible while editing long forms

Use a Stimulus controller to detect when the actions fieldset is
stuck and apply elevated styling only in that state. This keeps save
controls accessible at the bottom of long admin forms without making
the footer look pinned when it is already in view.

Author: thibaudgg

app/assets/tailwind/components/formtastic.css

@@ -257,10 +257,23 @@
       @apply mt-3 flex justify-end;
     }
 
+    .actions {
+      @apply sticky bottom-0 z-10;
+    }
+
     .actions > ol {
       @apply flex flex-row-reverse items-center gap-4;
     }
 
+    .actions.is-stuck > ol {
+      @apply -mx-5 rounded-tl-xl bg-[#FCFEFC] p-2.5 px-5 dark:border-t dark:border-l dark:border-gray-800 dark:bg-[#030712];
+      box-shadow: 0 -4px 16px rgb(0 0 0 / 0.08);
+
+      :where(.dark, .dark *) & {
+        box-shadow: 0 -4px 16px rgb(0 0 0 / 0.4);
+      }
+    }
+
     /* Hints and Descriptions */
     .inline-hints {
       @apply mt-2 text-sm text-gray-500;

app/javascript/controllers/admin/form_sticky_actions_controller.js

@@ -0,0 +1,32 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.observers = []
+    this.element
+      .querySelectorAll(".formtastic fieldset.actions")
+      .forEach((fieldset) => this.observe(fieldset))
+  }
+
+  disconnect() {
+    this.observers.forEach(({ observer, sentinel }) => {
+      observer.disconnect()
+      sentinel.remove()
+    })
+    this.observers = []
+  }
+
+  observe(fieldset) {
+    const sentinel = document.createElement("div")
+    sentinel.setAttribute("aria-hidden", "true")
+    sentinel.style.height = "1px"
+    sentinel.style.pointerEvents = "none"
+    fieldset.after(sentinel)
+
+    const observer = new IntersectionObserver(([entry]) => {
+      fieldset.classList.toggle("is-stuck", !entry.isIntersecting)
+    })
+    observer.observe(sentinel)
+    this.observers.push({ observer, sentinel })
+  }
+}

app/views/layouts/active_admin.html.erb

@@ -26,7 +26,7 @@
         grid grow grid-cols-1 gap-4 px-2.5 lg:auto-cols-[minmax(0,250px)]
         lg:grid-flow-col lg:gap-6 lg:px-5
       "
-      data-controller="form-scroll-to-error"
+      data-controller="form-scroll-to-error form-sticky-actions"
       data-action="turbo:submit-start->form-scroll-to-error#observeForms"
     >
       <%= yield %>