refac: styling

src/lib/components/channel/Channel.svelte

@@ -279,11 +279,12 @@
 			{/if}
 		{:else if threadId !== null}
 			<PaneResizer
-				class="relative flex w-[3px] items-center justify-center bg-background group bg-gray-50 dark:bg-gray-850"
+				class="relative flex items-center justify-center group border-l border-gray-50 dark:border-gray-850 hover:border-gray-200 dark:hover:border-gray-800  transition z-20"
+				id="controls-resizer"
 			>
-				<div class="z-10 flex h-7 w-5 items-center justify-center rounded-xs">
-					<EllipsisVertical className="size-4 invisible group-hover:visible" />
-				</div>
+				<div
+					class=" absolute -left-1.5 -right-1.5 -top-0 -bottom-0 z-20 cursor-col-resize bg-transparent"
+				/>
 			</PaneResizer>
 
 			<Pane defaultSize={50} minSize={30} class="h-full w-full">

src/lib/components/channel/MessageInput.svelte

@@ -56,6 +56,8 @@
 	export let acceptFiles = true;
 	export let showFormattingToolbar = true;
 
+	export let typingUsersClassName = 'from-white dark:from-gray-900';
+
 	let loaded = false;
 	let draggedOver = false;
 
@@ -693,9 +695,9 @@
 
 					{#if typingUsers.length > 0}
 						<div
-							class=" absolute -top-6 pb-2.5 w-full bg-gradient-to-t to-transparent from-white dark:from-gray-900 pointer-events-none select-none"
+							class=" -mt-7 pb-2.5 bg-gradient-to-t to-transparent {typingUsersClassName} pointer-events-none select-none"
 						>
-							<div class=" text-xs px-2 mt-1 flex items-center gap-1.5">
+							<div class=" text-xs px-1 mt-1.5 flex items-center gap-1.5">
 								<Skeleton size="xs" />
 
 								<div>

src/lib/components/channel/Thread.svelte

@@ -198,8 +198,14 @@
 				}}
 			/>
 
-			<div class=" pb-[1rem] px-2.5">
-				<MessageInput id={threadId} {typingUsers} {onChange} onSubmit={submitHandler} />
+			<div class=" pb-[1rem] px-2.5 w-full">
+				<MessageInput
+					id={threadId}
+					typingUsersClassName="from-gray-50 dark:from-gray-850"
+					{typingUsers}
+					{onChange}
+					onSubmit={submitHandler}
+				/>
 			</div>
 		</div>
 	</div>