fix(frontend): center gate dialogs on the app area, not the browser viewport

Embedded in the Omics Portal the SPA sits to the right of the portal sidebar, but dialogs used `fixed left-1/2` — centered on the whole browser window, so gates rendered visibly off-center (overlapping the sidebar). - AppShell publishes the app area's horizontal geometry (--app-area-left/width) as CSS vars on <html> via ResizeObserver + window resize. - DialogContent centers on those vars (falls back to the viewport when the app is standalone, where the two coincide). - ArtifactGateWidget: narrower — cap at 52rem instead of 70vw. - tools/replay: resume now returns {id, alreadyActive} JSON — the post-f979ada frontend reads result.alreadyActive and a bare 204 broke replay resume. Verified on the replay harness: with a simulated 300px portal sidebar the gate centers on the app area (center 790 = 300 + 980/2); standalone unchanged. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-19 17:08:20 +02:00
parent 87cb806dfc
commit 803b98de36
5 changed files with 33 additions and 4 deletions
@@ -34,6 +34,29 @@ import type { CSSProperties } from "react";
 */
 export function AppShell() {
  const { containerRef, panelWidth, desktopSplit, resizing, separatorProps } = useActivityPanelResize();
+  // Publish the app area's horizontal geometry as CSS vars on <html>: when the app
+  // is embedded beside the portal's left sidebar, viewport-fixed dialogs (dialog.tsx)
+  // must center on the ThothII area, not on the whole browser window.
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const doc = document.documentElement;
+    const publish = () => {
+      const r = el.getBoundingClientRect();
+      doc.style.setProperty("--app-area-left", `${r.left}px`);
+      doc.style.setProperty("--app-area-width", `${r.width}px`);
+    };
+    publish();
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(publish);
+    observer?.observe(el);
+    window.addEventListener("resize", publish);
+    return () => {
+      observer?.disconnect();
+      window.removeEventListener("resize", publish);
+      doc.style.removeProperty("--app-area-left");
+      doc.style.removeProperty("--app-area-width");
+    };
+  }, [containerRef]);
  const activityWidthStyle = {
    "--activity-panel-width": `${panelWidth}px`,
  } as CSSProperties;