fix: scrollbar showing without overflow (#543)

Dun-sin · Oct 24, 2023 · 1ba5c94 · 1ba5c94 · vercel · Oct 24, 2023
1 parent dd0dc79
commit 1ba5c94
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/client/src/components/Chat.jsx b/client/src/components/Chat.jsx
@@ -217,7 +217,7 @@ const Chat = () => {
 		}
 		setMessage(e.target.value);
 		adjustTextareaHeight(inputRef);
-		e.target.style.height = '45px';
+		e.target.style.height = '48px';
 		e.target.style.height = `${e.target.scrollHeight}px`;
 	}, 500);
 
@@ -320,7 +320,7 @@ const Chat = () => {
 				</p>
 				<ScrollToBottom
 					initialScrollBehavior="auto"
-					className="h-[100%] md:max-h-full overflow-y-scroll w-full scroll-smooth"
+					className="h-[100%] md:max-h-full overflow-y-auto w-full scroll-smooth"
 				>
 					{sortedMessages.map(
 						({ senderId: sender, id, message, time, status, isEdited, oldMessages, containsBadword, isRead }) => {

diff --git a/client/src/components/Chat/MessageInput.jsx b/client/src/components/Chat/MessageInput.jsx
@@ -58,7 +58,7 @@ const MessageInput = ({
         <div className="w-full flex items-center justify-between bg-secondary rounded-l-md max-h-[150px] relative">
           <textarea
             placeholder="Press Ctrl + Enter to send a message"
-            className="h-[45px] focus:outline-none w-[96%] bg-secondary text-white rounded-[15px] resize-none pl-[22px] pr-[22px] py-[10px] text-[18px] placeholder-shown:align-middle min-h-[40px] max-h-[100px] overflow-y-scroll"
+            className="h-[48px] focus:outline-none w-[96%] bg-secondary text-white rounded-[15px] resize-none pl-[22px] pr-[22px] py-[10px] text-[18px] placeholder-shown:align-middle min-h-[40px] max-h-[100px] overflow-y-auto"
             ref={inputRef}
             value={message}
             onChange={handleTypingStatus}