refac: styling

src/lib/components/app/AppControls.svelte

@@ -5,7 +5,7 @@
 	let selected = '';
 </script>
 
-<div class="min-w-[4.5rem] bg-gray-50 dark:bg-gray-950 flex gap-2.5 flex-col pt-10">
+<div class="min-w-[4.5rem] bg-gray-50 dark:bg-gray-950 flex gap-2.5 flex-col pt-9">
 	<div class="flex justify-center relative">
 		{#if selected === 'home'}
 			<div class="absolute top-0 left-0 flex h-full">

src/routes/+layout.svelte

@@ -153,6 +153,10 @@
 	};
 
 	const channelEventHandler = async (event) => {
+		if (event.data?.type === 'typing') {
+			return;
+		}
+
 		// check url path
 		const channel = $page.url.pathname.includes(`/channels/${event.channel_id}`);
 
@@ -359,7 +363,7 @@
 		<div class="flex flex-row h-screen">
 			<AppControls />
 
-			<div class="w-full flex-1">
+			<div class="w-full flex-1 max-w-[calc(100%-4.5rem)]">
 				<slot />
 			</div>
 		</div>