Fix playlist item click triggering when opening context menu (#32923)

Previously, clicking the 3-dot menu button on a playlist item would
simultaneously play the video and open the context menu. This occurred
because the click event was bubbling up from the menu button to the
parent PlaylistItemContainer, which has an onClick handler for playing
items.

This change wraps the StyledButtonMenu component in a div with
stopPropagation to prevent click events from bubbling to the parent
container. This allows the menu to open and close normally without
triggering the video playback.

components/playlist/content/browser/resources/components/contextualMenu.tsx

@@ -59,34 +59,35 @@ export default function ContextualMenuAnchorButton ({
   }, [visible])
 
   return (
-    <StyledButtonMenu
-      visible={visible}
-      onChange={({ isOpen }) => {
-        if (isOpen) onShowMenu?.()
-        setOpen(isOpen)
-      }}
-      onClose={() => onDismissMenu?.()}
-      isOpen={open}
-    >
-      <StyledButton kind='plain-faint' size='small' slot='anchor-content'>
-        <Icon name='more-horizontal' />
-      </StyledButton>
-      {items
-        .filter((i) => i)
-        .map((i) => (
-          <leo-menu-item
-            key={i!.name}
-            onClick={(e) => {
-              e.stopPropagation()
-              i!.onClick()
-            }}
-          >
-            <StyledRow>
-              <span>{i!.name}</span>
-              <Icon name={i!.iconName} />
-            </StyledRow>
-          </leo-menu-item>
-        ))}
-    </StyledButtonMenu>
+    <div onClick={(e) => e.stopPropagation()}>
+      <StyledButtonMenu
+        visible={visible}
+        onChange={({ isOpen }) => {
+          if (isOpen) onShowMenu?.()
+          setOpen(isOpen)
+        }}
+        onClose={() => onDismissMenu?.()}
+        isOpen={open}
+      >
+        <StyledButton kind='plain-faint' size='small' slot='anchor-content'>
+          <Icon name='more-horizontal' />
+        </StyledButton>
+        {items
+          .filter((i) => i)
+          .map((i) => (
+            <leo-menu-item
+              key={i!.name}
+              onClick={(e) => {
+                i!.onClick()
+              }}
+            >
+              <StyledRow>
+                <span>{i!.name}</span>
+                <Icon name={i!.iconName} />
+              </StyledRow>
+            </leo-menu-item>
+          ))}
+      </StyledButtonMenu>
+    </div>
   )
 }