Fix width for code snippets sent in messages (#4633)

vhuseinova-msft · web-flow · commit 7025b3374565 · 2024-05-17T14:45:54.000-07:00
diff --git a/change-beta/@azure-communication-react-fd1835e0-c025-40f4-8268-e05e3ca0bcbf.json b/change-beta/@azure-communication-react-fd1835e0-c025-40f4-8268-e05e3ca0bcbf.json
@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "MessageThread",
+  "comment": "Fix width for code snippets sent in messages",
+  "packageName": "@azure/communication-react",
+  "email": "98852890+vhuseinova-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@azure-communication-react-fd1835e0-c025-40f4-8268-e05e3ca0bcbf.json b/change/@azure-communication-react-fd1835e0-c025-40f4-8268-e05e3ca0bcbf.json
@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "MessageThread",
+  "comment": "Fix width for code snippets sent in messages",
+  "packageName": "@azure/communication-react",
+  "email": "98852890+vhuseinova-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/src/components/styles/MessageThread.styles.ts b/packages/react-components/src/components/styles/MessageThread.styles.ts
@@ -291,6 +291,9 @@ export const useChatMessageStyles = makeStyles({
       ...shorthands.borderWidth('1px'),
       ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),
       borderLeftWidth: '4px'
+    },
+    '& code': {
+      whiteSpace: 'pre-wrap'
     }
   },
   bodyWithPlaceholderImage: {
