refac: styling

src/lib/components/channel/Channel.svelte

@@ -109,35 +109,38 @@
 		? 'md:max-w-[calc(100%-260px)]'
 		: ''} w-full max-w-full flex flex-col"
 >
-	{#if channel}
-		<Navbar {channel} />
-		<div
-			class=" pb-2.5 max-w-full z-10 scrollbar-hidden w-full h-full pt-6 flex-1 flex flex-col-reverse overflow-auto"
-			id="messages-container"
-			bind:this={messagesContainerElement}
-			on:scroll={(e) => {
-				scrollEnd = Math.abs(messagesContainerElement.scrollTop) <= 50;
-			}}
-		>
-			{#key id}
-				<Messages
-					{channel}
-					{messages}
-					{top}
-					onLoad={async () => {
-						const newMessages = await getChannelMessages(localStorage.token, id, messages.length);
-
-						messages = [...messages, ...newMessages];
-
-						if (newMessages.length < 50) {
-							top = true;
-							return;
-						}
-					}}
-				/>
-			{/key}
-		</div>
-	{/if}
+	<Navbar {channel} />
+
+	<div class="flex-1">
+		{#if channel}
+			<div
+				class=" pb-2.5 max-w-full z-10 scrollbar-hidden w-full h-full pt-6 flex-1 flex flex-col-reverse overflow-auto"
+				id="messages-container"
+				bind:this={messagesContainerElement}
+				on:scroll={(e) => {
+					scrollEnd = Math.abs(messagesContainerElement.scrollTop) <= 50;
+				}}
+			>
+				{#key id}
+					<Messages
+						{channel}
+						{messages}
+						{top}
+						onLoad={async () => {
+							const newMessages = await getChannelMessages(localStorage.token, id, messages.length);
+
+							messages = [...messages, ...newMessages];
+
+							if (newMessages.length < 50) {
+								top = true;
+								return;
+							}
+						}}
+					/>
+				{/key}
+			</div>
+		{/if}
+	</div>
 
 	<div class=" pb-[1rem]">
 		<MessageInput onSubmit={submitHandler} {scrollToBottom} {scrollEnd} />

src/lib/components/channel/Navbar.svelte

@@ -47,9 +47,11 @@
 			{$showSidebar ? 'ml-1' : ''}
 			"
 			>
-				<div class="line-clamp-1 capitalize font-medium font-primary text-lg">
-					{channel.name}
-				</div>
+				{#if channel}
+					<div class="line-clamp-1 capitalize font-medium font-primary text-lg">
+						{channel.name}
+					</div>
+				{/if}
 			</div>
 
 			<div class="self-start flex flex-none items-center text-gray-600 dark:text-gray-400">