From 7ba4bc02f01962e224c5b759d4b14c3bf319a538 Mon Sep 17 00:00:00 2001
From: Xubin Ren <52506698+Re-bin@users.noreply.github.com>
Date: Wed, 2 Sep 2026 15:35:50 +0800
Subject: [PATCH] fix(webui): make new preset row clickable

---
 .../settings/models/ModelsSettings.tsx        | 27 +++++++++----------
 webui/src/tests/settings-models.test.tsx      |  4 ++-
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/webui/src/components/settings/models/ModelsSettings.tsx b/webui/src/components/settings/models/ModelsSettings.tsx
index 50ed00f20..e5843622a 100644
--- a/webui/src/components/settings/models/ModelsSettings.tsx
+++ b/webui/src/components/settings/models/ModelsSettings.tsx
@@ -850,21 +850,20 @@ export function ModelsSettings({
                 })}
               </div>
               {!creating ? (
-                <div className="flex min-h-[58px] flex-col gap-3 px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:px-5">
-                  <Button
-                    size="sm"
-                    variant="ghost"
-                    className="rounded-full"
-                    disabled={callOrderBusy}
-                    onClick={() => {
-                      setEditorRowKey(null);
-                      setEditorOpen(true);
-                      onBeginCreate();
-                    }}
-                  >
+                <button
+                  type="button"
+                  className="flex min-h-[58px] w-full items-center justify-between gap-3 px-4 py-3 text-left outline-none transition-colors hover:bg-muted/30 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 sm:px-5"
+                  disabled={callOrderBusy}
+                  onClick={() => {
+                    setEditorRowKey(null);
+                    setEditorOpen(true);
+                    onBeginCreate();
+                  }}
+                >
+                  <span className="inline-flex items-center text-[13px] font-medium">
                     <Plus className="mr-1.5 h-3.5 w-3.5" aria-hidden />
                     {tx("settings.models.newPreset", "New model preset")}
-                  </Button>
+                  </span>
                   {orderSaving ? (
                     <SettingsStatusMessage>
                       <span className="inline-flex items-center gap-1.5">
@@ -873,7 +872,7 @@ export function ModelsSettings({
                       </span>
                     </SettingsStatusMessage>
                   ) : null}
-                </div>
+                </button>
               ) : null}
               {creating && editorOpen ? renderPresetEditor() : null}
             </>
diff --git a/webui/src/tests/settings-models.test.tsx b/webui/src/tests/settings-models.test.tsx
index c94a60b5a..d86396adf 100644
--- a/webui/src/tests/settings-models.test.tsx
+++ b/webui/src/tests/settings-models.test.tsx
@@ -1440,7 +1440,9 @@ describe("Settings models", () => {
 
     renderSettingsView({ initialSection: "models" });
 
-    fireEvent.click(await screen.findByRole("button", { name: "New model preset" }));
+    const createButton = await screen.findByRole("button", { name: "New model preset" });
+    expect(createButton).toHaveClass("w-full");
+    fireEvent.click(createButton);
 
     expect(screen.queryByRole("dialog", { name: "New model preset" })).not.toBeInTheDocument();
     expect(screen.getByTestId("model-preset-editor")).toHaveClass("mt-3", "mb-3");