Fix for chat alignment

grai-io · Nov 13, 2023 · 1a78d1a · 1a78d1a
1 parent 5fb9dd2
commit 1a78d1a
Showing 1 changed file with 42 additions and 38 deletions.
diff --git a/grai-frontend/src/components/chat/ChatMessage.tsx b/grai-frontend/src/components/chat/ChatMessage.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import { Avatar, Box, Grid } from "@mui/material"
+import { Avatar, Box } from "@mui/material"
 import theme from "theme"
 import { GraiIconSmall } from "components/icons"
 import Markdown from "components/utils/Markdown"
@@ -58,29 +58,33 @@ const ChatMessage: React.FC<ChatMessageProps> = ({ groupedChat }) => {
   }
 
   return (
-    <Grid container spacing={2} sx={{ mb: 2 }}>
-      {side === "left" && (
-        <Grid
-          item
-          sx={{
-            display: "flex",
-            justifyContent: "flex-end",
-            flexDirection: "column",
-          }}
-        >
-          <Avatar
-            sx={{
-              backgroundColor: "white",
-              borderColor: rightBgColor,
-              borderWidth: 2,
-              borderStyle: "solid",
-            }}
-          >
-            <GraiIconSmall />
-          </Avatar>
-        </Grid>
-      )}
-      <Grid item xs={11}>
+    <Box sx={{ display: "flex", mb: 2 }}>
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "flex-end",
+          flexDirection: "column",
+          width: "48px",
+          mr: 1,
+        }}
+      >
+        <Box>
+          {side === "left" && (
+            <Avatar
+              sx={{
+                backgroundColor: "white",
+                borderColor: rightBgColor,
+                borderWidth: 2,
+                borderStyle: "solid",
+              }}
+            >
+              <GraiIconSmall />
+            </Avatar>
+          )}
+        </Box>
+      </Box>
+
+      <Box sx={{ width: "100%" }}>
         {messages.map((msg, i) => (
           <Box
             key={i}
@@ -108,20 +112,20 @@ const ChatMessage: React.FC<ChatMessageProps> = ({ groupedChat }) => {
             </Box>
           </Box>
         ))}
-      </Grid>
-      {side === "right" && (
-        <Grid
-          item
-          sx={{
-            display: "flex",
-            justifyContent: "flex-end",
-            flexDirection: "column",
-          }}
-        >
-          <Avatar />
-        </Grid>
-      )}
-    </Grid>
+      </Box>
+
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "flex-end",
+          flexDirection: "column",
+          width: "48px",
+          ml: 1,
+        }}
+      >
+        {side === "right" && <Avatar />}
+      </Box>
+    </Box>
   )
 }