In Contact View, empty Description and Notes section should be hidden and its needs to be fixed the UI of this pop-up

src/components/Directory/NotesDirectory.jsx

@@ -114,24 +114,25 @@ const NotesDirectory = ({
     ? contactProfile?.notes || []
     : contactNotes || [];
 
+  const hasNotes = notesToDisplay.length > 0;
+
   return (
     <div className="text-start mt-10">
       <div className="d-flex align-items-center justify-content-between">
         <div className="row w-100 align-items-center">
+          {hasNotes && (
             <div className="col col-2">
               <p className="fw-semibold m-0 ms-3">Notes :</p>
             </div>
+          )}
           <div className="col d-flex justify-content-end gap-2 pe-0">
             {" "}
             <div className="d-flex align-items-center justify-content-between">
+             
                 <label
                   className="switch switch-primary"
                   style={{
-                  visibility:
+                    fontSize: "15px",
-                    contactProfile?.notes?.length > 0 || contactNotes?.length > 0
-                      ? "visible"
-                      : "hidden",
-                  fontSize: "15px",        // smaller text
                   }}
                 >
                   <input

src/components/Directory/ProfileContactDirectory.jsx

@@ -11,6 +11,7 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
   const [profileContactState, setProfileContactState] = useState(null);
   const [expanded, setExpanded] = useState(false);
 
+  // Safely access description, defaulting to an empty string if not present
   const description = profileContactState?.description || "";
   const limit = 500;
 
@@ -40,7 +41,7 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
         middleName = names[1]; // This was an error in the original prompt, corrected to names[1]
         lastName = names[names.length - 1];
         // Reconstruct full name to be precise with spacing
-        fullName = `${firstName} ${middleName ? middleName + ' ' : ''}${lastName}`;
+        fullName = `${firstName} ${middleName ? middleName + " " : ""}${lastName}`;
       } else {
         // Fallback if no names or empty string
         firstName = "Contact";
@@ -292,7 +293,11 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
           )}
         </div>
 
-        <div className="d-flex mb-2 align-items-start" style={{ marginLeft: "3rem" }}>
+        {description && (
+          <div
+            className="d-flex mb-2 align-items-start"
+            style={{ marginLeft: "3rem" }}
+          >
             <div className="d-flex" style={{ minWidth: "130px" }}>
               <span className="d-flex align-items-start">
                 <i className="bx bx-book me-1"></i>
@@ -316,7 +321,7 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
               )}
             </div>
           </div>
-
+        )}
 
         <hr className="my-1" />
         <NotesDirectory