messaging client: fix overflowing long message in bubble

uwcirg · Feb 23, 2024 · 7947ee4 · 7947ee4
1 parent 647035c
commit 7947ee4
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/src/components/MessagingView.tsx b/src/components/MessagingView.tsx
@@ -1548,7 +1548,15 @@ export default class MessagingView extends React.Component<
     let messageGroup = (
       <Grid item xs={11} md={10} lg={8}>
         <Stack direction={"column"} alignItems={align} paddingBottom={0.5}>
-          <Stack direction={"row"} alignItems={"center"} spacing={1}>
+          <Stack
+            direction={"row"}
+            alignItems={"center"}
+            spacing={1}
+            sx={{
+              whiteSpace: "normal",
+              wordBreak: "break-word",
+            }}
+          >
             {bubbleAndPriorityRow}
           </Stack>
           {themes.length > 0 && (
@@ -1576,7 +1584,7 @@ export default class MessagingView extends React.Component<
                 sx={{
                   whiteSpace: "pre", // preserve line break character
                   textAlign: incoming ? "left" : "right",
-                  color: error ? red[900] : "#0009"
+                  color: error ? red[900] : "#0009",
                 }}
               >
                 {comment}