From 2795d4686e0930b85dec0f3f3c106a38858b180c Mon Sep 17 00:00:00 2001
From: Lukian <lulul7018@gmail.com>
Date: Wed, 9 Apr 2025 15:50:36 +0200
Subject: [PATCH] fix: fixed message text wraping

---
 front/src/components/MessageComponent.tsx | 24 ++++++++++++-----------
 front/src/styles/MessageComponent.css     | 11 +++++++++++
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/front/src/components/MessageComponent.tsx b/front/src/components/MessageComponent.tsx
index ac043b0..bce2ee6 100644
--- a/front/src/components/MessageComponent.tsx
+++ b/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>:{" "}
-            {message.content.split(" ").map((word, index) => {
-                if (word.startsWith("@")) {
-                    const mention = message.mentions.find((mention) => `@${mention.username}` === word);
-                    if (mention) {
-                        return <span><Link key={index} to={`/u/${mention.username}`}>{word}</Link> </span>;
+            <div className="message-content">
+                <Link to={`/u/${message.username}`}>{message.username}</Link>:{" "}
+                {message.content.split(" ").map((word, index) => {
+                    if (word.startsWith("@")) {
+                        const mention = message.mentions.find((mention) => `@${mention.username}` === word);
+                        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><Link to={word}>{word}</Link> </span>
-                }
-                return <span key={index}>{word} </span>;
-            })}
+                    return <span key={index}>{word} </span>;
+                })}
+            </div>
             <p>{new Date(message.date * 1000).toLocaleString()}</p>
             <div>
                 {message.content.toLocaleLowerCase().includes("gros cochon") && (
diff --git a/front/src/styles/MessageComponent.css b/front/src/styles/MessageComponent.css
index c0378dd..6a174ed 100644
--- a/front/src/styles/MessageComponent.css
+++ b/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;
+}