From bde093fb21765a640f1a9fdec4bd595d0be6828c Mon Sep 17 00:00:00 2001
From: Arjun Patel <patel.arjun50@gmail.com>
Date: Sat, 20 Jun 2026 13:30:07 -0700
Subject: [PATCH] fix: sidebar padding glitchy

Long markdown content would make each chat row expand and remove the padding in the sidebar
---
 .../src/features/particles/stream-list-sidebar.tsx       | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/js/desktop/src/features/particles/stream-list-sidebar.tsx b/js/desktop/src/features/particles/stream-list-sidebar.tsx
index db4630f..f681f23 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}
@@ -125,6 +125,7 @@ function ChatRow({
             <RelativeTimestamp date={particle.created_at} />
           </span>
         </div>
+	
         <ChatRowContent particle={particle} />
       </div>
     </div>
@@ -141,7 +142,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>
       );