fix: TeachingPopover arrow off by a pixel

change/@fluentui-react-teaching-popover-b32cb5ff-1e29-4c94-bb2d-a5ad448d78f9.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Arrow was 1px offset and incorrect box-sizing",
+  "packageName": "@fluentui/react-teaching-popover",
+  "email": "edwardwang.94@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-teaching-popover/src/components/TeachingPopoverBody/useTeachingPopoverBodyStyles.styles.ts

@@ -7,32 +7,34 @@ export const teachingPopoverBodyClassNames: SlotClassNames<TeachingPopoverBodySl
   media: 'fui-TeachingPopoverBody__media',
 };
 
+const popoverBodyDimension = 288;
+
 export const useMediaStyles = makeStyles({
   base: {
     ...shorthands.gridArea('media'),
     ...shorthands.overflow('hidden'),
-    width: '288px',
+    width: `${popoverBodyDimension}px`,
     marginBottom: '12px',
     verticalAlign: 'middle',
     justifyContent: 'center',
     display: 'flex',
   },
   short: {
-    aspectRatio: 288 / 117,
+    aspectRatio: popoverBodyDimension / 117,
     '@supports not (aspect-ratio)': {
       height: '117px',
     },
   },
   medium: {
-    aspectRatio: 288 / 176,
+    aspectRatio: popoverBodyDimension / 176,
     '@supports not (aspect-ratio)': {
       height: '176px',
     },
   },
   tall: {
-    aspectRatio: 288 / 288,
+    aspectRatio: popoverBodyDimension / popoverBodyDimension,
     '@supports not (aspect-ratio)': {
-      height: '288px',
+      height: `${popoverBodyDimension}px`,
     },
   },
 });

packages/react-components/react-teaching-popover/src/components/TeachingPopoverSurface/useTeachingPopoverSurfaceStyles.styles.ts

@@ -12,9 +12,8 @@ const useStyles = makeStyles({
   root: {
     ...shorthands.padding(tokens.spacingVerticalL, tokens.spacingVerticalL),
     ...shorthands.borderRadius(tokens.borderRadiusXLarge),
-    ...shorthands.borderWidth('0px'),
-    width: '320px',
-    boxSizing: 'border-box',
+    width: '288px',
+    boxSizing: 'content-box',
   },
 });