From b627e7dc1549fe6365803f22eaf4785e9567cb2f Mon Sep 17 00:00:00 2001
From: seanrobertwright <seanrobertwright@gmail.com>
Date: Sat, 4 Oct 2025 19:37:53 -0400
Subject: [PATCH] feat: enhance AddKnowledgeDialog with scrollable content and
 fixed header

- Introduced ScrollableDialogContent component for better user experience in AddKnowledgeDialog.
- Updated dialog structure to include a fixed header and scrollable body, improving accessibility and usability.
- Adjusted styles to maintain visual consistency and added maxHeight prop for dynamic height management.
- Updated .gitignore to include DIALOG-FIX.md for better tracking of dialog-related changes.

This change enhances the dialog's functionality, making it more user-friendly while adhering to design principles.
---
 .gitignore                                    |   1 +
 .../components/AddKnowledgeDialog.tsx         | 370 +++++++++---------
 .../src/features/ui/primitives/dialog.tsx     |  68 +++-
 3 files changed, 256 insertions(+), 183 deletions(-)

diff --git a/.gitignore b/.gitignore
index 96c7a645e3..1d6f7db707 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,3 +12,4 @@ temp/
 UAT/
 
 .DS_Store
+DIALOG-FIX.md
\ No newline at end of file
diff --git a/archon-ui-main/src/features/knowledge/components/AddKnowledgeDialog.tsx b/archon-ui-main/src/features/knowledge/components/AddKnowledgeDialog.tsx
index 3788affd18..fde07a8f02 100644
--- a/archon-ui-main/src/features/knowledge/components/AddKnowledgeDialog.tsx
+++ b/archon-ui-main/src/features/knowledge/components/AddKnowledgeDialog.tsx
@@ -7,7 +7,7 @@ import { Globe, Loader2, Upload } from "lucide-react";
 import { useId, useState } from "react";
 import { useToast } from "@/features/shared/hooks/useToast";
 import { Button, Input, Label } from "../../ui/primitives";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../../ui/primitives/dialog";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, ScrollableDialogContent } from "../../ui/primitives/dialog";
 import { cn } from "../../ui/primitives/styles";
 import { Tabs, TabsContent } from "../../ui/primitives/tabs";
 import { useCrawlUrl, useUploadDocument } from "../hooks";
