refactor: improve dialog form scrolling behavior by making content scroll independently of header and footer.

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

@@ -140,14 +140,14 @@ export function ChannelInstanceFormDialog({
 
   return (
     <Dialog open={open} onOpenChange={(v) => !loading && onOpenChange(v)}>
-      <DialogContent className="max-h-[85vh] max-w-lg overflow-y-auto">
+      <DialogContent className="max-h-[85vh] max-w-lg flex flex-col">
         <DialogHeader>
           <DialogTitle>
             {instance ? "Edit Channel Instance" : "Create Channel Instance"}
           </DialogTitle>
         </DialogHeader>
 
-        <div className="grid gap-4 py-2">
+        <div className="grid gap-4 py-2 overflow-y-auto min-h-0">
           {/* Basic fields */}
           <div className="grid gap-1.5">
             <Label htmlFor="ci-name">Name *</Label>
@@ -246,10 +246,9 @@ export function ChannelInstanceFormDialog({
             <Switch id="ci-enabled" checked={enabled} onCheckedChange={setEnabled} />
             <Label htmlFor="ci-enabled">Enabled</Label>
           </div>
+          {error && <p className="text-sm text-destructive">{error}</p>}
         </div>
 
-        {error && <p className="text-sm text-destructive">{error}</p>}
-
         <DialogFooter>
           <Button variant="outline" onClick={() => onOpenChange(false)} disabled={loading}>
             Cancel

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

@@ -66,11 +66,11 @@ export function CronFormDialog({ open, onOpenChange, onSubmit }: CronFormDialogP
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-lg">
+      <DialogContent className="max-h-[85vh] max-w-lg flex flex-col">
         <DialogHeader>
           <DialogTitle>Create Cron Job</DialogTitle>
         </DialogHeader>
-        <div className="space-y-4">
+        <div className="space-y-4 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

@@ -90,12 +90,12 @@ export function CustomToolFormDialog({ open, onOpenChange, tool, onSubmit }: Cus
 
   return (
     <Dialog open={open} onOpenChange={(v) => !loading && onOpenChange(v)}>
-      <DialogContent className="max-h-[85vh] max-w-lg overflow-y-auto">
+      <DialogContent className="max-h-[85vh] max-w-lg flex flex-col">
         <DialogHeader>
           <DialogTitle>{tool ? "Edit Tool" : "Create Custom Tool"}</DialogTitle>
         </DialogHeader>
 
-        <div className="grid gap-4 py-2">
+        <div className="grid gap-4 py-2 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" />
@@ -152,10 +152,9 @@ export function CustomToolFormDialog({ open, onOpenChange, tool, onSubmit }: Cus
             <Switch id="ct-enabled" checked={enabled} onCheckedChange={setEnabled} />
             <Label htmlFor="ct-enabled">Enabled</Label>
           </div>
+          {error && <p className="text-sm text-destructive">{error}</p>}
         </div>
 
-        {error && <p className="text-sm text-destructive">{error}</p>}
-
         <DialogFooter>
           <Button variant="outline" onClick={() => onOpenChange(false)} disabled={loading}>Cancel</Button>
           <Button onClick={handleSubmit} disabled={loading}>

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

@@ -115,12 +115,12 @@ export function MCPFormDialog({ open, onOpenChange, server, onSubmit }: MCPFormD
 
   return (
     <Dialog open={open} onOpenChange={(v) => !loading && onOpenChange(v)}>
-      <DialogContent className="max-h-[85vh] max-w-lg overflow-y-auto">
+      <DialogContent className="max-h-[85vh] max-w-lg flex flex-col">
         <DialogHeader>
           <DialogTitle>{server ? "Edit MCP Server" : "Add MCP Server"}</DialogTitle>
         </DialogHeader>
 
-        <div className="grid gap-4 py-2">
+        <div className="grid gap-4 py-2 overflow-y-auto min-h-0">
           <div className="grid gap-1.5">
             <Label htmlFor="mcp-name">Name *</Label>
             <Input id="mcp-name" value={name} onChange={(e) => setName(slugify(e.target.value))} placeholder="my-mcp-server" />
@@ -188,10 +188,9 @@ export function MCPFormDialog({ open, onOpenChange, server, onSubmit }: MCPFormD
             <Switch id="mcp-enabled" checked={enabled} onCheckedChange={setEnabled} />
             <Label htmlFor="mcp-enabled">Enabled</Label>
           </div>
+          {error && <p className="text-sm text-destructive">{error}</p>}
         </div>
 
-        {error && <p className="text-sm text-destructive">{error}</p>}
-
         <DialogFooter>
           <Button variant="outline" onClick={() => onOpenChange(false)} disabled={loading}>Cancel</Button>
           <Button onClick={handleSubmit} disabled={loading}>

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

@@ -90,11 +90,11 @@ export function ProviderFormDialog({ open, onOpenChange, provider, onSubmit }: P
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
+      <DialogContent className="max-h-[85vh] flex flex-col">
         <DialogHeader>
           <DialogTitle>{isEdit ? "Edit Provider" : "Add Provider"}</DialogTitle>
         </DialogHeader>
-        <div className="space-y-4 py-4">
+        <div className="space-y-4 py-4 overflow-y-auto min-h-0">
           <div className="grid grid-cols-2 gap-4">
             <div className="space-y-2">
               <Label htmlFor="name">Name *</Label>