fix(webui): soften form control focus rings

webui/src/tests/form-controls.test.tsx

@@ -0,0 +1,26 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+
+describe("form control focus styles", () => {
+  it.each([
+    ["input", <Input aria-label="input" />],
+    ["textarea", <Textarea aria-label="textarea" />],
+  ])("uses a subdued inset focus ring for the %s", (label, control) => {
+    render(control);
+
+    const element = screen.getByLabelText(label);
+    expect(element).toHaveClass(
+      "focus-visible:ring-2",
+      "focus-visible:ring-inset",
+      "focus-visible:ring-ring/50",
+    );
+    expect(element).not.toHaveClass(
+      "ring-offset-background",
+      "focus-visible:ring-ring",
+      "focus-visible:ring-offset-2",
+    );
+  });
+});

webui/src/tests/settings-channels.test.tsx

@@ -834,8 +834,9 @@ describe("Settings channels", () => {
 
     const emailRow = await screen.findByRole("button", { name: "View Email settings" });
     expect(screen.getByPlaceholderText("Search channels")).toHaveClass(
-      "focus-visible:ring-0",
-      "focus-visible:ring-offset-0",
+      "focus-visible:ring-2",
+      "focus-visible:ring-inset",
+      "focus-visible:ring-ring/50",
     );
     expect(screen.queryByRole("switch", { name: "Email channel" })).not.toBeInTheDocument();