@@ -127,208 +127,214 @@ export const AddKnowledgeDialog: React.FC<AddKnowledgeDialogProps> = ({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[600px]">
-        <DialogHeader>
-          <DialogTitle>Add Knowledge</DialogTitle>
-          <DialogDescription>Crawl websites or upload documents to expand your knowledge base.</DialogDescription>
-        </DialogHeader>
+      <ScrollableDialogContent className="sm:max-w-[600px]" maxHeight="85vh">
+        {/* Fixed Header */}
+        <div className="flex-shrink-0 p-6 pb-4">
+          <DialogHeader>
+            <DialogTitle>Add Knowledge</DialogTitle>
+            <DialogDescription>Crawl websites or upload documents to expand your knowledge base.</DialogDescription>
+          </DialogHeader>
+        </div>
 
-        <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as "crawl" | "upload")}>
-          {/* Enhanced Tab Buttons */}
-          <div className="grid grid-cols-2 gap-3 p-2 rounded-xl backdrop-blur-md bg-gradient-to-b from-gray-100/30 via-gray-50/20 to-white/40 dark:from-gray-900/30 dark:via-gray-800/20 dark:to-black/40 border border-gray-200/40 dark:border-gray-700/40">
-            {/* Crawl Website Tab */}
-            <button
-              type="button"
-              onClick={() => setActiveTab("crawl")}
-              className={cn(
-                "relative flex items-center justify-center gap-3 px-6 py-4 rounded-lg transition-all duration-300",
-                "backdrop-blur-md border-2 font-medium text-sm",
-                activeTab === "crawl"
-                  ? "bg-gradient-to-b from-cyan-100/70 via-cyan-50/40 to-white/80 dark:from-cyan-900/40 dark:via-cyan-800/25 dark:to-black/50 border-cyan-400/60 text-cyan-700 dark:text-cyan-300 shadow-[0_0_20px_rgba(34,211,238,0.25)]"
-                  : "bg-gradient-to-b from-white/40 via-white/30 to-white/60 dark:from-gray-800/40 dark:via-gray-800/30 dark:to-black/60 border-gray-300/40 dark:border-gray-600/40 text-gray-600 dark:text-gray-300 hover:border-cyan-300/50 hover:text-cyan-600 dark:hover:text-cyan-400 hover:shadow-[0_0_15px_rgba(34,211,238,0.15)]",
-              )}
-            >
-              {/* Top accent glow for active state */}
-              {activeTab === "crawl" && (
-                <div className="pointer-events-none absolute inset-x-0 top-0">
-                  <div className="mx-2 mt-0.5 h-[2px] rounded-full bg-cyan-500" />
-                  <div className="-mt-1 h-8 w-full bg-gradient-to-b from-cyan-500/30 to-transparent blur-md" />
+        {/* Scrollable Content */}
+        <div className="flex-1 overflow-y-auto px-6 pb-6">
+          <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as "crawl" | "upload")}>
+            {/* Enhanced Tab Buttons */}
+            <div className="grid grid-cols-2 gap-3 p-2 rounded-xl backdrop-blur-md bg-gradient-to-b from-gray-100/30 via-gray-50/20 to-white/40 dark:from-gray-900/30 dark:via-gray-800/20 dark:to-black/40 border border-gray-200/40 dark:border-gray-700/40">
+              {/* Crawl Website Tab */}
+              <button
+                type="button"
+                onClick={() => setActiveTab("crawl")}
+                className={cn(
+                  "relative flex items-center justify-center gap-3 px-6 py-4 rounded-lg transition-all duration-300",
+                  "backdrop-blur-md border-2 font-medium text-sm",
+                  activeTab === "crawl"
+                    ? "bg-gradient-to-b from-cyan-100/70 via-cyan-50/40 to-white/80 dark:from-cyan-900/40 dark:via-cyan-800/25 dark:to-black/50 border-cyan-400/60 text-cyan-700 dark:text-cyan-300 shadow-[0_0_20px_rgba(34,211,238,0.25)]"
+                    : "bg-gradient-to-b from-white/40 via-white/30 to-white/60 dark:from-gray-800/40 dark:via-gray-800/30 dark:to-black/60 border-gray-300/40 dark:border-gray-600/40 text-gray-600 dark:text-gray-300 hover:border-cyan-300/50 hover:text-cyan-600 dark:hover:text-cyan-400 hover:shadow-[0_0_15px_rgba(34,211,238,0.15)]",
+                )}
+              >
+                {/* Top accent glow for active state */}
+                {activeTab === "crawl" && (
+                  <div className="pointer-events-none absolute inset-x-0 top-0">
+                    <div className="mx-2 mt-0.5 h-[2px] rounded-full bg-cyan-500" />
+                    <div className="-mt-1 h-8 w-full bg-gradient-to-b from-cyan-500/30 to-transparent blur-md" />
+                  </div>
+                )}
+                <Globe className={cn("w-5 h-5", activeTab === "crawl" ? "text-cyan-500" : "text-current")} />
+                <div className="flex flex-col items-start gap-0.5">
+                  <span className="font-semibold">Crawl Website</span>
+                  <span className="text-xs opacity-80">Scan web pages</span>
                 </div>
-              )}
-              <Globe className={cn("w-5 h-5", activeTab === "crawl" ? "text-cyan-500" : "text-current")} />
-              <div className="flex flex-col items-start gap-0.5">
-                <span className="font-semibold">Crawl Website</span>
-                <span className="text-xs opacity-80">Scan web pages</span>
-              </div>
-            </button>
+              </button>
 
