From 446f77cdac05ee8af58b38b1a2c44ab085850a49 Mon Sep 17 00:00:00 2001
From: 7w1 <noreply@sl.sable.moe>
Date: Wed, 13 May 2026 15:42:20 -0500
Subject: [PATCH 1/2] fix: fallback body wrapping with type

---
 .changeset/fix-fallback-body-styling.md       |  5 +++++
 .../message/content/FallbackContent.tsx       | 22 ++++++++++++-------
 2 files changed, 19 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/fix-fallback-body-styling.md

diff --git a/.changeset/fix-fallback-body-styling.md b/.changeset/fix-fallback-body-styling.md
new file mode 100644
index 000000000..9c80bbcd0
--- /dev/null
+++ b/.changeset/fix-fallback-body-styling.md
@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Fixed the text wrapping behavior of fallback messages.
diff --git a/src/app/components/message/content/FallbackContent.tsx b/src/app/components/message/content/FallbackContent.tsx
index 9bd012a13..d07332743 100644
--- a/src/app/components/message/content/FallbackContent.tsx
+++ b/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,13 @@ 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 +55,13 @@ 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>
   )
 );

From 1b003df34aeff860c52f84f5f169d3d756f2c74d Mon Sep 17 00:00:00 2001
From: 7w1 <noreply@sl.sable.moe>
Date: Wed, 13 May 2026 15:42:45 -0500
Subject: [PATCH 2/2] formatting

---
 .../message/content/FallbackContent.tsx       | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/app/components/message/content/FallbackContent.tsx b/src/app/components/message/content/FallbackContent.tsx
index d07332743..638e830c3 100644
--- a/src/app/components/message/content/FallbackContent.tsx
+++ b/src/app/components/message/content/FallbackContent.tsx
@@ -20,7 +20,15 @@ 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" direction="Row" 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} />
       <span className={BreakWord} style={{ flex: '1 1 auto', minWidth: 0 }}>
         <i>Unsupported message</i>
@@ -55,7 +63,15 @@ 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" direction="Row" 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} />
       <span className={BreakWord} style={{ flex: '1 1 auto', minWidth: 0 }}>
         <i>Broken message</i>