Fix long word wrapping issue in Chat.tsx and style.css

takoserver · Jun 16, 2024 · 0bfbe43 · 0bfbe43
1 parent f532c58
commit 0bfbe43
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/islands/Chats/Chat.tsx b/islands/Chats/Chat.tsx
@@ -194,7 +194,7 @@ export default function Home(
                 isChoiceUser={isChoiceUser}
             />
 
-            <div class="wrapper">
+            <div class="wrapper w-full">
                 <main
                     class={isChoiceUser ? "p-talk is-inview" : "p-talk"}
                     id="chatmain"

diff --git a/static/style.css b/static/style.css
@@ -598,6 +598,9 @@ html, body {
 
 .c-talk-chat-msg p {
     width: fit-content;
+    max-width: 100%; /* Ensure it doesn't exceed the container width */
+    word-wrap: break-word; /* Break long words */
+    word-break: break-all; /* Ensure long words are broken */
 }
 
 .c-talk-chat.other .c-talk-chat-msg {