Fixed logic for different display options of "other contacts"

src/registrar/assets/js/get-gov-admin.js

@@ -643,24 +643,42 @@ function initializeWidgetOnList(list, parentId) {
         
             // 2 - Iterate through contact details and assemble html for summary
             let otherContactsSummary = ""
-            // Get the table rows of contact details
-            // Select all contact elements
-            const contacts = document.querySelectorAll('.dja-detail-list dl');
-
-            // Iterate through each contact element
             const bulletList = document.createElement('ul');
-            contacts.forEach(contact => {
-                const name = contact.querySelector('a#contact_info_name').innerText;
-                const title = contact.querySelector('span#contact_info_title').innerText;
-                const email = contact.querySelector('span#contact_info_email').innerText;
-                const phone = contact.querySelector('span#contact_info_phone').innerText;
-                const url = nameToUrlMap[name] || '#';
 
+            // CASE 1 - Contacts are not in a table (this happens if there is only one or two other contacts)
+            const contacts = document.querySelectorAll('.field-other_contacts .dja-detail-list dl');
+            if (contacts) {
+                contacts.forEach(contact => {
+                    const name = contact.querySelector('a#contact_info_name').innerText;
+                    const title = contact.querySelector('span#contact_info_title').innerText;
+                    const email = contact.querySelector('span#contact_info_email').innerText;
+                    const phone = contact.querySelector('span#contact_info_phone').innerText;
+                    const url = nameToUrlMap[name] || '#';
+                    // Format the contact information
+                    const listItem = document.createElement('li');
+                    listItem.innerHTML = `<a href="${url}">${name}</a>, ${title}, ${email}, ${phone}`;
+                    bulletList.appendChild(listItem);
+                });
+
+            }
+
+            // CASE 2 - Contacts are in a table (this happens if there is more than 2 contacts)
+            const otherContactsTable = document.querySelector('.form-row.field-other_contacts table tbody');
+            if (otherContactsTable) {
+                const otherContactsRows = otherContactsTable.querySelectorAll('tr');
+                otherContactsRows.forEach(contactRow => {
+                // Extract the contact details
+                const name = contactRow.querySelector('th').textContent.trim();
+                const title = contactRow.querySelectorAll('td')[0].textContent.trim();
+                const email = contactRow.querySelectorAll('td')[1].textContent.trim();
+                const phone = contactRow.querySelectorAll('td')[2].textContent.trim();
+                const url = nameToUrlMap[name] || '#';
                 // Format the contact information
                 const listItem = document.createElement('li');
                 listItem.innerHTML = `<a href="${url}">${name}</a>, ${title}, ${email}, ${phone}`;
                 bulletList.appendChild(listItem);
-            });
+                });
+            }
             otherContactsSummary += bulletList.outerHTML
 
 

src/registrar/assets/sass/_theme/_links.scss

@@ -11,12 +11,6 @@
     }
     .usa-icon {
         // align icon with x height
-        margin-top: units(0.5);
+        vertical-align: middle;
-        margin-right: units(0.5);
     }
 }
-
-.modelLink-icon {
-    margin-bottom: 2px;
-    vertical-align: middle;
-}