Fix fallback text wrapping (#806)

<!-- Please read
https://github.com/SableClient/Sable/blob/dev/CONTRIBUTING.md before
submitting your pull request -->

### Description

<!-- Please include a summary of the change. Please also include
relevant motivation and context. List any dependencies that are required
for this change. -->

Fixes #766, updates the wrapping behavior to wrap the message type and
body together rather than separately, as shown in the images in the
issue.

#### Type of change

- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] This change requires a documentation update

### Checklist:

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings

### AI disclosure:

- [ ] Partially AI assisted (clarify which code was AI assisted and
briefly explain what it does).
- [ ] Fully AI generated (explain what all the generated code does in
moderate detail).
<!-- Write any explanation required here, but do not generate the
explanation using AI!! You must prove you understand what the code in
this PR does. -->

Author: 7w1

.changeset/fix-fallback-body-styling.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Fixed the text wrapping behavior of fallback messages.

src/app/components/message/content/FallbackContent.tsx

@@ -1,5 +1,7 @@
 import { Box, Icon, Icons, Text, as, color, config } from 'folds';
 
+import { BreakWord } from '$styles/Text.css';
+
 const warningStyle = { color: color.Warning.Main, opacity: config.opacity.P300 };
 const criticalStyle = { color: color.Critical.Main, opacity: config.opacity.P300 };
 
@@ -18,11 +20,21 @@ export const MessageDeletedContent = as<'div', { children?: never; reason?: stri
 
 export const MessageUnsupportedContent = as<'div', { children?: never; body?: string }>(
   ({ body, ...props }, ref) => (
-    <Box as="span" alignItems="Center" gap="100" style={criticalStyle} {...props} ref={ref}>
+    <Box
+      as="span"
+      alignItems="Center"
+      direction="Row"
+      gap="100"
+      style={criticalStyle}
+      {...props}
+      ref={ref}
+    >
       <Icon size="50" src={Icons.Warning} />
-      <i>Unsupported message</i>
-      {body && `: ${body}`}
-      {!body && ' (no body)'}
+      <span className={BreakWord} style={{ flex: '1 1 auto', minWidth: 0 }}>
+        <i>Unsupported message</i>
+        {body && `: ${body}`}
+        {!body && ' (no body)'}
+      </span>
     </Box>
   )
 );
@@ -51,11 +63,21 @@ export const MessageNotDecryptedContent = as<'div', { children?: never }>(({ ...
 // display body of the message if it is available, as it may give some clue about why the message is broken
 export const MessageBrokenContent = as<'div', { children?: never; body?: string }>(
   ({ body, ...props }, ref) => (
-    <Box as="span" alignItems="Center" gap="100" style={criticalStyle} {...props} ref={ref}>
+    <Box
+      as="span"
+      alignItems="Center"
+      direction="Row"
+      gap="100"
+      style={criticalStyle}
+      {...props}
+      ref={ref}
+    >
       <Icon size="50" src={Icons.Warning} />
-      <i>Broken message</i>
-      {body && `: ${body}`}
-      {!body && ' (no body)'}
+      <span className={BreakWord} style={{ flex: '1 1 auto', minWidth: 0 }}>
+        <i>Broken message</i>
+        {body && `: ${body}`}
+        {!body && ' (no body)'}
+      </span>
     </Box>
   )
 );