From f71dad016f34856fd5a5a191dcc43e916ed5008f Mon Sep 17 00:00:00 2001
From: viettranx <viettranx@gmail.com>
Date: Wed, 25 Feb 2026 08:47:50 +0700
Subject: [PATCH] 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 | 7 +++----
 ui/web/src/pages/cron/cron-form-dialog.tsx                 | 4 ++--
 ui/web/src/pages/custom-tools/custom-tool-form-dialog.tsx  | 7 +++----
 ui/web/src/pages/mcp/mcp-form-dialog.tsx                   | 7 +++----
 ui/web/src/pages/providers/provider-form-dialog.tsx        | 4 ++--
 5 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/ui/web/src/pages/channels/channel-instance-form-dialog.tsx b/ui/web/src/pages/channels/channel-instance-form-dialog.tsx
index c5fdb92a..8ad870f4 100644
--- a/ui/web/src/pages/channels/channel-instance-form-dialog.tsx
+++ b/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
diff --git a/ui/web/src/pages/cron/cron-form-dialog.tsx b/ui/web/src/pages/cron/cron-form-dialog.tsx
index 9031724a..23d0eaca 100644
--- a/ui/web/src/pages/cron/cron-form-dialog.tsx
+++ b/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" />
diff --git a/ui/web/src/pages/custom-tools/custom-tool-form-dialog.tsx b/ui/web/src/pages/custom-tools/custom-tool-form-dialog.tsx
index 6ae4ac9c..70159ea1 100644
--- a/ui/web/src/pages/custom-tools/custom-tool-form-dialog.tsx
+++ b/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}>
diff --git a/ui/web/src/pages/mcp/mcp-form-dialog.tsx b/ui/web/src/pages/mcp/mcp-form-dialog.tsx
index 4058fd16..c9f05321 100644
--- a/ui/web/src/pages/mcp/mcp-form-dialog.tsx
+++ b/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}>
diff --git a/ui/web/src/pages/providers/provider-form-dialog.tsx b/ui/web/src/pages/providers/provider-form-dialog.tsx
index 3f19ed20..e3ece71b 100644
--- a/ui/web/src/pages/providers/provider-form-dialog.tsx
+++ b/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>