From 1651d1f1f57b8c43148ab8433bef0d4caf0d13e9 Mon Sep 17 00:00:00 2001
From: DanielWalnut <45447813+hetaoBackend@users.noreply.github.com>
Date: Mon, 8 Jun 2026 19:17:14 +0800
Subject: [PATCH] fix(frontend): restructure Memory settings toolbar into two
 rows (#3433)

The search input, filter tabs, and four action buttons were crammed into
a single horizontal row, which squeezed the search box into an unusable
sliver and truncated the "Summaries" filter tab to "Summarie".

Split the toolbar into two rows: search + filter tabs on the first,
actions on the second. The search input now keeps a usable min width,
filter tabs use whitespace-nowrap so they never truncate, and the
destructive "Clear all memory" button is pushed to the far right
(ml-auto) to separate it from the constructive actions.

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../settings/memory-settings-page.tsx         | 25 +++++++++++++------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/workspace/settings/memory-settings-page.tsx b/frontend/src/components/workspace/settings/memory-settings-page.tsx
index ce01d3c27..f7b677445 100644
--- a/frontend/src/components/workspace/settings/memory-settings-page.tsx
+++ b/frontend/src/components/workspace/settings/memory-settings-page.tsx
@@ -555,13 +555,14 @@ export function MemorySettingsPage() {
               </div>
             ) : null}
 
-            <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">
+            <div className="flex flex-col gap-3">
+              {/* Row 1: search + filter tabs */}
+              <div className="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-center">
                 <Input
                   value={query}
                   onChange={(event) => setQuery(event.target.value)}
                   placeholder={searchPlaceholder}
-                  className="sm:max-w-xs"
+                  className="min-w-0 flex-1 sm:max-w-md"
                 />
                 <ToggleGroup
                   type="single"
@@ -570,16 +571,25 @@ export function MemorySettingsPage() {
                     if (value) setFilter(value as MemoryViewFilter);
                   }}
                   variant="outline"
+                  className="shrink-0 self-start sm:ml-auto sm:self-auto"
                 >
-                  <ToggleGroupItem value="all">{filterAll}</ToggleGroupItem>
-                  <ToggleGroupItem value="facts">{filterFacts}</ToggleGroupItem>
-                  <ToggleGroupItem value="summaries">
+                  <ToggleGroupItem value="all" className="whitespace-nowrap">
+                    {filterAll}
+                  </ToggleGroupItem>
+                  <ToggleGroupItem value="facts" className="whitespace-nowrap">
+                    {filterFacts}
+                  </ToggleGroupItem>
+                  <ToggleGroupItem
+                    value="summaries"
+                    className="whitespace-nowrap"
+                  >
                     {filterSummaries}
                   </ToggleGroupItem>
                 </ToggleGroup>
               </div>
 
-              <div className="flex min-w-0 flex-wrap gap-2 xl:justify-end">
+              {/* Row 2: actions — constructive group on the left, destructive separated to the right */}
+              <div className="flex flex-wrap items-center gap-2">
                 <input
                   ref={fileInputRef}
                   type="file"
@@ -609,6 +619,7 @@ export function MemorySettingsPage() {
                 </Button>
                 <Button
                   variant="destructive"
+                  className="ml-auto"
                   onClick={() => setClearDialogOpen(true)}
                   disabled={clearMemory.isPending}
                 >