Skip to content

[Fix] Memory titles overflow the Explore memories card #1766

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mrubens merged 1 commit into from
Aug 30, 2026
Merged

[Fix] Memory titles overflow the Explore memories card #1766

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 20 additions & 20 deletions apps/web/src/components/settings/brain/BrainBrowseSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ const PageListRow = memo(function PageListRow({
data-memory-slug={page.slug}
onClick={() => onSelect(page.slug)}
className={cn(
'w-full cursor-pointer rounded-lg px-3 py-2 text-left transition-colors',
'w-full min-w-0 max-w-full cursor-pointer overflow-hidden rounded-lg px-3 py-2 text-left transition-colors',
selected ? 'bg-accent' : 'hover:bg-accent/60',
)}
>
Expand Down Expand Up @@ -143,32 +143,32 @@ function PagePreview({ slug }: { slug: string }) {
}

return (
<div className="flex h-full min-h-0 flex-col gap-3 divide-y">
<div className="space-y-1 px-4 pb-3">
<p className="text-sm font-semibold truncate line-clamp-1">
{data.title}
</p>
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<div className="flex h-full min-h-0 min-w-0 flex-col gap-3 divide-y overflow-hidden">
<div className="min-w-0 space-y-1 px-4 pb-3">
<p className="truncate text-sm font-semibold">{data.title}</p>
<div className="flex min-w-0 items-center gap-2 text-sm text-muted-foreground">
{data.updatedAt ? (
<>
<span>
<span className="shrink-0">
{formatDistanceToNowCompact(data.updatedAt, {
addSuffix: true,
})}
</span>
<span aria-hidden="true">·</span>
</>
) : null}
<span className="font-mono text-[0.9em]">{data.slug}</span>
<span className="min-w-0 truncate font-mono text-[0.9em]">
{data.slug}
</span>
</div>
</div>
{/*
* Brain memories are distilled from tasks and integrations: cross-user
* content, rendered strictly as text.
*/}
<div className="min-h-0 flex-1 overflow-y-auto scroll-thin px-4">
<div className="w-full max-w-2xl">
<Streamdown className="text-sm **:data-[streamdown='heading-1']:text-xl! **:data-[streamdown='heading-2']:text-base! **:data-[streamdown='heading-3']:text-base!">
<div className="min-h-0 min-w-0 flex-1 overflow-x-hidden overflow-y-auto scroll-thin px-4">
<div className="w-full min-w-0 max-w-2xl">
<Streamdown className="break-words text-sm **:data-[streamdown='heading-1']:text-xl! **:data-[streamdown='heading-2']:text-base! **:data-[streamdown='heading-3']:text-base!">
{data.content ?? 'This memory has no stored content.'}
</Streamdown>
</div>
Expand Down Expand Up @@ -310,11 +310,11 @@ export function BrainBrowseSection({
);

const pageList = (
<div className="flex min-h-0 flex-1 flex-col">
<div className="flex min-h-0 min-w-0 flex-1 flex-col">
<div
ref={listRef}
onKeyDown={handleListKeyDown}
className="min-h-0 flex-1 space-y-0.5 overflow-y-auto scroll-thin pr-2"
className="min-h-0 min-w-0 flex-1 space-y-0.5 overflow-y-auto scroll-thin pr-2"
>
{pages.map((page) => (
<PageListRow
Expand Down Expand Up @@ -385,14 +385,14 @@ export function BrainBrowseSection({
/>
</div>

<div className="flex flex-wrap items-center gap-1.5 mb-6">
<div className="mb-6 flex min-w-0 flex-wrap items-center gap-1.5">
<Badge
asChild
variant={namespaceId === null ? 'default' : 'secondary'}
>
<button
type="button"
className="cursor-pointer"
className="max-w-full cursor-pointer"
onClick={() => selectNamespace(null)}
>
All
Expand All @@ -406,7 +406,7 @@ export function BrainBrowseSection({
>
<button
type="button"
className="cursor-pointer"
className="max-w-full cursor-pointer"
onClick={() =>
selectNamespace(
namespaceId === namespace.id ? null : namespace.id,
Expand All @@ -420,7 +420,7 @@ export function BrainBrowseSection({
backgroundColor: brainNamespaceColor(namespace.id),
}}
/>
{namespace.label}
<span className="min-w-0 truncate">{namespace.label}</span>
</button>
</Badge>
))}
Expand All @@ -443,10 +443,10 @@ export function BrainBrowseSection({
description="Nothing in Memory matches this search."
/>
) : selectedSlug ? (
<div className="grid h-140 grid-cols-1 grid-rows-2 divide-y md:grid-cols-[280px_1fr] md:grid-rows-1 md:divide-x md:divide-y-0 overflow-clip">
<div className="grid h-140 min-w-0 grid-cols-1 grid-rows-2 divide-y overflow-clip md:grid-cols-[minmax(0,280px)_minmax(0,1fr)] md:grid-rows-1 md:divide-x md:divide-y-0">
{/* The list and preview stack below `md`, then sit side by side. */}
{pageList}
<div className="min-h-0 flex-1">
<div className="min-h-0 min-w-0 flex-1 overflow-hidden">
<PagePreview slug={selectedSlug} />
</div>
</div>
Expand Down
Loading