Improve UI by adding custom scrollbars and enhancing layout

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 705f2157-ef97-4fbd-89e4-8c7f2ecaea90
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7ed01c5f-a82d-405a-b728-b2e3d127c60c/d6cd39b2-e937-4d4b-9540-dc0b73a6a1f5.jpg

client/src/components/ui/dialog.tsx

@@ -41,7 +41,7 @@ const DialogContent = React.forwardRef<
       )}
       {...props}
     >
-      <div className="overflow-y-auto pr-1">
+      <div className="overflow-y-auto pr-1 scrollbar-custom">
         {children}
       </div>
       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">

client/src/layouts/dashboard-layout.tsx

@@ -137,7 +137,7 @@ export function DashboardLayout({ children, title, description }: DashboardLayou
           </Link>
         </div>
 
-        <div className="overflow-y-auto h-[calc(100%-64px)] scrollbar-thin">
+        <div className="overflow-y-auto h-[calc(100%-64px)] scrollbar-custom">
           <div className="px-2 pt-4">
             <Link 
               href="/"
@@ -222,7 +222,7 @@ export function DashboardLayout({ children, title, description }: DashboardLayou
                   <ChevronDown className="h-4 w-4 text-muted-foreground" />
                 </Button>
               </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" className="max-h-[70vh] overflow-y-auto">
+              <DropdownMenuContent align="end" className="max-h-[70vh] overflow-y-auto scrollbar-custom">
                 <DropdownMenuLabel>My Account</DropdownMenuLabel>
                 <DropdownMenuSeparator />
                 <DropdownMenuItem>
@@ -250,7 +250,9 @@ export function DashboardLayout({ children, title, description }: DashboardLayou
             {description && <p className="text-gray-600 dark:text-gray-400">{description}</p>}
           </div>
 
-          {children}
+          <div className="overflow-visible">
+            {children}
+          </div>
         </main>
       </div>
     </div>

client/src/pages/ldap-query-builder-page.tsx

@@ -869,7 +869,7 @@ const LdapQueryBuilderPage = () => {
   };
 
   return (
-    <DashboardLayout>
+    <DashboardLayout title="LDAP Query Builder">
       <div className="container mx-auto py-6">
         <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
           {/* Sidebar */}