upadating directory filter in design.

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",

src/pages/Directory/DirectoryPageHeader.jsx

@@ -299,7 +299,19 @@ const DirectoryPageHeader = ({
                 {/* Removed the numerical badge for notes filter */}
               </a>
 
-              <div className="dropdown-menu p-3" style={{ width: "300px", maxHeight: "400px", overflowY: "auto" }}>
+              <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}`}>
@@ -310,13 +322,19 @@ const DirectoryPageHeader = ({
                           checked={selectedCreators.includes(name)}
                           onChange={() => handleToggleCreator(name)}
                         />
-                    <label className="form-check-label" htmlFor={`creator-${idx}`}>
+                        <label className="form-check-label text-nowrap" htmlFor={`creator-${idx}`}>
                           {name}
                         </label>
                       </div>
                     ))}
+                  </div>
 
-                <p className="text-muted mt-3 mb-1">Organization</p>
+                  {/* 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
@@ -326,13 +344,16 @@ const DirectoryPageHeader = ({
                           checked={selectedOrgs.includes(org)}
                           onChange={() => handleToggleOrg(org)}
                         />
-                    <label className="form-check-label" htmlFor={`org-${idx}`}>
+                        <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>
           )}