fix: stabilize extras action rail alignment across environments

Author: rookiestar28

web/sidebar_tabs/rookieui_extras_pane.js

@@ -186,9 +186,37 @@ export function buildExtrasPane(parent, bootstrapState, formRegistry, context) {
   createField(optionsGrid, "Face Restoration", elements.faceRestoration);
   createField(optionsGrid, "CodeFormer Weight", elements.codeformerWeight);
 
-  const actionRail = document.createElement("div");
-  actionRail.className = "rookieui-shell__action-rail rookieui-shell__action-rail--extras";
-  rightColumn.appendChild(actionRail);
+  const actionRail = document.createElement("div");
+  actionRail.className = "rookieui-shell__action-rail rookieui-shell__action-rail--extras";
+  rightColumn.appendChild(actionRail);
+
+  let extrasRailAlignRafToken = null;
+  const resolveActiveExtrasPane = () => (state.mode === "batch_process" ? batchPane : singlePane);
+  const syncExtrasActionRailAlignment = () => {
+    const ownerPane = section.closest(".rookieui-shell__pane");
+    if (ownerPane?.hidden) {
+      return;
+    }
+    const activePaneRect = resolveActiveExtrasPane().getBoundingClientRect();
+    const actionRailRect = actionRail.getBoundingClientRect();
+    const currentMarginTop = Number.parseFloat(globalThis.getComputedStyle?.(actionRail)?.marginTop ?? "0") || 0;
+    const marginTop = Math.max(0, Math.round(currentMarginTop + (activePaneRect.top - actionRailRect.top)));
+    // CRITICAL: keep Extras rail alignment dynamic; fixed offsets drift across Linux/Windows font metrics and cause flaky E2E top-delta checks.
+    actionRail.style.marginTop = `${marginTop}px`;
+  };
+  const queueExtrasActionRailAlignment = () => {
+    if (extrasRailAlignRafToken !== null && typeof globalThis.cancelAnimationFrame === "function") {
+      globalThis.cancelAnimationFrame(extrasRailAlignRafToken);
+    }
+    if (typeof globalThis.requestAnimationFrame === "function") {
+      extrasRailAlignRafToken = globalThis.requestAnimationFrame(() => {
+        extrasRailAlignRafToken = null;
+        syncExtrasActionRailAlignment();
+      });
+      return;
+    }
+    syncExtrasActionRailAlignment();
+  };
 
   const submitButton = document.createElement("button");
   submitButton.id = "rookieui-extras-submit";
@@ -349,15 +377,31 @@ export function buildExtrasPane(parent, bootstrapState, formRegistry, context) {
     }
   });
 
-  singleButton.addEventListener("click", () => {
-    state.mode = "single_image";
-    syncExtrasMode([singleButton, batchButton], [singlePane, batchPane], state.mode);
-  });
-  batchButton.addEventListener("click", () => {
-    state.mode = "batch_process";
-    syncExtrasMode([singleButton, batchButton], [singlePane, batchPane], state.mode);
-  });
-  syncExtrasMode([singleButton, batchButton], [singlePane, batchPane], state.mode);
+  singleButton.addEventListener("click", () => {
+    state.mode = "single_image";
+    syncExtrasMode([singleButton, batchButton], [singlePane, batchPane], state.mode);
+    syncExtrasActionRailAlignment();
+    queueExtrasActionRailAlignment();
+  });
+  batchButton.addEventListener("click", () => {
+    state.mode = "batch_process";
+    syncExtrasMode([singleButton, batchButton], [singlePane, batchPane], state.mode);
+    syncExtrasActionRailAlignment();
+    queueExtrasActionRailAlignment();
+  });
+  syncExtrasMode([singleButton, batchButton], [singlePane, batchPane], state.mode);
+  queueExtrasActionRailAlignment();
+
+  if (typeof ResizeObserver === "function") {
+    const extrasAlignObserver = new ResizeObserver(() => {
+      queueExtrasActionRailAlignment();
+    });
+    extrasAlignObserver.observe(modeTabs);
+    extrasAlignObserver.observe(singlePane);
+    extrasAlignObserver.observe(batchPane);
+    section.__extrasAlignObserver = extrasAlignObserver;
+  }
+  globalThis.addEventListener?.("resize", queueExtrasActionRailAlignment);
 
   let extrasModeSnapshot = state.mode;
   const extrasStateLock = installPaneStateLock(formRegistry, "extras", elements, () => {
@@ -379,8 +423,12 @@ export function buildExtrasPane(parent, bootstrapState, formRegistry, context) {
     captureExtrasState();
   });
 
-  return {
-    onActivate: restoreExtrasState,
-    onDeactivate: captureExtrasState,
-  };
+  return {
+    onActivate: () => {
+      restoreExtrasState();
+      syncExtrasActionRailAlignment();
+      queueExtrasActionRailAlignment();
+    },
+    onDeactivate: captureExtrasState,
+  };
 }