fix: make presentation figures inspectable

web/apps/console/src/presentation/PresentationCanvas.tsx

@@ -1,42 +1,20 @@
-import { useEffect, useState, type ReactNode } from "react";
-import {
-  fitPresentationCanvas,
-  type ViewportSize,
-} from "./canvas-fit.js";
+import type { ReactNode } from "react";
 
 type PresentationCanvasProps = { readonly children: ReactNode };
 
-const readViewport = (): ViewportSize => ({
-  width: window.innerWidth,
-  height: window.innerHeight,
-});
-
-// The canvas adapts continuously from a 4:3 to 16:9 logical ratio while
-// preserving a fixed 720px height; scenes render inside this logical
-// coordinate system and the viewport scales proportionally.
-export const PresentationCanvas = ({ children }: PresentationCanvasProps) => {
-  const [viewport, setViewport] = useState(readViewport);
-  useEffect(() => {
-    const resize = () => setViewport(readViewport());
-    window.addEventListener("resize", resize);
-    return () => window.removeEventListener("resize", resize);
-  }, []);
-  const fit = fitPresentationCanvas(viewport);
-  return (
-    <div className="presentation-viewport">
-      <div
-        className="presentation-canvas"
-        data-testid="presentation-canvas"
-        style={{
-          width: fit.logicalWidth,
-          height: fit.logicalHeight,
-          left: fit.offsetX,
-          top: fit.offsetY,
-          transform: `scale(${fit.scale})`,
-        }}
-      >
-        {children}
-      </div>
+export const PresentationCanvas = ({ children }: PresentationCanvasProps) => (
+  <div className="presentation-viewport">
+    {/*
+      Keep the presentation as normal responsive DOM instead of scaling the
+      whole stage with transform: scale(...). React Flow and future floating UI
+      measure DOM geometry; transformed ancestors make those measurements lie.
+      The 12:9-16:9 stage ratio is enforced by CSS on this element.
+    */}
+    <div
+      className="presentation-canvas"
+      data-testid="presentation-canvas"
+    >
+      {children}
     </div>
-  );
-};
+  </div>
+);