fix memory settings layout overflow (#2420)

Co-authored-by: Willem Jiang <willem.jiang@gmail.com>
This commit is contained in:
Admire 2026-04-24 20:29:55 +08:00 committed by GitHub
parent 3a61126824
commit c2332bb790
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 11 additions and 11 deletions

View File

@ -555,8 +555,8 @@ export function MemorySettingsPage() {
</div> </div>
) : null} ) : null}
<div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between"> <div className="flex min-w-0 flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
<div className="flex flex-1 flex-col gap-3 sm:flex-row sm:items-center"> <div className="flex min-w-0 flex-1 flex-col gap-3 sm:flex-row sm:items-center">
<Input <Input
value={query} value={query}
onChange={(event) => setQuery(event.target.value)} onChange={(event) => setQuery(event.target.value)}
@ -579,7 +579,7 @@ export function MemorySettingsPage() {
</ToggleGroup> </ToggleGroup>
</div> </div>
<div className="flex flex-wrap gap-2"> <div className="flex min-w-0 flex-wrap gap-2 xl:justify-end">
<input <input
ref={fileInputRef} ref={fileInputRef}
type="file" type="file"
@ -624,12 +624,12 @@ export function MemorySettingsPage() {
) : null} ) : null}
{shouldRenderSummariesBlock ? ( {shouldRenderSummariesBlock ? (
<div className="rounded-lg border p-4"> <div className="min-w-0 rounded-lg border p-4">
<div className="text-muted-foreground mb-4 text-sm"> <div className="text-muted-foreground mb-4 text-sm">
{summaryReadOnly} {summaryReadOnly}
</div> </div>
<Streamdown <Streamdown
className="size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0" className="size-full min-w-0 [overflow-wrap:anywhere] [&>*:first-child]:mt-0 [&>*:last-child]:mb-0"
{...streamdownPlugins} {...streamdownPlugins}
> >
{summariesToMarkdown(memory, filteredSectionGroups, t)} {summariesToMarkdown(memory, filteredSectionGroups, t)}
@ -638,7 +638,7 @@ export function MemorySettingsPage() {
) : null} ) : null}
{shouldRenderFactsBlock ? ( {shouldRenderFactsBlock ? (
<div className="rounded-lg border p-4"> <div className="min-w-0 rounded-lg border p-4">
<div className="mb-4"> <div className="mb-4">
<h3 className="text-base font-medium"> <h3 className="text-base font-medium">
{t.settings.memory.markdown.facts} {t.settings.memory.markdown.facts}
@ -661,7 +661,7 @@ export function MemorySettingsPage() {
key={fact.id} key={fact.id}
className="flex flex-col gap-3 rounded-md border p-3 sm:flex-row sm:items-start sm:justify-between" className="flex flex-col gap-3 rounded-md border p-3 sm:flex-row sm:items-start sm:justify-between"
> >
<div className="min-w-0 space-y-2"> <div className="min-w-0 space-y-2 [overflow-wrap:anywhere]">
<div className="flex flex-wrap gap-x-4 gap-y-1 text-sm"> <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm">
<span> <span>
<span className="text-muted-foreground"> <span className="text-muted-foreground">
@ -697,7 +697,7 @@ export function MemorySettingsPage() {
)} )}
</span> </span>
</div> </div>
<p className="text-sm break-words"> <p className="text-sm [overflow-wrap:anywhere]">
{fact.content} {fact.content}
</p> </p>
</div> </div>

View File

@ -97,7 +97,7 @@ export function SettingsDialog(props: SettingsDialogProps) {
{t.settings.description} {t.settings.description}
</p> </p>
</DialogHeader> </DialogHeader>
<div className="grid min-h-0 flex-1 gap-4 md:grid-cols-[220px_1fr]"> <div className="grid min-h-0 flex-1 gap-4 md:grid-cols-[220px_minmax(0,1fr)]">
<nav className="bg-sidebar min-h-0 overflow-y-auto rounded-lg border p-2"> <nav className="bg-sidebar min-h-0 overflow-y-auto rounded-lg border p-2">
<ul className="space-y-1 pr-1"> <ul className="space-y-1 pr-1">
{sections.map(({ id, label, icon: Icon }) => { {sections.map(({ id, label, icon: Icon }) => {
@ -122,8 +122,8 @@ export function SettingsDialog(props: SettingsDialogProps) {
})} })}
</ul> </ul>
</nav> </nav>
<ScrollArea className="h-full min-h-0 rounded-lg border"> <ScrollArea className="h-full min-h-0 min-w-0 rounded-lg border">
<div className="space-y-8 p-6"> <div className="min-w-0 space-y-8 p-6">
{activeSection === "appearance" && <AppearanceSettingsPage />} {activeSection === "appearance" && <AppearanceSettingsPage />}
{activeSection === "memory" && <MemorySettingsPage />} {activeSection === "memory" && <MemorySettingsPage />}
{activeSection === "tools" && <ToolSettingsPage />} {activeSection === "tools" && <ToolSettingsPage />}