diff --git a/src/lib/components/layout/Sidebar/ChannelItem.svelte b/src/lib/components/layout/Sidebar/ChannelItem.svelte
index 6356e4a9eb..7cc786d2cc 100644
--- a/src/lib/components/layout/Sidebar/ChannelItem.svelte
+++ b/src/lib/components/layout/Sidebar/ChannelItem.svelte
@@ -88,7 +88,7 @@
 		: ' dark:text-gray-400 text-gray-600'} cursor-pointer select-none"
 >
 	<a
-		class=" w-full flex"
+		class="min-w-0 flex flex-1"
 		href="/channels/{channel.id}"
 		on:click={() => {
 			console.log(channel);
@@ -203,7 +203,7 @@
 	</a>
 
 	{#if ['dm'].includes(channel?.type)}
-		<div class="ml-0.5 mr-1 hover-reveal self-center flex items-center dark:text-gray-300">
+		<div class="ml-0.5 mr-1 hover-reveal self-center flex shrink-0 items-center dark:text-gray-300">
 			<button
 				type="button"
 				class="p-0.5 dark:hover:bg-gray-850 rounded-lg touch-auto"
@@ -228,7 +228,7 @@
 			</button>
 		</div>
 	{:else if $user?.role === 'admin' || channel.user_id === $user?.id}
-		<div class="ml-0.5 mr-1 hover-reveal self-center flex items-center dark:text-gray-300">
+		<div class="ml-0.5 mr-1 hover-reveal self-center flex shrink-0 items-center dark:text-gray-300">
 			<button
 				type="button"
 				class="p-0.5 dark:hover:bg-gray-850 rounded-lg touch-auto"