From a6a5c90a73e55216481d82127420dfad03cb48b8 Mon Sep 17 00:00:00 2001
From: Jeremy Kahn <jeremyckahn@gmail.com>
Date: Sun, 28 Aug 2022 11:45:26 -0500
Subject: [PATCH] feat: improve message display

---
 src/components/Message/Message.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/Message/Message.tsx b/src/components/Message/Message.tsx
index cdf9845..672a5ce 100644
--- a/src/components/Message/Message.tsx
+++ b/src/components/Message/Message.tsx
@@ -50,24 +50,26 @@ export const Message = ({ message, userId }: MessageProps) => {
   return (
     <Box className="Message">
       <Typography
-        variant="overline"
+        variant="caption"
         display="block"
+        color="grey.400"
         sx={{
           textAlign: message.authorId === userId ? 'right' : 'left',
         }}
       >
-        {userId}
+        {message.authorId}
       </Typography>
       <Box
         sx={{
           backgroundColor,
           margin: 0.5,
-          padding: 1,
+          padding: '0.5em 0.75em',
           borderRadius: 6,
           float: message.authorId === userId ? 'right' : 'left',
           transition: 'background-color 1s',
-          wordBreak: 'break-all',
+          wordBreak: 'break-word',
         }}
+        maxWidth="85%"
       >
         <Markdown components={componentMap} linkTarget="_blank">
           {message.text}