Fix VideoTile menu button to show on hover when isSpeaking is true (#2721)

* Fix VideoTile menu button to show on hover when isSpeaking is true

* Change files

* Duplicate change files for beta release

* change before element of VideoTIle to after element with pointer-evens set to none

---------

Co-authored-by: Donald McEachern <94866715+dmceachernmsft@users.noreply.github.com>

Author: mgamis-msft

change-beta/@azure-communication-react-0c4622e6-e6ed-4a6d-8601-ed98c8687903.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix VideoTile to show menu button on hover when isSpeaking prop is true",
+  "packageName": "@azure/communication-react",
+  "email": "79475487+mgamis-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-0c4622e6-e6ed-4a6d-8601-ed98c8687903.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix VideoTile to show menu button on hover when isSpeaking prop is true",
+  "packageName": "@azure/communication-react",
+  "email": "79475487+mgamis-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.tsx

@@ -143,6 +143,8 @@ export const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps):
 
   return (
     <Stack styles={rootLayoutStyle}>
+      {wrappedLocalVideoComponent}
+      <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />
       <Stack horizontal={false} styles={innerLayoutStyle} tokens={videoGalleryLayoutGap}>
         {screenShareComponent ? (
           screenShareComponent
@@ -153,8 +155,6 @@ export const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps):
         )}
         {horizontalGallery}
       </Stack>
-      {wrappedLocalVideoComponent}
-      <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />
     </Stack>
   );
 };

packages/react-components/src/components/VideoTile.tsx

@@ -333,19 +333,17 @@ export const VideoTile = (props: VideoTileProps): JSX.Element => {
         rootStyles,
         {
           background: theme.palette.neutralLighter,
-          borderRadius: theme.effects.roundedCorner4,
-          // To ensure that the video tile is focusable when there is a floating video tile
-          zIndex: 1
+          borderRadius: theme.effects.roundedCorner4
         },
         isSpeaking && {
-          '&::before': {
+          '&::after': {
             content: `''`,
             position: 'absolute',
-            zIndex: 1,
             border: `0.25rem solid ${theme.palette.themePrimary}`,
             borderRadius: theme.effects.roundedCorner4,
             width: '100%',
-            height: '100%'
+            height: '100%',
+            pointerEvents: 'none'
           }
         },
         styles?.root