From ae513eb2b208d12fcecd3f6d312491517260a95f Mon Sep 17 00:00:00 2001
From: alphaeusmote <41258468-alphaeusmote@users.noreply.replit.com>
Date: Fri, 11 Apr 2025 04:35:07 +0000
Subject: [PATCH] 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          | 2 +-
 client/src/layouts/dashboard-layout.tsx      | 8 +++++---
 client/src/pages/ldap-query-builder-page.tsx | 2 +-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/client/src/components/ui/dialog.tsx b/client/src/components/ui/dialog.tsx
index 1bbc125..db9e67a 100644
--- a/client/src/components/ui/dialog.tsx
+++ b/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">
diff --git a/client/src/layouts/dashboard-layout.tsx b/client/src/layouts/dashboard-layout.tsx
index 8cec4d1..e616903 100644
--- a/client/src/layouts/dashboard-layout.tsx
+++ b/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>
diff --git a/client/src/pages/ldap-query-builder-page.tsx b/client/src/pages/ldap-query-builder-page.tsx
index a8dc010..1d77633 100644
--- a/client/src/pages/ldap-query-builder-page.tsx
+++ b/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 */}