style(ui): reduce focus ring width and fix dialog overflow clipping

Reduce ring-[3px] to ring-2 on Input and ToolNameSelect for a subtler
focus indicator. Add px-0.5 -mx-0.5 to scrollable form dialog bodies
so the focus ring is not clipped by overflow-y-auto.

ui/web/src/components/shared/tool-name-select.tsx

@@ -99,7 +99,7 @@ export function ToolNameSelect({
       <div
         className={cn(
           "border-input dark:bg-input/30 flex min-h-9 flex-wrap items-center gap-1 rounded-md border bg-transparent px-2 py-1 text-sm shadow-xs transition-[color,box-shadow]",
-          "focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
+          "focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-2",
         )}
         onClick={() => inputRef.current?.focus()}
       >

ui/web/src/components/ui/input.tsx

@@ -9,7 +9,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       data-slot="input"
       className={cn(
         "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-2",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className
       )}

ui/web/src/pages/agents/agent-create-dialog.tsx

@@ -110,7 +110,7 @@ export function AgentCreateDialog({ open, onOpenChange, onCreate }: AgentCreateD
         <DialogHeader>
           <DialogTitle>Create Agent</DialogTitle>
         </DialogHeader>
-        <div className="space-y-4 py-4 overflow-y-auto min-h-0">
+        <div className="space-y-4 py-4 px-0.5 -mx-0.5 overflow-y-auto min-h-0">
           <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
             <div className="space-y-2">
               <Label htmlFor="displayName">Display Name *</Label>

ui/web/src/pages/channels/channel-instance-form-dialog.tsx

@@ -255,7 +255,7 @@ export function ChannelInstanceFormDialog({
         {/* === FORM STEP === */}
         {step === "form" && (
           <>
-            <div className="grid gap-4 py-2 overflow-y-auto min-h-0">
+            <div className="grid gap-4 py-2 px-0.5 -mx-0.5 overflow-y-auto min-h-0">
               <div className="grid gap-1.5">
                 <Label htmlFor="ci-name">Name *</Label>
                 <Input id="ci-name" value={name} onChange={(e) => setName(slugify(e.target.value))} placeholder="my-telegram-bot" disabled={!!instance} />
@@ -371,7 +371,7 @@ export function ChannelInstanceFormDialog({
         {/* === CONFIG STEP (rendered by registered component) === */}
         {step === "config" && createdInstanceId && ConfigStep && (
           <>
-            <div className="py-2 overflow-y-auto min-h-0">
+            <div className="py-2 px-0.5 -mx-0.5 overflow-y-auto min-h-0">
               <ConfigStep
                 instanceId={createdInstanceId}
                 authCompleted={authCompleted}

ui/web/src/pages/cron/cron-form-dialog.tsx

@@ -70,7 +70,7 @@ export function CronFormDialog({ open, onOpenChange, onSubmit }: CronFormDialogP
         <DialogHeader>
           <DialogTitle>Create Cron Job</DialogTitle>
         </DialogHeader>
-        <div className="space-y-4 overflow-y-auto min-h-0">
+        <div className="space-y-4 px-0.5 -mx-0.5 overflow-y-auto min-h-0">
           <div className="space-y-2">
             <Label>Name</Label>
             <Input value={name} onChange={(e) => setName(slugify(e.target.value))} placeholder="my-daily-task" />

ui/web/src/pages/custom-tools/custom-tool-form-dialog.tsx

@@ -95,7 +95,7 @@ export function CustomToolFormDialog({ open, onOpenChange, tool, onSubmit }: Cus
           <DialogTitle>{tool ? "Edit Tool" : "Create Custom Tool"}</DialogTitle>
         </DialogHeader>
 
-        <div className="grid gap-4 py-2 overflow-y-auto min-h-0">
+        <div className="grid gap-4 py-2 px-0.5 -mx-0.5 overflow-y-auto min-h-0">
           <div className="grid gap-1.5">
             <Label htmlFor="ct-name">Name *</Label>
             <Input id="ct-name" value={name} onChange={(e) => setName(slugify(e.target.value))} placeholder="my-tool" />

ui/web/src/pages/providers/provider-form-dialog.tsx

@@ -105,7 +105,7 @@ export function ProviderFormDialog({ open, onOpenChange, provider, onSubmit, exi
           <DialogTitle>{isEdit ? "Edit Provider" : "Add Provider"}</DialogTitle>
           <DialogDescription>Configure an LLM provider connection.</DialogDescription>
         </DialogHeader>
-        <div className="space-y-4 py-4 overflow-y-auto min-h-0">
+        <div className="space-y-4 py-4 px-0.5 -mx-0.5 overflow-y-auto min-h-0">
           {/* Provider type selector — always shown in create mode */}
           {!isEdit && (
             <ProviderTypeSelect

ui/web/src/pages/teams/team-create-dialog.tsx

@@ -114,7 +114,7 @@ export function TeamCreateDialog({ open, onOpenChange, onCreate }: TeamCreateDia
         <DialogHeader>
           <DialogTitle>Create Team</DialogTitle>
         </DialogHeader>
-        <div className="space-y-4 py-4 overflow-y-auto min-h-0">
+        <div className="space-y-4 py-4 px-0.5 -mx-0.5 overflow-y-auto min-h-0">
           <div className="space-y-2">
             <Label htmlFor="teamName">Name *</Label>
             <Input