Fixes rotation handle size

components/canvas/bounds/rotate-handle.tsx

@@ -1,6 +1,6 @@
-import useHandleEvents from "hooks/useBoundsHandleEvents"
-import styled from "styles"
-import { Bounds } from "types"
+import useHandleEvents from 'hooks/useBoundsHandleEvents'
+import styled from 'styles'
+import { Bounds } from 'types'
 
 export default function Rotate({
   bounds,
@@ -9,22 +9,30 @@ export default function Rotate({
   bounds: Bounds
   size: number
 }) {
-  const events = useHandleEvents("rotate")
+  const events = useHandleEvents('rotate')
 
   return (
-    <StyledRotateHandle
-      cursor="grab"
-      cx={bounds.width / 2}
-      cy={size * -2}
-      r={size / 2}
-      {...events}
-    />
+    <g cursor="grab" {...events}>
+      <circle
+        cx={bounds.width / 2}
+        cy={size * -2}
+        r={size * 2}
+        fill="transparent"
+        stroke="none"
+      />
+      <StyledRotateHandle
+        cx={bounds.width / 2}
+        cy={size * -2}
+        r={size / 2}
+        pointerEvents="none"
+      />
+    </g>
   )
 }
 
-const StyledRotateHandle = styled("circle", {
-  stroke: "$bounds",
-  fill: "#fff",
+const StyledRotateHandle = styled('circle', {
+  stroke: '$bounds',
+  fill: '#fff',
   zStrokeWidth: 2,
-  cursor: "grab",
+  cursor: 'grab',
 })