Fix

webstudio-is · Dec 3, 2024 · 89237a9 · 89237a9
1 parent 50b0116
commit 89237a9
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/apps/builder/app/builder/features/workspace/canvas-tools/canvas-tools.tsx b/apps/builder/app/builder/features/workspace/canvas-tools/canvas-tools.tsx
@@ -16,8 +16,6 @@ import {
 import { Label } from "./outline/label";
 import { Outline } from "./outline/outline";
 import { useSubscribeDragAndDropState } from "./use-subscribe-drag-drop-state";
-import { ResizeHandles } from "./resize-handles";
-import { MediaBadge } from "./media-badge";
 import { applyScale } from "./outline";
 import { $scale } from "~/builder/shared/nano-states";
 import { BlockChildHoveredInstanceOutline } from "./outline/block-instance-outline";
@@ -73,8 +71,6 @@ export const CanvasTools = () => {
 
   return (
     <>
-      <MediaBadge />
-      <ResizeHandles />
       {isPreviewMode === false && (
         <>
           <SelectedInstanceOutline />

diff --git a/apps/builder/app/builder/features/workspace/workspace.tsx b/apps/builder/app/builder/features/workspace/workspace.tsx
@@ -10,6 +10,8 @@ import { $textEditingInstanceSelector } from "~/shared/nano-states";
 import { CanvasTools } from "./canvas-tools";
 import { useSetCanvasWidth } from "../breakpoints";
 import { selectInstance } from "~/shared/awareness";
+import { ResizeHandles } from "./canvas-tools/resize-handles";
+import { MediaBadge } from "./canvas-tools/media-badge";
 
 const workspaceStyle = css({
   flexGrow: 1,
@@ -101,6 +103,7 @@ export const Workspace = ({ children, onTransitionEnd }: WorkspaceProps) => {
     selectInstance(undefined);
     $textEditingInstanceSelector.set(undefined);
   };
+  const outlineStyle = useOutlineStyle();
 
   return (
     <>
@@ -116,14 +119,21 @@ export const Workspace = ({ children, onTransitionEnd }: WorkspaceProps) => {
         >
           {children}
         </div>
+        <div
+          data-name="canvas-tools-wrapper"
+          className={canvasContainerStyle({ css: { pointerEvents: "none" } })}
+          style={outlineStyle}
+        >
+          <MediaBadge />
+          <ResizeHandles />
+        </div>
       </div>
     </>
   );
 };
 
 export const CanvasToolsContainer = () => {
   const outlineStyle = useOutlineStyle();
-  useSetCanvasWidth();
 
   return (
     <>