-            {/* Upload Document Tab */}
-            <button
-              type="button"
-              onClick={() => setActiveTab("upload")}
-              className={cn(
-                "relative flex items-center justify-center gap-3 px-6 py-4 rounded-lg transition-all duration-300",
-                "backdrop-blur-md border-2 font-medium text-sm",
-                activeTab === "upload"
-                  ? "bg-gradient-to-b from-purple-100/70 via-purple-50/40 to-white/80 dark:from-purple-900/40 dark:via-purple-800/25 dark:to-black/50 border-purple-400/60 text-purple-700 dark:text-purple-300 shadow-[0_0_20px_rgba(147,51,234,0.25)]"
-                  : "bg-gradient-to-b from-white/40 via-white/30 to-white/60 dark:from-gray-800/40 dark:via-gray-800/30 dark:to-black/60 border-gray-300/40 dark:border-gray-600/40 text-gray-600 dark:text-gray-300 hover:border-purple-300/50 hover:text-purple-600 dark:hover:text-purple-400 hover:shadow-[0_0_15px_rgba(147,51,234,0.15)]",
-              )}
-            >
-              {/* Top accent glow for active state */}
-              {activeTab === "upload" && (
-                <div className="pointer-events-none absolute inset-x-0 top-0">
-                  <div className="mx-2 mt-0.5 h-[2px] rounded-full bg-purple-500" />
-                  <div className="-mt-1 h-8 w-full bg-gradient-to-b from-purple-500/30 to-transparent blur-md" />
+              {/* Upload Document Tab */}
+              <button
+                type="button"
+                onClick={() => setActiveTab("upload")}
+                className={cn(
+                  "relative flex items-center justify-center gap-3 px-6 py-4 rounded-lg transition-all duration-300",
+                  "backdrop-blur-md border-2 font-medium text-sm",
+                  activeTab === "upload"
+                    ? "bg-gradient-to-b from-purple-100/70 via-purple-50/40 to-white/80 dark:from-purple-900/40 dark:via-purple-800/25 dark:to-black/50 border-purple-400/60 text-purple-700 dark:text-purple-300 shadow-[0_0_20px_rgba(147,51,234,0.25)]"
+                    : "bg-gradient-to-b from-white/40 via-white/30 to-white/60 dark:from-gray-800/40 dark:via-gray-800/30 dark:to-black/60 border-gray-300/40 dark:border-gray-600/40 text-gray-600 dark:text-gray-300 hover:border-purple-300/50 hover:text-purple-600 dark:hover:text-purple-400 hover:shadow-[0_0_15px_rgba(147,51,234,0.15)]",
+                )}
+              >
+                {/* Top accent glow for active state */}
+                {activeTab === "upload" && (
+                  <div className="pointer-events-none absolute inset-x-0 top-0">
+                    <div className="mx-2 mt-0.5 h-[2px] rounded-full bg-purple-500" />
+                    <div className="-mt-1 h-8 w-full bg-gradient-to-b from-purple-500/30 to-transparent blur-md" />
+                  </div>
+                )}
+                <Upload className={cn("w-5 h-5", activeTab === "upload" ? "text-purple-500" : "text-current")} />
+                <div className="flex flex-col items-start gap-0.5">
+                  <span className="font-semibold">Upload Document</span>
+                  <span className="text-xs opacity-80">Add local files</span>
                 </div>
-              )}
-              <Upload className={cn("w-5 h-5", activeTab === "upload" ? "text-purple-500" : "text-current")} />
-              <div className="flex flex-col items-start gap-0.5">
-                <span className="font-semibold">Upload Document</span>
-                <span className="text-xs opacity-80">Add local files</span>
-              </div>
-            </button>
-          </div>
+              </button>
+            </div>
 
