From 08fe88eae4430f3cd8b2f16d9ae20f71cb4701b7 Mon Sep 17 00:00:00 2001
From: Bikram Ghuku <bikramghuku05@gmail.com>
Date: Thu, 2 May 2024 11:35:28 +0530
Subject: [PATCH] ui: modified ui for long message

---
 src/components/MessageElement.tsx | 4 ++--
 src/components/Messages.tsx       | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/MessageElement.tsx b/src/components/MessageElement.tsx
index 225704e..0c70c46 100644
--- a/src/components/MessageElement.tsx
+++ b/src/components/MessageElement.tsx
@@ -20,7 +20,7 @@ function MessageElement({ messageInfo }: { messageInfo: message }) {
 						<div>{selfData.name}</div>
 						<div>{messageInfo.timeStamp}</div>
 					</div>
-					<div className="bg-[#00a3ff] rounded-bl-lg rounded-tl-lg rounded-br-lg w-fit text-end p-2 text-white">
+					<div className="bg-[#00a3ff] rounded-bl-lg rounded-tl-lg rounded-br-lg w-fit text-end p-2 text-white max-w-[25vw] self-end break-words h-auto">
 						{messageInfo.message}
 					</div>
 				</div>
@@ -39,7 +39,7 @@ function MessageElement({ messageInfo }: { messageInfo: message }) {
 						<div className="text-[0.75rem]">{messageInfo.user}</div>
 						<div className="text-[0.75rem]">{messageInfo.timeStamp}</div>
 					</div>
-					<div className="dark:bg-[#292929] rounded-bl-lg rounded-tr-lg rounded-br-lg w-fit text-end flex-1 p-2 bg-white">
+					<div className="dark:bg-[#292929] rounded-bl-lg rounded-tr-lg rounded-br-lg w-fit text-end flex-1 p-2 bg-white max-w-[25vw] self-end break-words">
 						{messageInfo.message}
 					</div>
 				</div>
diff --git a/src/components/Messages.tsx b/src/components/Messages.tsx
index c5e5d8e..a44fbc8 100644
--- a/src/components/Messages.tsx
+++ b/src/components/Messages.tsx
@@ -47,7 +47,7 @@ function Messages({
 	return (
 		<div className="flex flex-col w-full overflow-x-hidden overflow-y-scroll lg:h-[75vh] h-[70vh] [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
 			{message?.map((value, index) => (
-				<div className="max-h-10 mb-10" key={index}>
+				<div className="mb-10" key={index}>
 					<MessageElement messageInfo={value} />
 					<div ref={messaChaRef} />
 				</div>