refac

src/lib/components/chat/Messages.svelte

@@ -29,7 +29,6 @@
 	$: if (autoScroll && bottomPadding) {
 		(async () => {
 			await tick();
-
 			scrollToBottom();
 		})();
 	}
@@ -167,7 +166,7 @@
 		await tick();
 
 		const element = document.getElementById('messages-container');
-		autoScroll = element.scrollHeight - element.scrollTop === element.clientHeight - 40;
+		autoScroll = element.scrollHeight - element.scrollTop <= element.clientHeight + 50;
 
 		setTimeout(() => {
 			scrollToBottom();
@@ -216,7 +215,7 @@
 		await tick();
 
 		const element = document.getElementById('messages-container');
-		autoScroll = element.scrollHeight - element.scrollTop === element.clientHeight - 40;
+		autoScroll = element.scrollHeight - element.scrollTop <= element.clientHeight + 50;
 
 		setTimeout(() => {
 			scrollToBottom();

src/lib/components/layout/Sidebar.svelte

@@ -89,10 +89,14 @@
 	bind:this={navElement}
 	class="h-screen {show
 		? ''
-		: '-translate-x-[260px] w-[0px]'}  w-[260px] bg-black text-gray-200 shadow-2xl text-sm transition z-40 fixed top-0 left-0 lg:relative
+		: '-translate-x-[260px] w-[0px]'}  w-[260px] min-w[260px] bg-black text-gray-200 shadow-2xl text-sm transition z-40 fixed top-0 left-0 lg:relative
         "
 >
-	<div class="py-2.5 my-auto flex flex-col justify-between h-screen {show ? '' : 'invisible'}">
+	<div
+		class="py-2.5 my-auto flex flex-col justify-between h-screen w-[260px] {show
+			? ''
+			: 'invisible'}"
+	>
 		<div class="px-2.5 flex justify-center space-x-2">
 			<button
 				id="sidebar-new-chat-button"

src/routes/(app)/+page.svelte

@@ -794,8 +794,6 @@
 			class=" pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-80"
 			id="messages-container"
 			on:scroll={(e) => {
-				console.log(e.target.scrollHeight, e.target.scrollTop, e.target.clientHeight);
-				console.log(e.target.scrollHeight - e.target.scrollTop, e.target.clientHeight);
 				autoScroll = e.target.scrollHeight - e.target.scrollTop <= e.target.clientHeight + 50;
 			}}
 		>

src/routes/(app)/c/[id]/+page.svelte

@@ -824,8 +824,6 @@
 				class=" pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0"
 				id="messages-container"
 				on:scroll={(e) => {
-					console.log(e.target.scrollHeight, e.target.scrollTop, e.target.clientHeight);
-					console.log(e.target.scrollHeight - e.target.scrollTop, e.target.clientHeight);
 					autoScroll = e.target.scrollHeight - e.target.scrollTop <= e.target.clientHeight + 50;
 				}}
 			>