From c2332bb7908e5774763c49cfb77a229832f4f57b Mon Sep 17 00:00:00 2001
From: Admire <64821731+LittleChenLiya@users.noreply.github.com>
Date: Fri, 24 Apr 2026 20:29:55 +0800
Subject: [PATCH] fix memory settings layout overflow (#2420)

Co-authored-by: Willem Jiang <willem.jiang@gmail.com>
---
 .../workspace/settings/memory-settings-page.tsx  | 16 ++++++++--------
 .../workspace/settings/settings-dialog.tsx       |  6 +++---
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/workspace/settings/memory-settings-page.tsx b/frontend/src/components/workspace/settings/memory-settings-page.tsx
index ae15fa47d..ce01d3c27 100644
--- a/frontend/src/components/workspace/settings/memory-settings-page.tsx
+++ b/frontend/src/components/workspace/settings/memory-settings-page.tsx
@@ -555,8 +555,8 @@ export function MemorySettingsPage() {
               </div>
             ) : null}
 
-            <div className="flex 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-col gap-3 xl:flex-row xl:items-center xl:justify-between">
+              <div className="flex min-w-0 flex-1 flex-col gap-3 sm:flex-row sm:items-center">
                 <Input
                   value={query}
                   onChange={(event) => setQuery(event.target.value)}
@@ -579,7 +579,7 @@ export function MemorySettingsPage() {
                 </ToggleGroup>
               </div>
 
-              <div className="flex flex-wrap gap-2">
+              <div className="flex min-w-0 flex-wrap gap-2 xl:justify-end">
                 <input
                   ref={fileInputRef}
                   type="file"
@@ -624,12 +624,12 @@ export function MemorySettingsPage() {
             ) : null}
 
             {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">
                   {summaryReadOnly}
                 </div>
                 <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}
                 >
                   {summariesToMarkdown(memory, filteredSectionGroups, t)}
@@ -638,7 +638,7 @@ export function MemorySettingsPage() {
             ) : null}
 
             {shouldRenderFactsBlock ? (
-              <div className="rounded-lg border p-4">
+              <div className="min-w-0 rounded-lg border p-4">
                 <div className="mb-4">
                   <h3 className="text-base font-medium">
                     {t.settings.memory.markdown.facts}
@@ -661,7 +661,7 @@ export function MemorySettingsPage() {
                           key={fact.id}
                           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">
                               <span>
                                 <span className="text-muted-foreground">
@@ -697,7 +697,7 @@ export function MemorySettingsPage() {
                                 )}
                               </span>
                             </div>
-                            <p className="text-sm break-words">
+                            <p className="text-sm [overflow-wrap:anywhere]">
                               {fact.content}
                             </p>
                           </div>
diff --git a/frontend/src/components/workspace/settings/settings-dialog.tsx b/frontend/src/components/workspace/settings/settings-dialog.tsx
index 3a111564b..fadc25fa6 100644
--- a/frontend/src/components/workspace/settings/settings-dialog.tsx
+++ b/frontend/src/components/workspace/settings/settings-dialog.tsx
@@ -97,7 +97,7 @@ export function SettingsDialog(props: SettingsDialogProps) {
             {t.settings.description}
           </p>
         </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">
             <ul className="space-y-1 pr-1">
               {sections.map(({ id, label, icon: Icon }) => {
@@ -122,8 +122,8 @@ export function SettingsDialog(props: SettingsDialogProps) {
               })}
             </ul>
           </nav>
-          <ScrollArea className="h-full min-h-0 rounded-lg border">
-            <div className="space-y-8 p-6">
+          <ScrollArea className="h-full min-h-0 min-w-0 rounded-lg border">
+            <div className="min-w-0 space-y-8 p-6">
               {activeSection === "appearance" && <AppearanceSettingsPage />}
               {activeSection === "memory" && <MemorySettingsPage />}
               {activeSection === "tools" && <ToolSettingsPage />}