From 1b12fbae3914796af8e8bf49708e561a7ce5c0b8 Mon Sep 17 00:00:00 2001
From: Xubin Ren <52506698+Re-bin@users.noreply.github.com>
Date: Fri, 7 Aug 2026 11:09:03 +0800
Subject: [PATCH] fix(webui): explain disabled preset deletion

---
 .../src/components/settings/SettingsView.tsx  | 44 +++++++++++--------
 webui/src/tests/settings-view.test.tsx        |  7 ++-
 2 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/webui/src/components/settings/SettingsView.tsx b/webui/src/components/settings/SettingsView.tsx
index 5e2db8d52..b23efd66f 100644
--- a/webui/src/components/settings/SettingsView.tsx
+++ b/webui/src/components/settings/SettingsView.tsx
@@ -3577,24 +3577,32 @@ function ModelsSettings({
             {tx("settings.actions.cancel", "Cancel")}
           </Button>
         ) : selectedPreset ? (
-          <Button
-            size="sm"
-            variant="ghost"
-            className="self-start rounded-full text-muted-foreground hover:text-destructive"
-            disabled={selectedPresetOnlyActive || saving || orderSaving}
-            title={
-              selectedPresetOnlyActive
-                ? tx(
-                    "settings.models.removeBeforeDelete",
-                    "Remove this preset from the call order before deleting it.",
-                  )
-                : undefined
-            }
-            onClick={() => onDeleteConfiguration(selectedPreset)}
-          >
-            <Trash2 className="mr-1.5 h-3.5 w-3.5" aria-hidden />
-            {tx("settings.actions.delete", "Delete")}
-          </Button>
+          <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
+            <Button
+              size="sm"
+              variant="ghost"
+              className="rounded-full text-muted-foreground hover:text-destructive"
+              disabled={selectedPresetOnlyActive || saving || orderSaving}
+              aria-describedby={
+                selectedPresetOnlyActive ? "model-preset-delete-hint" : undefined
+              }
+              onClick={() => onDeleteConfiguration(selectedPreset)}
+            >
+              <Trash2 className="mr-1.5 h-3.5 w-3.5" aria-hidden />
+              {tx("settings.actions.delete", "Delete")}
+            </Button>
+            {selectedPresetOnlyActive ? (
+              <span
+                id="model-preset-delete-hint"
+                className="text-[11px] leading-4 text-muted-foreground"
+              >
+                {tx(
+                  "settings.models.removeBeforeDelete",
+                  "Remove this preset from the call order before deleting it.",
+                )}
+              </span>
+            ) : null}
+          </div>
         ) : null}
         <div className="flex items-center justify-end gap-3">
           <Button
diff --git a/webui/src/tests/settings-view.test.tsx b/webui/src/tests/settings-view.test.tsx
index 3a3de5baa..c3ebc8b6b 100644
--- a/webui/src/tests/settings-view.test.tsx
+++ b/webui/src/tests/settings-view.test.tsx
@@ -2169,7 +2169,12 @@ describe("SettingsView Apps catalog", () => {
     expect(row.nextElementSibling).toBe(editor);
     expect(editor).toHaveClass("slide-in-from-top-1", "bg-muted/10");
     expect(within(editor).getByDisplayValue("Primary")).toBeInTheDocument();
-    expect(within(editor).getByRole("button", { name: "Delete" })).toBeDisabled();
+    const deleteButton = within(editor).getByRole("button", { name: "Delete" });
+    expect(deleteButton).toBeDisabled();
+    expect(deleteButton).toHaveAttribute("aria-describedby", "model-preset-delete-hint");
+    expect(
+      within(editor).getByText("Remove this preset from the call order before deleting it."),
+    ).toBeInTheDocument();
 
     fireEvent.click(trigger);