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]); }, [currentIndex]);
return ( 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"> <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" /> <List className="size-3.5 text-white/40" />
<span className="truncate text-sm font-medium text-white/90 mr-auto"> <span className="truncate text-sm font-medium text-white/90 mr-auto">
@@ -105,7 +105,7 @@ function ChatRow({
if (e.key === 'Enter') onClick(); if (e.key === 'Enter') onClick();
}} }}
className={cn( 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', isSelected ? 'bg-white/10' : 'hover:bg-white/5',
)} )}
> >
@@ -116,7 +116,7 @@ function ChatRow({
avatarObjectId={sender.avatarObjectId} avatarObjectId={sender.avatarObjectId}
fallbackClassName="bg-white/10 text-white/80 text-[10px] font-medium" 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"> <div className="flex items-baseline justify-between gap-2">
<span className="truncate text-xs font-semibold text-white/90"> <span className="truncate text-xs font-semibold text-white/90">
{sender.displayName} {sender.displayName}
@@ -125,6 +125,7 @@ function ChatRow({
<RelativeTimestamp date={particle.created_at} /> <RelativeTimestamp date={particle.created_at} />
</span> </span>
</div> </div>
<ChatRowContent particle={particle} /> <ChatRowContent particle={particle} />
</div> </div>
</div> </div>
@@ -141,7 +142,7 @@ function ChatRowContent({ particle }: { particle: Particle }) {
switch (particle.type) { switch (particle.type) {
case 'text': case 'text':
return ( 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} {particle.properties.content}
</p> </p>
); );