feat: Make submit row fixed on the bottom of the screen until the use…

…r scrolls down completely (#1251)

Resolves #1226

backend/experiment/static/experiment_form.css

@@ -6,3 +6,28 @@
 .inline-group .inline-heading:hover {
     text-decoration: underline;
 }
+
+/* Floating class for the submit row */
+.submit-row.floating {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    filter: drop-shadow(0 -2px 5px rgba(0, 0, 0, 0.1));
+    border-radius: 0;
+    margin: 0;
+
+    /* Grid with two columns */
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+@media (min-width: 768px) {
+    .submit-row.floating {
+        /* Make the bar float over the form part of the screen */
+        max-width: calc(100% - 299px);
+        margin-left: 299px;
+        display: flex;
+    }
+}

backend/experiment/static/experiment_form.js

@@ -1,5 +1,6 @@
 document.addEventListener("DOMContentLoaded", function () {
     initCollapsibleInlineForms();
+    floatingSubmitRow();
 });
 
 function initCollapsibleInlineForms() {
@@ -38,3 +39,22 @@ function initCollapsibleInlineForms() {
         });
     });
 }
+
+function floatingSubmitRow() {
+    const submitRow = document.querySelector('.submit-row');
+
+    if (!submitRow) {
+        console.error('No submit row found');
+        return;
+    }
+
+    const submitRowOffset = submitRow.offsetTop;
+
+    window.addEventListener('scroll', function () {
+        if (window.pageYOffset + window.innerHeight < submitRowOffset + 20) {
+            submitRow.classList.add('floating');
+        } else {
+            submitRow.classList.remove('floating');
+        }
+    });
+}