diff --git a/public/app/features/canvas/runtime/element.tsx b/public/app/features/canvas/runtime/element.tsx
index 5062d017edd..03f5214916d 100644
--- a/public/app/features/canvas/runtime/element.tsx
+++ b/public/app/features/canvas/runtime/element.tsx
@@ -197,7 +197,7 @@ export class ElementState implements LayerElement {
     }
   }
 
-  setPlacementFromConstraint(elementContainer?: DOMRect, parentContainer?: DOMRect) {
+  setPlacementFromConstraint(elementContainer?: DOMRect, parentContainer?: DOMRect, transformScale = 1) {
     const { constraint } = this.options;
     const { vertical, horizontal } = constraint ?? {};
 
@@ -214,25 +214,25 @@ export class ElementState implements LayerElement {
 
     const relativeTop =
       elementContainer && parentContainer
-        ? Math.round(elementContainer.top - parentContainer.top - parentBorderWidth)
+        ? Math.round(elementContainer.top - parentContainer.top - parentBorderWidth) / transformScale
         : 0;
     const relativeBottom =
       elementContainer && parentContainer
-        ? Math.round(parentContainer.bottom - parentBorderWidth - elementContainer.bottom)
+        ? Math.round(parentContainer.bottom - parentBorderWidth - elementContainer.bottom) / transformScale
         : 0;
     const relativeLeft =
       elementContainer && parentContainer
-        ? Math.round(elementContainer.left - parentContainer.left - parentBorderWidth)
+        ? Math.round(elementContainer.left - parentContainer.left - parentBorderWidth) / transformScale
         : 0;
     const relativeRight =
       elementContainer && parentContainer
-        ? Math.round(parentContainer.right - parentBorderWidth - elementContainer.right)
+        ? Math.round(parentContainer.right - parentBorderWidth - elementContainer.right) / transformScale
         : 0;
 
     const placement: Placement = {};
 
-    const width = elementContainer?.width ?? 100;
-    const height = elementContainer?.height ?? 100;
+    const width = (elementContainer?.width ?? 100) / transformScale;
+    const height = (elementContainer?.height ?? 100) / transformScale;
 
     switch (vertical) {
       case VerticalConstraint.Top:
@@ -427,12 +427,12 @@ export class ElementState implements LayerElement {
 
   // kinda like:
   // https://github.com/grafana/grafana-edge-app/blob/main/src/panels/draw/WrapItem.tsx#L44
-  applyResize = (event: OnResize) => {
+  applyResize = (event: OnResize, transformScale = 1) => {
     const placement = this.options.placement!;
 
     const style = event.target.style;
-    const deltaX = event.delta[0];
-    const deltaY = event.delta[1];
+    const deltaX = event.delta[0] / transformScale;
+    const deltaY = event.delta[1] / transformScale;
     const dirLR = event.direction[0];
     const dirTB = event.direction[1];
 
diff --git a/public/app/features/canvas/runtime/scene.tsx b/public/app/features/canvas/runtime/scene.tsx
index 6298bc38812..8cadc1d15cd 100644
--- a/public/app/features/canvas/runtime/scene.tsx
+++ b/public/app/features/canvas/runtime/scene.tsx
@@ -403,6 +403,7 @@ export class Scene {
       },
       origin: false,
       className: this.styles.selected,
+      // rootContainer: this.transformComponentRef?.current?.instance.contentComponent, // TODO why does this not work?
     })
       .on('click', (event) => {
         const targetedElement = this.findElementByTarget(event.target);
@@ -465,7 +466,11 @@ export class Scene {
       .on('dragEnd', (event) => {
         const targetedElement = this.findElementByTarget(event.target);
         if (targetedElement) {
-          targetedElement.setPlacementFromConstraint();
+          targetedElement.setPlacementFromConstraint(
+            undefined,
+            undefined,
+            this.transformComponentRef?.current?.instance.transformState.scale
+          );
         }
 
         this.moved.next(Date.now());
@@ -481,13 +486,17 @@ export class Scene {
             vertical: VerticalConstraint.Top,
             horizontal: HorizontalConstraint.Left,
           };
-          targetedElement.setPlacementFromConstraint();
+          targetedElement.setPlacementFromConstraint(
+            undefined,
+            undefined,
+            this.transformComponentRef?.current?.instance.transformState.scale
+          );
         }
       })
       .on('resize', (event) => {
         const targetedElement = this.findElementByTarget(event.target);
         if (targetedElement) {
-          targetedElement.applyResize(event);
+          targetedElement.applyResize(event, this.transformComponentRef?.current?.instance.transformState.scale);
 
           if (this.connections.connectionsNeedUpdate(targetedElement) && this.moveableActionCallback) {
             this.moveableActionCallback(true);
@@ -523,7 +532,11 @@ export class Scene {
             targetedElement.tempConstraint = undefined;
           }
 
-          targetedElement.setPlacementFromConstraint();
+          targetedElement.setPlacementFromConstraint(
+            undefined,
+            undefined,
+            this.transformComponentRef?.current?.instance.transformState.scale
+          );
         }
       });