Ensure wide content fits in compact ChatMessage (#18871)

* Ensure wide content fits in compact ChatMessage

* Add changelog entry

Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>

Author: Hirse

packages/fluentui/CHANGELOG.md

@@ -25,6 +25,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix compact hover background in dark themes @Hirse ([#18842](https://github.com/microsoft/fluentui/pull/18842))
 - Fix children conflict with compactBody in `ChatMessage` @chassunc ([#18874](https://github.com/microsoft/fluentui/pull/18874))
 - Fix `Tooltip` trigger order of props being spread @chassunc ([#18875](https://github.com/microsoft/fluentui/pull/18875))
+- Ensure wide content fits in compact ChatMessage @Hirse ([#18871](https://github.com/microsoft/fluentui/pull/18871))
 
 ### Features
 - Add Onyx 600, Silver 100 to color palette and some color tokens @codepretty ([#18827](https://github.com/microsoft/fluentui/pull/18827))

packages/fluentui/react-northstar-prototypes/src/prototypes/compactChat/CompactChatWithAuthor.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Avatar, Chat, ChatItemProps, Flex, Provider, ShorthandCollection } from '@fluentui/react-northstar';
+import { Avatar, Box, Chat, ChatItemProps, Provider, ShorthandCollection, Text } from '@fluentui/react-northstar';
 
 import { robinAvatar, timAvatar } from './compactAvatars';
 
@@ -39,8 +39,15 @@ const items: ShorthandCollection<ChatItemProps> = [
       <Chat.Message
         content={
           <>
-            <Flex variables={{ messageBox: true }}>Replying to Tim</Flex>
-            {'Message with non-text content has box elements on the line below author'}
+            <Box variables={{ quotedReply: true }}>
+              Replying to:
+              <Text truncated>
+                Long message wrapping around the author. The quick brown fox jumps over the lazy dog. Portez ce vieux
+                whisky au juge blond qui fume. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Nechť již
+                hříšné saxofony ďáblů rozezvučí síň úděsnými tóny waltzu, tanga a quickstepu.
+              </Text>
+            </Box>
+            Message with non-text content has box elements on the line below author
           </>
         }
         author="Robin"
@@ -56,19 +63,23 @@ export const CompactChatWithAuthor = () => (
   <Provider
     theme={{
       componentStyles: {
-        Flex: {
+        Box: {
           root: ({ variables: v, theme: { siteVariables } }) => ({
-            ...(v.messageBox && {
+            ...(v.quotedReply && {
               backgroundColor: siteVariables.colorScheme.default.background1,
-              border: `solid 1px ${siteVariables.colorScheme.default.border1}`,
-              borderRadius: '4px',
+              border: `solid ${siteVariables.borderWidth} ${siteVariables.colorScheme.default.border1}`,
+              borderRadius: siteVariables.borderRadiusMedium,
               boxShadow: siteVariables.shadowLevel1,
               clear: 'left',
               padding: '0.3rem',
-              width: 'fit-content',
             }),
           }),
         },
+        Text: {
+          root: ({ props: p }) => ({
+            ...(p.truncated && { display: 'block' }),
+          }),
+        },
       },
     }}
   >

packages/fluentui/react-northstar/src/themes/teams/components/Chat/chatMessageStylesCompact.ts

@@ -58,6 +58,9 @@ export const chatMessageStylesCompact: ComponentSlotStylesPrepared<ChatMessageSt
   compactBody: (): ICSSInJSStyle => ({
     display: 'flex',
     justifyContent: 'space-between',
+    '& > div': {
+      minWidth: 0,
+    },
   }),
 
   reactionGroup: (): ICSSInJSStyle => ({