-          {/* Crawl Tab */}
-          <TabsContent value="crawl" className="space-y-6 mt-6">
-            {/* Enhanced URL Input Section */}
-            <div className="space-y-3">
-              <Label htmlFor={urlId} className="text-sm font-medium text-gray-900 dark:text-white/90">
-                Website URL
-              </Label>
-              <div className="relative">
-                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                  <Globe className="h-5 w-5" style={{ color: "#0891b2" }} />
+            {/* Crawl Tab */}
+            <TabsContent value="crawl" className="space-y-6 mt-6">
+              {/* Enhanced URL Input Section */}
+              <div className="space-y-3">
+                <Label htmlFor={urlId} className="text-sm font-medium text-gray-900 dark:text-white/90">
+                  Website URL
+                </Label>
+                <div className="relative">
+                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                    <Globe className="h-5 w-5" style={{ color: "#0891b2" }} />
+                  </div>
+                  <Input
+                    id={urlId}
+                    type="url"
+                    placeholder="https://docs.example.com or https://github.com/..."
+                    value={crawlUrl}
+                    onChange={(e) => setCrawlUrl(e.target.value)}
+                    disabled={isProcessing}
+                    className="pl-10 h-12 backdrop-blur-md bg-gradient-to-r from-white/60 to-white/50 dark:from-black/60 dark:to-black/50 border-gray-300/60 dark:border-gray-600/60 focus:border-cyan-400/70 focus:shadow-[0_0_20px_rgba(34,211,238,0.15)]"
+                  />
                 </div>
-                <Input
-                  id={urlId}
-                  type="url"
-                  placeholder="https://docs.example.com or https://github.com/..."
-                  value={crawlUrl}
-                  onChange={(e) => setCrawlUrl(e.target.value)}
-                  disabled={isProcessing}
-                  className="pl-10 h-12 backdrop-blur-md bg-gradient-to-r from-white/60 to-white/50 dark:from-black/60 dark:to-black/50 border-gray-300/60 dark:border-gray-600/60 focus:border-cyan-400/70 focus:shadow-[0_0_20px_rgba(34,211,238,0.15)]"
-                />
+                <p className="text-xs text-gray-500 dark:text-gray-400">
+                  Enter the URL of a website you want to crawl for knowledge
+                </p>
               </div>
-              <p className="text-xs text-gray-500 dark:text-gray-400">
-                Enter the URL of a website you want to crawl for knowledge
-              </p>
-            </div>
 
-            <div className="space-y-6">
-              <KnowledgeTypeSelector value={crawlType} onValueChange={setCrawlType} disabled={isProcessing} />
+              <div className="space-y-6">
+                <KnowledgeTypeSelector value={crawlType} onValueChange={setCrawlType} disabled={isProcessing} />
 
-              <LevelSelector value={maxDepth} onValueChange={setMaxDepth} disabled={isProcessing} />
-            </div>
+                <LevelSelector value={maxDepth} onValueChange={setMaxDepth} disabled={isProcessing} />
+              </div>
 
-            <TagInput
-              tags={tags}
-              onTagsChange={setTags}
-              disabled={isProcessing}
-              placeholder="Add tags like 'api', 'documentation', 'guide'..."
-            />
+              <TagInput
+                tags={tags}
+                onTagsChange={setTags}
+                disabled={isProcessing}
+                placeholder="Add tags like 'api', 'documentation', 'guide'..."
+              />
 
