From a5a52e020f462faae42c8392fdcb30d74423cc4b Mon Sep 17 00:00:00 2001
From: Edward Wang <edwardwang@microsoft.com>
Date: Tue, 23 Apr 2024 15:45:44 -0700
Subject: [PATCH 1/2] Fix TeachingPopover arrow off by a pixel

Change TeachingPopoverSurface boxSizing to account for shadow borders to help fix arrow placement.

Address PR feedback

Address PR Feedback

Change TeachingPopoverSurface boxSizing to account for shadow borders to help fix arrow placement
---
 ...popover-b32cb5ff-1e29-4c94-bb2d-a5ad448d78f9.json |  7 +++++++
 .../useTeachingPopoverBodyStyles.styles.ts           | 12 +++++++-----
 .../useTeachingPopoverSurfaceStyles.styles.ts        |  5 ++---
 3 files changed, 16 insertions(+), 8 deletions(-)
 create mode 100644 change/@fluentui-react-teaching-popover-b32cb5ff-1e29-4c94-bb2d-a5ad448d78f9.json

diff --git a/change/@fluentui-react-teaching-popover-b32cb5ff-1e29-4c94-bb2d-a5ad448d78f9.json b/change/@fluentui-react-teaching-popover-b32cb5ff-1e29-4c94-bb2d-a5ad448d78f9.json
new file mode 100644
index 0000000000000..85b01ca52e519
--- /dev/null
+++ b/change/@fluentui-react-teaching-popover-b32cb5ff-1e29-4c94-bb2d-a5ad448d78f9.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "visual bug fix",
+  "packageName": "@fluentui/react-teaching-popover",
+  "email": "edwardwang.94@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-teaching-popover/src/components/TeachingPopoverBody/useTeachingPopoverBodyStyles.styles.ts b/packages/react-components/react-teaching-popover/src/components/TeachingPopoverBody/useTeachingPopoverBodyStyles.styles.ts
index 1dcb6cb442619..94e00eb1e05a0 100644
--- a/packages/react-components/react-teaching-popover/src/components/TeachingPopoverBody/useTeachingPopoverBodyStyles.styles.ts
+++ b/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`,
     },
   },
 });
diff --git a/packages/react-components/react-teaching-popover/src/components/TeachingPopoverSurface/useTeachingPopoverSurfaceStyles.styles.ts b/packages/react-components/react-teaching-popover/src/components/TeachingPopoverSurface/useTeachingPopoverSurfaceStyles.styles.ts
index 1c7eca229e1ad..6b872b9652088 100644
--- a/packages/react-components/react-teaching-popover/src/components/TeachingPopoverSurface/useTeachingPopoverSurfaceStyles.styles.ts
+++ b/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',
   },
 });
 

From e8e476aa2c2b6f99c38e96b4789d09fd20cb038d Mon Sep 17 00:00:00 2001
From: EdDaWord <edwardwang.94@gmail.com>
Date: Fri, 26 Apr 2024 13:00:52 -0500
Subject: [PATCH 2/2] Address Phab comments regarding change log

---
 ...t-teaching-popover-b32cb5ff-1e29-4c94-bb2d-a5ad448d78f9.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/change/@fluentui-react-teaching-popover-b32cb5ff-1e29-4c94-bb2d-a5ad448d78f9.json b/change/@fluentui-react-teaching-popover-b32cb5ff-1e29-4c94-bb2d-a5ad448d78f9.json
index 85b01ca52e519..5a983964fee74 100644
--- a/change/@fluentui-react-teaching-popover-b32cb5ff-1e29-4c94-bb2d-a5ad448d78f9.json
+++ b/change/@fluentui-react-teaching-popover-b32cb5ff-1e29-4c94-bb2d-a5ad448d78f9.json
@@ -1,6 +1,6 @@
 {
   "type": "patch",
-  "comment": "visual bug fix",
+  "comment": "fix: Arrow was 1px offset and incorrect box-sizing",
   "packageName": "@fluentui/react-teaching-popover",
   "email": "edwardwang.94@gmail.com",
   "dependentChangeType": "patch"