feat: unify settings (#3128)

apps/remix/app/components/forms/form-sticky-save-bar.tsx

@@ -5,6 +5,22 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { AlertTriangleIcon } from 'lucide-react';
 import { type ReactNode, useEffect, useRef, useState } from 'react';
 
+const getScrollParent = (node: HTMLElement): HTMLElement | null => {
+  let current = node.parentElement;
+
+  while (current) {
+    const { overflowY } = getComputedStyle(current);
+
+    if (overflowY === 'auto' || overflowY === 'scroll') {
+      return current;
+    }
+
+    current = current.parentElement;
+  }
+
+  return null;
+};
+
 export type FormStickySaveBarProps = {
   isDirty: boolean;
   isSubmitting: boolean;
@@ -43,14 +59,18 @@ export const FormStickySaveBar = ({ isDirty, isSubmitting, onReset, resetToDefau
     }
 
     // The sentinel sits at the bar's resting position (the end of the form). While the
-    // bar is stuck to the bottom of the viewport the sentinel is scrolled past (out of
-    // view); once you reach the form's end it comes into view and the bar settles.
+    // bar is stuck to the bottom of the scroll container the sentinel is scrolled past
+    // (out of view); once you reach the form's end it comes into view and the bar settles.
+    //
+    // Observe relative to the actual scroll container (not always the viewport) so a
+    // banner shifting the page can't desync the detection from the sticky bar — both
+    // then share the same reference box.
     const observer = new IntersectionObserver(
       ([entry]) => {
         setIsStuck(!entry.isIntersecting);
       },
       {
-        root: null,
+        root: getScrollParent(sentinel),
         rootMargin: '0px 0px -24px 0px',
         threshold: 0,
       },