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
@@ -53,7 +53,9 @@ function DialogContent({
      <DialogPrimitive.Popup
        data-slot="dialog-content"
        className={cn(
-          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-2xl bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          // Horizontal center follows the app area (CSS vars published by AppShell),
+          // so embedded-in-portal dialogs center on the ThothII pane, not the browser.
+          "fixed top-1/2 left-[calc(var(--app-area-left,0px)+var(--app-area-width,100vw)/2)] z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-2xl bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
          className
        )}
        {...props}