[BugFix] background picker remove use of after

change-beta/@azure-communication-react-fc1f9875-02b8-40f4-86fd-d9523d648b3b.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Background blur",
+  "comment": "Fix rendering issues in the video effects picker",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-fc1f9875-02b8-40f4-86fd-d9523d648b3b.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Background blur",
+  "comment": "Fix rendering issues in the video effects picker",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/VideoEffects/VideoEffectsItem.styles.tsx

@@ -39,45 +39,19 @@ export const videoEffectsItemContainerStyles = (args: {
       cursor: args.disabled ? 'default' : 'pointer',
       height: VideoEffectsItemContainerHeight,
       width: VideoEffectsItemContainerWidth,
-      border: args.isSelected
+      outlineOffset: '-1px',
+      outline: args.isSelected
         ? `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`
         : `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`,
-      // Use :after to display a border element. This is used to prevent the background image
-      // resizing when the border thichkness is changed. We also want the border to be inside
-      // the frame of the container, i.e. we want it to expand inwards and not outwards when
-      // border thickness changes from hover/selection.
-      ':after': {
-        content: '""',
+      ':hover': {
         boxSizing: 'border-box',
-        height: VideoEffectsItemContainerBorderHeight,
         width: VideoEffectsItemContainerBorderWidth,
-        borderRadius: '0.25rem',
-        transform: 'translate(-1rem, -3.3rem)',
-        display: 'flex'
-      },
-      ':hover': {
-        ':after': {
-          border:
-            args.disabled && !args.isSelected
-              ? `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`
-              : `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`,
-          transform: 'translate(-1rem, -3.3rem)'
-        }
-      },
-      ':focus': {
-        ':after': {
-          outline: 'none',
-          transform: 'translate(-0.1rem, -0.2rem)',
-          ':hover': {
-            transform: 'translate(-0.1rem, -0.2rem)'
-          }
-        }
-      },
-      ':active': {
-        ':after': {
-          outline: 'none',
-          transform: 'translate(-1rem, -3.3rem)'
-        }
+        height: VideoEffectsItemContainerBorderHeight,
+        outlineOffset: '-1px',
+        outline:
+          args.disabled && !args.isSelected
+            ? `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`
+            : `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`
       }
     }
   };