Add multi line messages supports

matrixgw_frontend/src/widgets/messages/RoomMessagesList.tsx

@@ -44,7 +44,7 @@ export function RoomMessagesList(p: {
   // Automatically scroll to bottom when number of messages change
   React.useEffect(() => {
     if (messagesEndRef)
-      messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+      messagesEndRef.current?.scrollIntoView({ behavior: "instant" });
   }, [p.mgr.messages.length]);
 
   return (
@@ -200,6 +200,8 @@ function RoomMessage(p: {
           maxWidth: "100%",
           transition: "all 0.01s ease-in",
           position: "relative",
+          display: "flex",
+          flexDirection: "row",
         }}
         component="div"
         sx={{
@@ -214,8 +216,10 @@ function RoomMessage(p: {
       >
         <Typography variant="caption">
           &nbsp; {p.message.time_sent_dayjs.format("HH:mm")}
-        </Typography>{" "}
-        &nbsp;&nbsp;&nbsp;
+        </Typography>
+
+        {/** Message itself */}
+        <div style={{ marginLeft: "15px", whiteSpace: "pre-wrap" }}>
           {p.message.image ? (
             <img
               onClick={() => setShowImageFullScreen(true)}
@@ -231,6 +235,7 @@ function RoomMessage(p: {
           ) : (
             p.message.content
           )}
+        </div>
         <ButtonGroup
           className="buttons"
           size="small"
@@ -362,6 +367,7 @@ function RoomMessage(p: {
               type="text"
               fullWidth
               variant="standard"
+              multiline
               value={editMessage}
               onChange={(e) => setEditMessage(e.target.value)}
             />