fix: fixed message text wraping

front/src/components/MessageComponent.tsx

@@ -12,18 +12,20 @@ export default function MessageComponent({ message, user, channel, deleteMessage
     
     return (
         <div key={message.id} className="message">
-            <Link to={`/u/${message.username}`}>{message.username}</Link>:{" "}
+            <div className="message-content">
-            {message.content.split(" ").map((word, index) => {
+                <Link to={`/u/${message.username}`}>{message.username}</Link>:{" "}
-                if (word.startsWith("@")) {
+                {message.content.split(" ").map((word, index) => {
-                    const mention = message.mentions.find((mention) => `@${mention.username}` === word);
+                    if (word.startsWith("@")) {
-                    if (mention) {
+                        const mention = message.mentions.find((mention) => `@${mention.username}` === word);
-                        return <span><Link key={index} to={`/u/${mention.username}`}>{word}</Link> </span>;
+                        if (mention) {
+                            return <span><Link key={index} to={`/u/${mention.username}`}>{word}</Link> </span>;
+                        }
+                    } else if (word.startsWith("https://") || word.startsWith("http://")) {
+                        return <span><Link to={word}>{word}</Link> </span>
                     }
-                } else if (word.startsWith("https://") || word.startsWith("http://")) {
+                    return <span key={index}>{word} </span>;
-                    return <span><Link to={word}>{word}</Link> </span>
+                })}
-                }
+            </div>
-                return <span key={index}>{word} </span>;
-            })}
             <p>{new Date(message.date * 1000).toLocaleString()}</p>
             <div>
                 {message.content.toLocaleLowerCase().includes("gros cochon") && (

front/src/styles/MessageComponent.css

@@ -3,3 +3,14 @@
     border: 1px solid #270722;
     padding: 10px;
 }
+
+.message-content {
+    word-break: break-word;
+    overflow-wrap: break-word;
+    display: -webkit-box;
+    line-clamp: 10;
+    -webkit-line-clamp: 10;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}