fix: sidebar padding glitchy

Long markdown content would make each chat row expand and remove the padding in the sidebar
This commit is contained in:
Arjun Patel
2026-06-20 13:30:07 -07:00
parent 5118790353
commit bde093fb21
@@ -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>
);