From 129e4772ddb886f5663ccc4017b9636a47851d50 Mon Sep 17 00:00:00 2001
From: Arjun Patel <patel.arjun50@gmail.com>
Date: Sat, 20 Jun 2026 17:22:45 -0700
Subject: [PATCH] fix: ui papercuts (#292)

* fix: avatar showing blank when switching

* fix: sidebar padding glitchy

Long markdown content would make each chat row expand and remove the padding in the sidebar

* ignore emacs project.el

* nit
---
 .gitignore                                                | 1 +
 js/desktop/src/components/human-avatar.tsx                | 2 +-
 js/desktop/src/features/particles/stream-list-sidebar.tsx | 8 ++++----
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/.gitignore b/.gitignore
index d8a89e0..d7df4dd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,4 @@ build/
 compile_commands.json
 CMakeLists.txt.user
 tags
+project.el
diff --git a/js/desktop/src/components/human-avatar.tsx b/js/desktop/src/components/human-avatar.tsx
index 865efee..0a9164b 100644
--- a/js/desktop/src/components/human-avatar.tsx
+++ b/js/desktop/src/components/human-avatar.tsx
@@ -29,7 +29,7 @@ export function HumanAvatar({
   const url = useAvatarUrl(avatarObjectId);
   return (
     <Avatar {...props}>
-      {url && <AvatarImage src={url} alt={initials} />}
+      <AvatarImage src={url} alt={initials} />
       <AvatarFallback className={fallbackClassName}>{initials}</AvatarFallback>
     </Avatar>
   );
diff --git a/js/desktop/src/features/particles/stream-list-sidebar.tsx b/js/desktop/src/features/particles/stream-list-sidebar.tsx
index db4630f..a1da25e 100644
--- a/js/desktop/src/features/particles/stream-list-sidebar.tsx
+++ b/js/desktop/src/features/particles/stream-list-sidebar.tsx
@@ -39,7 +39,7 @@ export function StreamListSidebar({
   }, [currentIndex]);
 
   return (
-    <aside className="dark flex max-w-60 shrink-0 flex-col border-l border-white/10 bg-zinc-950">
+    <aside className="dark flex w-60 shrink-0 flex-col overflow-hidden border-l border-white/10 bg-zinc-950">
       <div className="flex shrink-0 items-center gap-2 border-b border-white/10 px-4 py-3">
         <List className="size-3.5 text-white/40" />
         <span className="truncate text-sm font-medium text-white/90 mr-auto">
@@ -105,7 +105,7 @@ function ChatRow({
         if (e.key === 'Enter') onClick();
       }}
       className={cn(
-        'flex w-full cursor-pointer items-start gap-2.5 rounded-md px-2 py-2 text-left transition-colors',
+        'flex cursor-pointer items-start gap-2.5 rounded-md px-2 py-2 text-left transition-colors',
         isSelected ? 'bg-white/10' : 'hover:bg-white/5',
       )}
     >
@@ -116,7 +116,7 @@ function ChatRow({
         avatarObjectId={sender.avatarObjectId}
         fallbackClassName="bg-white/10 text-white/80 text-[10px] font-medium"
       />
-      <div className="min-w-0 flex-1">
+      <div className="min-w-0 flex-1 overflow-hidden">
         <div className="flex items-baseline justify-between gap-2">
           <span className="truncate text-xs font-semibold text-white/90">
             {sender.displayName}
@@ -141,7 +141,7 @@ function ChatRowContent({ particle }: { particle: Particle }) {
   switch (particle.type) {
     case 'text':
       return (
-        <p className="line-clamp-2 text-xs leading-relaxed whitespace-pre-line text-white/70">
+        <p className="line-clamp-2 text-xs leading-relaxed [overflow-wrap:anywhere] whitespace-pre-line text-white/70">
           {particle.properties.content}
         </p>
       );