From 646dcfccf9f29868a6154d7d3af2dde3338c6d10 Mon Sep 17 00:00:00 2001
From: Nathan Marrs <nathanielmarrs@gmail.com>
Date: Fri, 20 May 2022 00:04:34 -0700
Subject: [PATCH] Canvas: Implement minimum element size + center constraint UX
 (#49294)

---
 public/app/features/canvas/runtime/element.tsx                 | 3 +++
 .../app/plugins/panel/canvas/editor/ConstraintSelectionBox.tsx | 1 +
 2 files changed, 4 insertions(+)

diff --git a/public/app/features/canvas/runtime/element.tsx b/public/app/features/canvas/runtime/element.tsx
index 2578f3d2f35..b83e8543265 100644
--- a/public/app/features/canvas/runtime/element.tsx
+++ b/public/app/features/canvas/runtime/element.tsx
@@ -83,6 +83,9 @@ export class ElementState implements LayerElement {
 
     const style: React.CSSProperties = {
       position: 'absolute',
+      // Minimum element size is 10x10
+      minWidth: '10px',
+      minHeight: '10px',
     };
 
     const translate = ['0px', '0px'];
diff --git a/public/app/plugins/panel/canvas/editor/ConstraintSelectionBox.tsx b/public/app/plugins/panel/canvas/editor/ConstraintSelectionBox.tsx
index fb6b5497568..8f8237763de 100644
--- a/public/app/plugins/panel/canvas/editor/ConstraintSelectionBox.tsx
+++ b/public/app/plugins/panel/canvas/editor/ConstraintSelectionBox.tsx
@@ -50,6 +50,7 @@ export const ConstraintSelectionBox = ({
       height="75.000000pt"
       viewBox="0 0 228.000000 228.000000"
       preserveAspectRatio="xMidYMid meet"
+      style={{ marginBottom: '4.8px' }}
     >
       <g transform="translate(0.000000,228.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
         <path