Tweak interactive tooltip buffer area allow for overshoot

This uses a larger buffer area around the tooltip, as it easy to overshoot and
mouse the cursor past the tooltip.

Fixes element-hq/element-web#10400

src/components/views/elements/InteractiveTooltip.js

@@ -37,10 +37,9 @@ function getOrCreateContainer() {
     return container;
 }
 
-function isInRect(x, y, rect, { buffer = 0 } = {}) {
+function isInRect(x, y, rect) {
     const { top, right, bottom, left } = rect;
-    return x >= (left - buffer) && x <= (right + buffer)
-        && y >= (top - buffer) && y <= (bottom + buffer);
+    return x >= left && x <= right && y >= top && y <= bottom;
 }
 
 /**
@@ -163,14 +162,17 @@ export default class InteractiveTooltip extends React.Component {
         //
         // As long as the mouse remains inside the safe area, the tooltip will
         // stay open.
-        const buffer = 10;
-        if (
-            isInRect(x, y, contentRect, { buffer }) ||
-            isInRect(x, y, targetRect)
-        ) {
+        const buffer = 50;
+        if (isInRect(x, y, targetRect)) {
             return;
         }
         if (this.canTooltipFitAboveTarget()) {
+            const contentRectWithBuffer = {
+                top: contentRect.top - buffer,
+                right: contentRect.right + buffer,
+                bottom: contentRect.bottom,
+                left: contentRect.left - buffer,
+            };
             const trapezoidLeft = {
                 top: contentRect.bottom,
                 right: targetRect.left,
@@ -191,13 +193,20 @@ export default class InteractiveTooltip extends React.Component {
             };
 
             if (
+                isInRect(x, y, contentRectWithBuffer) ||
                 isInUpperRightHalf(x, y, trapezoidLeft) ||
                 isInRect(x, y, trapezoidCenter) ||
                 isInUpperLeftHalf(x, y, trapezoidRight)
             ) {
                 return;
             }
         } else {
+            const contentRectWithBuffer = {
+                top: contentRect.top,
+                right: contentRect.right + buffer,
+                bottom: contentRect.bottom + buffer,
+                left: contentRect.left - buffer,
+            };
             const trapezoidLeft = {
                 top: targetRect.top,
                 right: targetRect.left,
@@ -218,6 +227,7 @@ export default class InteractiveTooltip extends React.Component {
             };
 
             if (
+                isInRect(x, y, contentRectWithBuffer) ||
                 isInLowerRightHalf(x, y, trapezoidLeft) ||
                 isInRect(x, y, trapezoidCenter) ||
                 isInLowerLeftHalf(x, y, trapezoidRight)