From 45dadc88a227da1a292b461abfa2a9a5044aa8c0 Mon Sep 17 00:00:00 2001
From: Kartik sharma <kartik.sharma@marcoaiot.com>
Date: Fri, 27 Jun 2025 16:57:57 +0530
Subject: [PATCH] upadating directory filter in design.

---
 .../Directory/NoteCardDirectoryEditable.jsx   |  2 +-
 src/pages/Directory/DirectoryPageHeader.jsx   | 83 ++++++++++++-------
 2 files changed, 53 insertions(+), 32 deletions(-)

diff --git a/src/components/Directory/NoteCardDirectoryEditable.jsx b/src/components/Directory/NoteCardDirectoryEditable.jsx
index 35f0b946..e6991c2e 100644
--- a/src/components/Directory/NoteCardDirectoryEditable.jsx
+++ b/src/components/Directory/NoteCardDirectoryEditable.jsx
@@ -115,7 +115,7 @@ const NoteCardDirectoryEditable = ({
         </GlobalModel>
       )}
       <div
-        className="card p-1 shadow-sm border-1 mb-4 rounded"
+        className="card p-1 shadow-sm border-1 mb-4 p-4 rounded"
         style={{
           width: "100%",
           background: noteItem.isActive ? "#fff" : "#f8f6f6",
diff --git a/src/pages/Directory/DirectoryPageHeader.jsx b/src/pages/Directory/DirectoryPageHeader.jsx
index 1fa86f3d..6e4ad713 100644
--- a/src/pages/Directory/DirectoryPageHeader.jsx
+++ b/src/pages/Directory/DirectoryPageHeader.jsx
@@ -299,40 +299,61 @@ const DirectoryPageHeader = ({
                 {/* Removed the numerical badge for notes filter */}
               </a>
 
-              <div className="dropdown-menu p-3" style={{ width: "300px", maxHeight: "400px", overflowY: "auto" }}>
-                <p className="text-muted mb-1">Created By</p>
-                {allCreators.map((name, idx) => (
-                  <div className="form-check mb-1" key={`creator-${idx}`}>
-                    <input
-                      className="form-check-input"
-                      type="checkbox"
-                      id={`creator-${idx}`}
-                      checked={selectedCreators.includes(name)}
-                      onChange={() => handleToggleCreator(name)}
-                    />
-                    <label className="form-check-label" htmlFor={`creator-${idx}`}>
-                      {name}
-                    </label>
+              <div
+                className="dropdown-menu p-3"
+                style={{
+                  minWidth: "600px",
+                  maxHeight: "400px",
+                  overflowY: "auto",
+                  overflowX: "hidden",
+                  whiteSpace: "normal"
+                }}
+              >
+                <div className="d-flex">
+                  {/* Created By */}
+                  <div className="pe-3" style={{ flex: 1 }}>
+                    <p className="text-muted mb-1">Created By</p>
+                    {allCreators.map((name, idx) => (
+                      <div className="form-check mb-1" key={`creator-${idx}`}>
+                        <input
+                          className="form-check-input"
+                          type="checkbox"
+                          id={`creator-${idx}`}
+                          checked={selectedCreators.includes(name)}
+                          onChange={() => handleToggleCreator(name)}
+                        />
+                        <label className="form-check-label text-nowrap" htmlFor={`creator-${idx}`}>
+                          {name}
+                        </label>
+                      </div>
+                    ))}
                   </div>
-                ))}
 
-                <p className="text-muted mt-3 mb-1">Organization</p>
-                {filteredOrganizations.map((org, idx) => (
-                  <div className="form-check mb-1" key={`org-${idx}`}>
-                    <input
-                      className="form-check-input"
-                      type="checkbox"
-                      id={`org-${idx}`}
-                      checked={selectedOrgs.includes(org)}
-                      onChange={() => handleToggleOrg(org)}
-                    />
-                    <label className="form-check-label" htmlFor={`org-${idx}`}>
-                      {org}
-                    </label>
+                  {/* Divider */}
+                  <div style={{ width: "1px", backgroundColor: "#dee2e6", margin: "0 12px" }}></div>
+
+                  {/* Organization */}
+                  <div className="ps-3" style={{ flex: 1 }}>
+                    <p className="text-muted mb-1">Organization</p>
+                    {filteredOrganizations.map((org, idx) => (
+                      <div className="form-check mb-1" key={`org-${idx}`}>
+                        <input
+                          className="form-check-input"
+                          type="checkbox"
+                          id={`org-${idx}`}
+                          checked={selectedOrgs.includes(org)}
+                          onChange={() => handleToggleOrg(org)}
+                        />
+                        <label className="form-check-label text-nowrap" htmlFor={`org-${idx}`}>
+                          {org}
+                        </label>
+                      </div>
+                    ))}
                   </div>
-                ))}
+                </div>
 
-                <div className="d-flex justify-content-between mt-2">
+                {/* Buttons */}
+                <div className="d-flex justify-content-between mt-3">
                   <button
                     className="btn btn-sm btn-outline-danger"
                     onClick={() => {
@@ -340,7 +361,6 @@ const DirectoryPageHeader = ({
                       setSelectedOrgs([]);
                       setFilteredOrganizations(allOrganizations);
                       setFilterAppliedNotes(notesForFilter);
-                      
                     }}
                   >
                     Clear
@@ -350,6 +370,7 @@ const DirectoryPageHeader = ({
                   </button>
                 </div>
               </div>
+
             </div>
           )}