ui: modified ui for long message

Bikram-ghuku · May 2, 2024 · 08fe88e · 08fe88e
1 parent 6e2f159
commit 08fe88e
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git 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
@@ -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>