A few ui tweaks

src/app/components/ChatItem.svelte

@@ -28,30 +28,32 @@
   })
 </script>
 
-<div
-  class="cursor-pointer border-t border-solid border-base-100 px-6 py-2 transition-colors hover:bg-base-100 {$$props.class}"
-  class:bg-base-100={active}>
-  <Link class="flex flex-col justify-start gap-1" href={makeChatPath(pubkeys)}>
-    <div class="flex justify-between gap-2">
-      <div class="flex min-w-0 items-center gap-2">
-        {#if others.length === 1}
-          <ProfileCircle pubkey={others[0]} size={5} />
-          <ProfileName pubkey={others[0]} />
-        {:else}
-          <ProfileCircles pubkeys={others} size={5} />
-          <p class="overflow-hidden text-ellipsis whitespace-nowrap">
+<Link class="flex flex-col justify-start gap-1" href={makeChatPath(pubkeys)}>
+  <div
+    class="cursor-pointer border-t border-solid border-base-100 px-6 py-2 transition-colors hover:bg-base-100 {$$props.class}"
+    class:bg-base-100={active}>
+    <div class="flex flex-col justify-start gap-1">
+      <div class="flex justify-between gap-2">
+        <div class="flex min-w-0 items-center gap-2">
+          {#if others.length === 1}
+            <ProfileCircle pubkey={others[0]} size={5} />
             <ProfileName pubkey={others[0]} />
-            and {others.length - 1}
-            {others.length > 2 ? "others" : "other"}
-          </p>
+          {:else}
+            <ProfileCircles pubkeys={others} size={5} />
+            <p class="overflow-hidden text-ellipsis whitespace-nowrap">
+              <ProfileName pubkey={others[0]} />
+              and {others.length - 1}
+              {others.length > 2 ? "others" : "other"}
+            </p>
+          {/if}
+        </div>
+        {#if $missingInbox}
+          <Icon icon="danger" class="text-error" />
         {/if}
       </div>
-      {#if $missingInbox}
-        <Icon icon="danger" class="text-error" />
-      {/if}
+      <p class="overflow-hidden text-ellipsis whitespace-nowrap text-sm">
+        {message.content}
+      </p>
     </div>
-    <p class="overflow-hidden text-ellipsis whitespace-nowrap text-sm">
-      {message.content}
-    </p>
-  </Link>
-</div>
+  </div>
+</Link>