-            <Button
-              onClick={handleCrawl}
-              disabled={isProcessing || !crawlUrl}
-              className="w-full bg-gradient-to-r from-cyan-500 to-cyan-600 hover:from-cyan-600 hover:to-cyan-700 backdrop-blur-md border border-cyan-400/50 shadow-[0_0_20px_rgba(6,182,212,0.25)] hover:shadow-[0_0_30px_rgba(6,182,212,0.35)] transition-all duration-200"
-            >
-              {crawlMutation.isPending ? (
-                <>
-                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                  Starting Crawl...
-                </>
-              ) : (
-                <>
-                  <Globe className="w-4 h-4 mr-2" />
-                  Start Crawling
-                </>
-              )}
-            </Button>
-          </TabsContent>
+              <Button
+                onClick={handleCrawl}
+                disabled={isProcessing || !crawlUrl}
+                className="w-full bg-gradient-to-r from-cyan-500 to-cyan-600 hover:from-cyan-600 hover:to-cyan-700 backdrop-blur-md border border-cyan-400/50 shadow-[0_0_20px_rgba(6,182,212,0.25)] hover:shadow-[0_0_30px_rgba(6,182,212,0.35)] transition-all duration-200"
+              >
+                {crawlMutation.isPending ? (
+                  <>
+                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                    Starting Crawl...
+                  </>
+                ) : (
+                  <>
+                    <Globe className="w-4 h-4 mr-2" />
+                    Start Crawling
+                  </>
+                )}
+              </Button>
+            </TabsContent>
 
-          {/* Upload Tab */}
-          <TabsContent value="upload" className="space-y-6 mt-6">
-            {/* Enhanced File Input Section */}
-            <div className="space-y-3">
-              <Label htmlFor={fileId} className="text-sm font-medium text-gray-900 dark:text-white/90">
-                Document File
-              </Label>
+            {/* Upload Tab */}
+            <TabsContent value="upload" className="space-y-6 mt-6">
+              {/* Enhanced File Input Section */}
+              <div className="space-y-3">
+                <Label htmlFor={fileId} className="text-sm font-medium text-gray-900 dark:text-white/90">
+                  Document File
+                </Label>
 
-              {/* Custom File Upload Area */}
-              <div className="relative">
-                <input
-                  id={fileId}
-                  type="file"
-                  accept=".txt,.md,.pdf,.doc,.docx,.html,.htm"
-                  onChange={(e) => setSelectedFile(e.target.files?.[0] || null)}
-                  disabled={isProcessing}
-                  className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed z-10"
-                />
-                <div
-                  className={cn(
-                    "relative h-20 rounded-xl border-2 border-dashed transition-all duration-200",
-                    "backdrop-blur-md bg-gradient-to-b from-white/60 via-white/40 to-white/50 dark:from-black/60 dark:via-black/40 dark:to-black/50",
-                    "flex flex-col items-center justify-center gap-2 text-center p-4",
-                    selectedFile
-                      ? "border-purple-400/70 bg-gradient-to-b from-purple-50/60 to-white/60 dark:from-purple-900/20 dark:to-black/50"
-                      : "border-gray-300/60 dark:border-gray-600/60 hover:border-purple-400/50 hover:bg-gradient-to-b hover:from-purple-50/40 hover:to-white/60 dark:hover:from-purple-900/10 dark:hover:to-black/50",
-                    isProcessing && "opacity-50 cursor-not-allowed",
-                  )}
-                >
-                  <Upload
-                    className={cn("w-6 h-6", selectedFile ? "text-purple-500" : "text-gray-400 dark:text-gray-500")}
+                {/* Custom File Upload Area */}
+                <div className="relative">
+                  <input
+                    id={fileId}
+                    type="file"
+                    accept=".txt,.md,.pdf,.doc,.docx,.html,.htm"
+                    onChange={(e) => setSelectedFile(e.target.files?.[0] || null)}
+                    disabled={isProcessing}
+                    className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed z-10"
                   />
