From b74c863794a301a1cfbbc52144e08c23c79bf633 Mon Sep 17 00:00:00 2001
From: Kartik sharma <kartik.sharma@marcoaiot.com>
Date: Tue, 1 Jul 2025 17:14:03 +0530
Subject: [PATCH] Reduce the checkbox size and remove unnecessary spacing
 within the Directory Notes and Contact filters.

---
 src/pages/Directory/DirectoryPageHeader.jsx | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/pages/Directory/DirectoryPageHeader.jsx b/src/pages/Directory/DirectoryPageHeader.jsx
index 6a3ae418..72f6390b 100644
--- a/src/pages/Directory/DirectoryPageHeader.jsx
+++ b/src/pages/Directory/DirectoryPageHeader.jsx
@@ -306,7 +306,7 @@ const DirectoryPageHeader = ({
                                 )}
                             </a>
 
-                            <div className="dropdown-menu p-0" style={{ minWidth: "700px" }}>
+                            <div className="dropdown-menu p-0" style={{ minWidth: "550px" }}>
                                 {/* Scrollable Filter Content */}
                                 <div
                                     className="p-3"
@@ -319,18 +319,19 @@ const DirectoryPageHeader = ({
                                 >
                                     <div className="d-flex gap-3">
                                         {/* Created By */}
-                                        <div style={{ flex: 0.50, maxHeight: "260px", overflowY: "auto" }}>
+                                        <div style={{ flexBasis: "30%", maxHeight: "260px", overflowY: "auto" }}>
                                             <div style={{ position: "sticky", top: 0, background: "#fff", zIndex: 1 }}>
                                                 <p className="text-muted mb-2 pt-2">Created By</p>
                                             </div>
                                             {allCreators.map((name, idx) => (
                                                 <div className="form-check mb-1" key={`creator-${idx}`}>
                                                     <input
-                                                        className="form-check-input"
+                                                        className="form-check-input form-check-input-sm"
                                                         type="checkbox"
                                                         id={`creator-${idx}`}
                                                         checked={selectedCreators.includes(name)}
                                                         onChange={() => handleToggleCreator(name)}
+                                                        style={{ width: "1rem", height: "1rem" }}
                                                     />
                                                     <label className="form-check-label text-nowrap" htmlFor={`creator-${idx}`}>
                                                         {name}
@@ -340,18 +341,19 @@ const DirectoryPageHeader = ({
                                         </div>
 
                                         {/* Organization */}
-                                        <div style={{ flex: 1, maxHeight: "260px", overflowY: "auto",overflowX: "hidden", }}>
+                                        <div style={{  maxHeight: "260px", overflowY: "auto",overflowX: "hidden", }}>
                                             <div style={{ position: "sticky", top: 0, background: "#fff", zIndex: 1 }}>
                                                 <p className="text-muted mb-2 pt-2">Organization</p>
                                             </div>
                                             {filteredOrganizations.map((org, idx) => (
                                                 <div className="form-check mb-1" key={`org-${idx}`}>
                                                     <input
-                                                        className="form-check-input"
+                                                        className="form-check-input form-check-input-sm"
                                                         type="checkbox"
                                                         id={`org-${idx}`}
                                                         checked={selectedOrgs.includes(org)}
                                                         onChange={() => handleToggleOrg(org)}
+                                                        style={{ width: "1rem", height: "1rem" }}
                                                     />
                                                     <label className="form-check-label text-nowrap" htmlFor={`org-${idx}`}>
                                                         {org}
@@ -444,11 +446,12 @@ const DirectoryPageHeader = ({
                                             {filteredBuckets.map(({ id, name }) => (
                                                 <div className="form-check me-3 mb-1" style={{ minWidth: "calc(50% - 15px)" }} key={id}>
                                                     <input
-                                                        className="form-check-input"
+                                                        className="form-check-input form-check-input-sm"
                                                         type="checkbox"
                                                         id={`bucket-${id}`}
                                                         checked={tempSelectedBucketIds.includes(id)}
                                                         onChange={() => handleTempBucketChange(id)}
+                                                        style={{ width: "1rem", height: "1rem" }}
                                                     />
                                                     <label className="form-check-label text-nowrap text-small" htmlFor={`bucket-${id}`}>
                                                         {name}
@@ -463,11 +466,12 @@ const DirectoryPageHeader = ({
                                             {filteredCategories.map(({ id, name }) => (
                                                 <div className="form-check me-3 mb-1" style={{ minWidth: "calc(50% - 15px)" }} key={id}>
                                                     <input
-                                                        className="form-check-input"
+                                                        className="form-check-input form-check-input-sm"
                                                         type="checkbox"
                                                         id={`cat-${id}`}
                                                         checked={tempSelectedCategoryIds.includes(id)}
                                                         onChange={() => handleTempCategoryChange(id)}
+                                                        style={{ width: "1rem", height: "1rem" }}
                                                     />
                                                     <label className="form-check-label text-nowrap text-small" htmlFor={`cat-${id}`}>
                                                         {name}