[@mantine/core] Fix arrow overlaying Popover, Tooltip and HoverCard content in some cases (#7148)

Add clip paths to floating arrow to prevent larger arrow sizes from being visible when hovering a child component (like in menus)

Author: th3fallen

packages/@mantine/core/src/components/Floating/FloatingArrow/get-arrow-position-styles.ts

@@ -96,6 +96,7 @@ export function getArrowPositionStyles({
       right: arrowPlacement,
       borderLeftColor: 'transparent',
       borderBottomColor: 'transparent',
+      clipPath: 'polygon(100% 0, 0 0, 100% 100%)',
     };
   }
 
@@ -106,6 +107,7 @@ export function getArrowPositionStyles({
       left: arrowPlacement,
       borderRightColor: 'transparent',
       borderTopColor: 'transparent',
+      clipPath: 'polygon(0 100%, 0 0, 100% 100%)',
     };
   }
 
@@ -116,6 +118,7 @@ export function getArrowPositionStyles({
       bottom: arrowPlacement,
       borderTopColor: 'transparent',
       borderLeftColor: 'transparent',
+      clipPath: 'polygon(0 100%, 100% 100%, 100% 0)',
     };
   }
 
@@ -126,6 +129,7 @@ export function getArrowPositionStyles({
       top: arrowPlacement,
       borderBottomColor: 'transparent',
       borderRightColor: 'transparent',
+      clipPath: 'polygon(0 100%, 0 0, 100% 0)',
     };
   }