-                  <div className="text-sm">
-                    {selectedFile ? (
-                      <div className="space-y-1">
-                        <p className="font-medium text-purple-700 dark:text-purple-400">{selectedFile.name}</p>
-                        <p className="text-xs text-purple-600 dark:text-purple-400">
-                          {Math.round(selectedFile.size / 1024)} KB
-                        </p>
-                      </div>
-                    ) : (
-                      <div className="space-y-1">
-                        <p className="font-medium text-gray-700 dark:text-gray-300">Click to browse or drag & drop</p>
-                        <p className="text-xs text-gray-500 dark:text-gray-400">
-                          PDF, DOC, DOCX, TXT, MD files supported
-                        </p>
-                      </div>
+                  <div
+                    className={cn(
+                      "relative h-20 rounded-xl border-2 border-dashed transition-all duration-200",
+                      "backdrop-blur-md bg-gradient-to-b from-white/60 via-white/40 to-white/50 dark:from-black/60 dark:via-black/40 dark:to-black/50",
+                      "flex flex-col items-center justify-center gap-2 text-center p-4",
+                      selectedFile
+                        ? "border-purple-400/70 bg-gradient-to-b from-purple-50/60 to-white/60 dark:from-purple-900/20 dark:to-black/50"
+                        : "border-gray-300/60 dark:border-gray-600/60 hover:border-purple-400/50 hover:bg-gradient-to-b hover:from-purple-50/40 hover:to-white/60 dark:hover:from-purple-900/10 dark:hover:to-black/50",
+                      isProcessing && "opacity-50 cursor-not-allowed",
                     )}
+                  >
+                    <Upload
+                      className={cn("w-6 h-6", selectedFile ? "text-purple-500" : "text-gray-400 dark:text-gray-500")}
+                    />
+                    <div className="text-sm">
+                      {selectedFile ? (
+                        <div className="space-y-1">
+                          <p className="font-medium text-purple-700 dark:text-purple-400">{selectedFile.name}</p>
+                          <p className="text-xs text-purple-600 dark:text-purple-400">
+                            {Math.round(selectedFile.size / 1024)} KB
+                          </p>
+                        </div>
+                      ) : (
+                        <div className="space-y-1">
+                          <p className="font-medium text-gray-700 dark:text-gray-300">Click to browse or drag & drop</p>
+                          <p className="text-xs text-gray-500 dark:text-gray-400">
+                            PDF, DOC, DOCX, TXT, MD files supported
+                          </p>
+                        </div>
+                      )}
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
 
-            <KnowledgeTypeSelector value={uploadType} onValueChange={setUploadType} disabled={isProcessing} />
+              <KnowledgeTypeSelector value={uploadType} onValueChange={setUploadType} disabled={isProcessing} />
 
-            <TagInput
-              tags={uploadTags}
-              onTagsChange={setUploadTags}
-              disabled={isProcessing}
-              placeholder="Add tags like 'manual', 'reference', 'guide'..."
-            />
+              <TagInput
+                tags={uploadTags}
+                onTagsChange={setUploadTags}
+                disabled={isProcessing}
+                placeholder="Add tags like 'manual', 'reference', 'guide'..."
+              />
 
-            <Button
-              onClick={handleUpload}
-              disabled={isProcessing || !selectedFile}
-              className="w-full bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 backdrop-blur-md border border-purple-400/50 shadow-[0_0_20px_rgba(147,51,234,0.25)] hover:shadow-[0_0_30px_rgba(147,51,234,0.35)] transition-all duration-200"
-            >
-              {uploadMutation.isPending ? (
-                <>
-                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                  Uploading...
-                </>
-              ) : (
-                <>
-                  <Upload className="w-4 h-4 mr-2" />
-                  Upload Document
-                </>
-              )}
-            </Button>
-          </TabsContent>
-        </Tabs>
-      </DialogContent>
+              <Button
+                onClick={handleUpload}
+                disabled={isProcessing || !selectedFile}
+                className="w-full bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 backdrop-blur-md border border-purple-400/50 shadow-[0_0_20px_rgba(147,51,234,0.25)] hover:shadow-[0_0_30px_rgba(147,51,234,0.35)] transition-all duration-200"
+              >
+                {uploadMutation.isPending ? (
+                  <>
+                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                    Uploading...
+                  </>
+                ) : (
+                  <>
+                    <Upload className="w-4 h-4 mr-2" />
+                    Upload Document
+                  </>
+                )}
+              </Button>
+            </TabsContent>
+          </Tabs>
+        </div>
+      </ScrollableDialogContent>
     </Dialog>
   );
 };
diff --git a/archon-ui-main/src/features/ui/primitives/dialog.tsx b/archon-ui-main/src/features/ui/primitives/dialog.tsx
index 27947ebdbf..d743499466 100644
--- a/archon-ui-main/src/features/ui/primitives/dialog.tsx
+++ b/archon-ui-main/src/features/ui/primitives/dialog.tsx
@@ -33,8 +33,9 @@ export const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
     showCloseButton?: boolean;
+    maxHeight?: string;
   }
->(({ className, children, showCloseButton = true, ...props }, ref) => (
+>(({ className, children, showCloseButton = true, maxHeight = "90vh", ...props }, ref) => (
   <DialogPortal>
     <DialogOverlay />
     <DialogPrimitive.Content
@@ -43,6 +44,9 @@ export const DialogContent = React.forwardRef<
         "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
         "p-6 rounded-md backdrop-blur-md",
         "w-full max-w-2xl",
+        // Height constraints and scroll behavior
+        `max-h-[${maxHeight}]`,
+        "overflow-y-auto",
         // Matching original glassmorphism
         "bg-gradient-to-b from-white/80 to-white/60 dark:from-white/10 dark:to-black/30",
         "border border-gray-200 dark:border-zinc-800/50",
@@ -60,6 +64,7 @@ export const DialogContent = React.forwardRef<
         "after:rounded-t-md after:pointer-events-none",
         className,
       )}
+      style={{ maxHeight }}
       {...props}
     >
       <div className="relative z-10">{children}</div>
@@ -81,6 +86,67 @@ export const DialogContent = React.forwardRef<
 ));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
+// Scrollable Dialog Content with fixed header and scrollable body
+export const ScrollableDialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+    maxHeight?: string;
+  }
+>(({ className, children, showCloseButton = true, maxHeight = "90vh", ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
+        "rounded-md backdrop-blur-md",
+        "w-full max-w-2xl",
+        `max-h-[${maxHeight}]`,
+        "overflow-hidden flex flex-col",
+        // Matching original glassmorphism
+        "bg-gradient-to-b from-white/80 to-white/60 dark:from-white/10 dark:to-black/30",
+        "border border-gray-200 dark:border-zinc-800/50",
+        "shadow-[0_10px_30px_-15px_rgba(0,0,0,0.1)] dark:shadow-[0_10px_30px_-15px_rgba(0,0,0,0.7)]",
+        // Top gradient bar (matching original)
+        "before:content-[''] before:absolute before:top-0 before:left-0 before:right-0",
+        "before:h-[2px] before:rounded-t-[4px]",
+        "before:bg-gradient-to-r before:from-cyan-500 before:to-fuchsia-500",
+        "before:shadow-[0_0_10px_2px_rgba(34,211,238,0.4)]",
+        "dark:before:shadow-[0_0_20px_5px_rgba(34,211,238,0.7)]",
+        // Top gradient glow (matching original)
+        "after:content-[''] after:absolute after:top-0 after:left-0 after:right-0",
+        "after:h-16 after:bg-gradient-to-b",
+        "after:from-cyan-100 after:to-white dark:after:from-cyan-500/20 dark:after:to-fuchsia-500/5",
+        "after:rounded-t-md after:pointer-events-none",
+        className,
+      )}
+      style={{ maxHeight }}
+      {...props}
+    >
+      {/* Scrollable Content Area */}
+      <div className="flex-1 overflow-y-auto">
+        {children}
+      </div>
+      
+      {showCloseButton && (
+        <DialogPrimitive.Close
+          className={cn(
+            "absolute right-4 top-4 z-20",
+            "text-gray-500 dark:text-gray-400",
+            "hover:text-gray-700 dark:hover:text-white",
+            "transition-colors",
+          )}
+        >
+          <X className="h-5 w-5" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      )}
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+ScrollableDialogContent.displayName = "ScrollableDialogContent";
+
 // Dialog Header
 export const DialogHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (