From dd29081fffa65f1a151f6c011f8cd233fe3d019b Mon Sep 17 00:00:00 2001
From: Rachid Mrad <rachid.mrad@ecstech.com>
Date: Tue, 1 Oct 2024 18:51:10 -0400
Subject: [PATCH 1/6] Fix bugs with the copy email button UI plus code cleanup

---
 src/registrar/admin.py                        |  2 +-
 src/registrar/assets/js/get-gov-admin.js      | 21 ++--
 src/registrar/assets/sass/_theme/_admin.scss  | 95 +++++++------------
 .../admin/change_form_object_tools.html       |  3 +-
 .../templates/admin/input_with_clipboard.html | 30 +++---
 .../admin/includes/contact_detail_list.html   |  2 +-
 .../admin/includes/detail_table_fieldset.html |  3 +-
 7 files changed, 63 insertions(+), 93 deletions(-)

diff --git a/src/registrar/admin.py b/src/registrar/admin.py
index 8718da9bad..a282e6c256 100644
--- a/src/registrar/admin.py
+++ b/src/registrar/admin.py
@@ -3112,7 +3112,7 @@ def display_admins(self, obj):
             admin_details += f'<a href="{change_url}">{escape(portfolio_admin)}</a><br>'
             admin_details += f"{escape(portfolio_admin.title)}<br>"
             admin_details += f"{escape(portfolio_admin.email)}"
-            admin_details += "<div class='admin-icon-group admin-icon-group__clipboard-link'>"
+            admin_details += "<div class='admin-icon-group'>"
             admin_details += f"<input aria-hidden='true' class='display-none' value='{escape(portfolio_admin.email)}'>"
             admin_details += (
                 "<button class='usa-button usa-button--unstyled padding-right-1 usa-button--icon padding-left-05"
diff --git a/src/registrar/assets/js/get-gov-admin.js b/src/registrar/assets/js/get-gov-admin.js
index 7e3c086c44..a0fe484208 100644
--- a/src/registrar/assets/js/get-gov-admin.js
+++ b/src/registrar/assets/js/get-gov-admin.js
@@ -515,10 +515,14 @@ document.addEventListener('DOMContentLoaded', function() {
     const formLabel = document.querySelector('label[for="id_action_needed_reason_email"]');
     let lastSentEmailContent = document.getElementById("last-sent-email-content");
     const initialDropdownValue = dropdown ? dropdown.value : null;
-    const initialEmailValue = textarea.value;
+    let initialEmailValue;
+    if (textarea)
+        initialEmailValue = textarea.value
 
     // We will use the const to control the modal
-    let isEmailAlreadySentConst = lastSentEmailContent.value.replace(/\s+/g, '') === textarea.value.replace(/\s+/g, '');
+    let isEmailAlreadySentConst;
+    if (lastSentEmailContent)
+        isEmailAlreadySentConst = lastSentEmailContent.value.replace(/\s+/g, '') === textarea.value.replace(/\s+/g, '');
     // We will use the function to control the label and help
     function isEmailAlreadySent() {
         return lastSentEmailContent.value.replace(/\s+/g, '') === textarea.value.replace(/\s+/g, '');
@@ -706,18 +710,6 @@ document.addEventListener('DOMContentLoaded', function() {
                 }
                 return '';
             }
-            // Extract the submitter name, title, email, and phone number
-            const submitterDiv = document.querySelector('.form-row.field-submitter');
-            const submitterNameElement = document.getElementById('id_submitter');
-            // We have to account for different superuser and analyst markups
-            const submitterName = submitterNameElement 
-                ? submitterNameElement.options[submitterNameElement.selectedIndex].text 
-                : submitterDiv.querySelector('a').text;
-            const submitterTitle = extractTextById('contact_info_title', submitterDiv);
-            const submitterEmail = extractTextById('contact_info_email', submitterDiv);
-            const submitterPhone = extractTextById('contact_info_phone', submitterDiv);
-            let submitterInfo = `${submitterName}${submitterTitle}${submitterEmail}${submitterPhone}`;
-
 
             //------ Senior Official
             const seniorOfficialDiv = document.querySelector('.form-row.field-senior_official');
@@ -734,7 +726,6 @@ document.addEventListener('DOMContentLoaded', function() {
                             `<strong>Current Websites:</strong> ${existingWebsites.join(', ')}</br>` +
                             `<strong>Rationale:</strong></br>` +
                             `<strong>Alternative Domains:</strong> ${alternativeDomains.join(', ')}</br>` +
-                            `<strong>Submitter:</strong> ${submitterInfo}</br>` +
                             `<strong>Senior Official:</strong> ${seniorOfficialInfo}</br>` +
                             `<strong>Other Employees:</strong> ${otherContactsSummary}</br>`;
             
diff --git a/src/registrar/assets/sass/_theme/_admin.scss b/src/registrar/assets/sass/_theme/_admin.scss
index 7bc7dc53ce..40258ec412 100644
--- a/src/registrar/assets/sass/_theme/_admin.scss
+++ b/src/registrar/assets/sass/_theme/_admin.scss
@@ -390,6 +390,9 @@ a.button,
 .usa-button--dja span {
     vertical-align: middle;
 }
+.usa-button--dja.usa-button--unstyled {
+    color: var(--link-fg);
+}
 .usa-button--dja:not(.usa-button--unstyled, .usa-button--outline, .usa-modal__close, .usa-button--secondary) {
     background: var(--button-bg);
 }
@@ -425,6 +428,37 @@ button .usa-icon,
 .button--clipboard .usa-icon {
     vertical-align: middle;      
 }
+// Make the clipboard button "float" inside of the input box
+.admin-icon-group {
+    position: relative;
+    display: inline;
+    align-items: center;
+
+    input {
+        // Allow for padding around the copy button
+        padding-right: 35px !important;
+    }
+
+    button {
+        width: max-content;
+        text-decoration: none !important;
+    }
+
+    @media (max-width: 1000px) {
+        button {
+            display: block;
+        }
+    }
+
+    span {
+        padding-left: 0.05rem;
+    }
+
+}
+.usa-button__small-text,
+.usa-button__small-text span {
+    font-size: 13px;
+}
 
 .module--custom {
     a {
@@ -670,71 +704,10 @@ address.dja-address-contact-list {
     }
 }
 
-// Make the clipboard button "float" inside of the input box
-.admin-icon-group {
-    position: relative;
-    display: inline;
-    align-items: center;
-
-    input {
-        // Allow for padding around the copy button
-        padding-right: 35px !important;
-        // Match the height of other inputs
-        min-height: 2.25rem !important;
-    }
-
-    button {
-        line-height: 14px;
-        width: max-content;
-        font-size: unset;
-        text-decoration: none !important;
-    }
-
-    @media (max-width: 1000px) {
-        button {
-            display: block;
-            padding-top: 8px;
-        }
-    }
-
-    span {
-        padding-left: 0.1rem;
-    }
-
-}
-
-.admin-icon-group.admin-icon-group__clipboard-link {
-    position: relative;
-    display: inline;
-    align-items: center;
-    
-
-    .usa-button--icon {
-        position: absolute;
-        right: auto;
-        left: 4px;
-        height: 100%;
-        top: -1px;
-    }
-    button {
-        font-size: unset !important;
-        display: inline-flex;
-        padding-top: 4px;
-        line-height: 14px;
-        width: max-content;
-        font-size: unset;
-        text-decoration: none !important;
-    }
-}
-
 .no-outline-on-click:focus {
     outline: none !important;
 }
 
-.usa-button__small-text {
-    font-size: small;
-}
-
 // Get rid of padding on all help texts
 form .aligned p.help, form .aligned div.help {
     padding-left: 0px !important;
diff --git a/src/registrar/templates/admin/change_form_object_tools.html b/src/registrar/templates/admin/change_form_object_tools.html
index 198140c19d..55c374419a 100644
--- a/src/registrar/templates/admin/change_form_object_tools.html
+++ b/src/registrar/templates/admin/change_form_object_tools.html
@@ -20,10 +20,11 @@
             </li>
             {% if opts.model_name == 'domainrequest' %}
             <li>
-                <a id="id-copy-to-clipboard-summary" class="button--clipboard" type="button" href="#">
+                <a id="id-copy-to-clipboard-summary" class="usa-button--dja button--clipboard" type="button" href="#">
                     <svg class="usa-icon" >
                         <use xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
                     </svg>
+                    <!-- the span is targeted in JS, do not remove -->
                     <span>{% translate "Copy request summary" %}</span>
                 </a>
             </li>
diff --git a/src/registrar/templates/admin/input_with_clipboard.html b/src/registrar/templates/admin/input_with_clipboard.html
index 5ad2b27f78..de89602b81 100644
--- a/src/registrar/templates/admin/input_with_clipboard.html
+++ b/src/registrar/templates/admin/input_with_clipboard.html
@@ -8,7 +8,7 @@
 <div class="admin-icon-group">
     {{ field }}
     <button 
-    class="usa-button usa-button--unstyled padding-left-1 usa-button--icon button--clipboard copy-to-clipboard" 
+    class="usa-button--dja usa-button usa-button__small-text usa-button--unstyled padding-left-1 usa-button--icon button--clipboard copy-to-clipboard" 
     type="button"
     >
         <div class="no-outline-on-click">
@@ -17,23 +17,27 @@
             >
                 <use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
             </svg>
-            Copy
+            <!-- the span is targeted in JS, do not remove -->
+            <span>Copy</span>
         </div>
     </button>
 </div>
 {% else %}
-<div class="admin-icon-group admin-icon-group__clipboard-link">
+<div class="admin-icon-group">
     <input aria-hidden="true" class="display-none" value="{{ field.email }}" />
-    <button 
-    class="usa-button usa-button--unstyled padding-right-1 usa-button--icon button--clipboard copy-to-clipboard text-no-underline padding-left-05" 
-    type="button"
-    >
-        <svg 
-        class="usa-icon" 
+    {% if field.email is not None %}
+        <button 
+        class="usa-button--dja usa-button usa-button__small-text usa-button--unstyled padding-right-1 usa-button--icon button--clipboard copy-to-clipboard text-no-underline padding-left-05" 
+        type="button"
         >
-            <use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
-        </svg>
-        Copy
-    </button>
+            <svg 
+            class="usa-icon" 
+            >
+                <use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
+            </svg>
+            <!-- the span is targeted in JS, do not remove -->
+            <span>Copy</span>
+        </button>
+    {% endif %}
 </div>
 {% endif %}
\ No newline at end of file
diff --git a/src/registrar/templates/django/admin/includes/contact_detail_list.html b/src/registrar/templates/django/admin/includes/contact_detail_list.html
index 7cc72e8e1a..b855dcf12e 100644
--- a/src/registrar/templates/django/admin/includes/contact_detail_list.html
+++ b/src/registrar/templates/django/admin/includes/contact_detail_list.html
@@ -26,7 +26,7 @@
         {% if user.email %}
             <span id="contact_info_email">{{ user.email }}</span>
             {% include "admin/input_with_clipboard.html" with field=user invisible_input_field=True %}
-            <br class="admin-icon-group__br">
+            <br>
         {% else %}
             None<br>
         {% endif %}
diff --git a/src/registrar/templates/django/admin/includes/detail_table_fieldset.html b/src/registrar/templates/django/admin/includes/detail_table_fieldset.html
index bee42d24e2..1e8fcaaeb5 100644
--- a/src/registrar/templates/django/admin/includes/detail_table_fieldset.html
+++ b/src/registrar/templates/django/admin/includes/detail_table_fieldset.html
@@ -269,7 +269,7 @@ <h2 class="usa-modal__heading">
                                 <td class="padding-left-1 text-size-small">
                                     <input aria-hidden="true" class="display-none" value="{{ contact.email }}" />
                                     <button 
-                                    class="usa-button usa-button--unstyled padding-right-1 usa-button--icon button--clipboard copy-to-clipboard usa-button__small-text text-no-underline" 
+                                    class="usa-button--dja usa-button usa-button__small-text usa-button--unstyled padding-right-1 usa-button--icon button--clipboard copy-to-clipboard usa-button__small-text text-no-underline" 
                                     type="button"
                                     >
                                         <svg 
@@ -277,6 +277,7 @@ <h2 class="usa-modal__heading">
                                         >
                                             <use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
                                         </svg>
+                                        <!-- the span is targeted in JS, do not remove -->
                                         <span>Copy email</span>
                                     </button>
                                 </td>

From 7a98ff56a3504616b1955095cea4ca84ae11a0ad Mon Sep 17 00:00:00 2001
From: Rachid Mrad <rachid.mrad@ecstech.com>
Date: Tue, 1 Oct 2024 19:16:32 -0400
Subject: [PATCH 2/6] Remove our custom disabled form styles

---
 src/registrar/assets/sass/_theme/_forms.scss | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/src/registrar/assets/sass/_theme/_forms.scss b/src/registrar/assets/sass/_theme/_forms.scss
index 44c224aad5..08e35b19f8 100644
--- a/src/registrar/assets/sass/_theme/_forms.scss
+++ b/src/registrar/assets/sass/_theme/_forms.scss
@@ -68,21 +68,6 @@ legend.float-left-tablet + button.float-right-tablet {
   }
 }
 
-// Custom style for disabled inputs
-@media (prefers-color-scheme: light) {
-  .usa-input:disabled, .usa-select:disabled, .usa-textarea:disabled {
-    background-color: #eeeeee;
-    color: #666666;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .usa-input:disabled, .usa-select:disabled, .usa-textarea:disabled {
-    background-color: var(--body-fg);
-    color: var(--close-button-hover-bg);
-  }
-}
-
 .read-only-label {
   font-size: size('body', 'sm');
   color: color('primary-dark');

From 07eb1e484a42b61bddac5949cc4430d588789491 Mon Sep 17 00:00:00 2001
From: Rachid Mrad <rachid.mrad@ecstech.com>
Date: Wed, 2 Oct 2024 22:26:53 -0400
Subject: [PATCH 3/6] cleanup

---
 src/registrar/admin.py                        |  2 +-
 src/registrar/assets/js/get-gov-admin.js      | 20 ++--
 src/registrar/assets/sass/_theme/_admin.scss  | 95 ++++++++++++-------
 .../admin/change_form_object_tools.html       |  3 +-
 .../templates/admin/input_with_clipboard.html | 26 +++--
 .../admin/includes/contact_detail_list.html   |  2 +-
 .../admin/includes/detail_table_fieldset.html |  4 +-
 7 files changed, 90 insertions(+), 62 deletions(-)

diff --git a/src/registrar/admin.py b/src/registrar/admin.py
index a282e6c256..8718da9bad 100644
--- a/src/registrar/admin.py
+++ b/src/registrar/admin.py
@@ -3112,7 +3112,7 @@ def display_admins(self, obj):
             admin_details += f'<a href="{change_url}">{escape(portfolio_admin)}</a><br>'
             admin_details += f"{escape(portfolio_admin.title)}<br>"
             admin_details += f"{escape(portfolio_admin.email)}"
-            admin_details += "<div class='admin-icon-group'>"
+            admin_details += "<div class='admin-icon-group admin-icon-group__clipboard-link'>"
             admin_details += f"<input aria-hidden='true' class='display-none' value='{escape(portfolio_admin.email)}'>"
             admin_details += (
                 "<button class='usa-button usa-button--unstyled padding-right-1 usa-button--icon padding-left-05"
diff --git a/src/registrar/assets/js/get-gov-admin.js b/src/registrar/assets/js/get-gov-admin.js
index a0fe484208..3a2bd5fde4 100644
--- a/src/registrar/assets/js/get-gov-admin.js
+++ b/src/registrar/assets/js/get-gov-admin.js
@@ -515,14 +515,10 @@ document.addEventListener('DOMContentLoaded', function() {
     const formLabel = document.querySelector('label[for="id_action_needed_reason_email"]');
     let lastSentEmailContent = document.getElementById("last-sent-email-content");
     const initialDropdownValue = dropdown ? dropdown.value : null;
-    let initialEmailValue;
-    if (textarea)
-        initialEmailValue = textarea.value
+    const initialEmailValue = textarea.value;
 
     // We will use the const to control the modal
-    let isEmailAlreadySentConst;
-    if (lastSentEmailContent)
-        isEmailAlreadySentConst = lastSentEmailContent.value.replace(/\s+/g, '') === textarea.value.replace(/\s+/g, '');
+    let isEmailAlreadySentConst = lastSentEmailContent.value.replace(/\s+/g, '') === textarea.value.replace(/\s+/g, '');
     // We will use the function to control the label and help
     function isEmailAlreadySent() {
         return lastSentEmailContent.value.replace(/\s+/g, '') === textarea.value.replace(/\s+/g, '');
@@ -710,6 +706,17 @@ document.addEventListener('DOMContentLoaded', function() {
                 }
                 return '';
             }
+            // Extract the submitter name, title, email, and phone number
+            const submitterDiv = document.querySelector('.form-row.field-submitter');
+            const submitterNameElement = document.getElementById('id_submitter');
+            // We have to account for different superuser and analyst markups
+            const submitterName = submitterNameElement 
+                ? submitterNameElement.options[submitterNameElement.selectedIndex].text 
+                : submitterDiv.querySelector('a').text;
+            const submitterTitle = extractTextById('contact_info_title', submitterDiv);
+            const submitterEmail = extractTextById('contact_info_email', submitterDiv);
+            const submitterPhone = extractTextById('contact_info_phone', submitterDiv);
+            let submitterInfo = `${submitterName}${submitterTitle}${submitterEmail}${submitterPhone}`;
 
             //------ Senior Official
             const seniorOfficialDiv = document.querySelector('.form-row.field-senior_official');
@@ -726,6 +733,7 @@ document.addEventListener('DOMContentLoaded', function() {
                             `<strong>Current Websites:</strong> ${existingWebsites.join(', ')}</br>` +
                             `<strong>Rationale:</strong></br>` +
                             `<strong>Alternative Domains:</strong> ${alternativeDomains.join(', ')}</br>` +
+                            `<strong>Submitter:</strong> ${submitterInfo}</br>` +
                             `<strong>Senior Official:</strong> ${seniorOfficialInfo}</br>` +
                             `<strong>Other Employees:</strong> ${otherContactsSummary}</br>`;
             
diff --git a/src/registrar/assets/sass/_theme/_admin.scss b/src/registrar/assets/sass/_theme/_admin.scss
index 40258ec412..46ed245dd6 100644
--- a/src/registrar/assets/sass/_theme/_admin.scss
+++ b/src/registrar/assets/sass/_theme/_admin.scss
@@ -390,9 +390,6 @@ a.button,
 .usa-button--dja span {
     vertical-align: middle;
 }
-.usa-button--dja.usa-button--unstyled {
-    color: var(--link-fg);
-}
 .usa-button--dja:not(.usa-button--unstyled, .usa-button--outline, .usa-modal__close, .usa-button--secondary) {
     background: var(--button-bg);
 }
@@ -428,37 +425,6 @@ button .usa-icon,
 .button--clipboard .usa-icon {
     vertical-align: middle;      
 }
-// Make the clipboard button "float" inside of the input box
-.admin-icon-group {
-    position: relative;
-    display: inline;
-    align-items: center;
-
-    input {
-        // Allow for padding around the copy button
-        padding-right: 35px !important;
-    }
-
-    button {
-        width: max-content;
-        text-decoration: none !important;
-    }
-
-    @media (max-width: 1000px) {
-        button {
-            display: block;
-        }
-    }
-
-    span {
-        padding-left: 0.05rem;
-    }
-
-}
-.usa-button__small-text,
-.usa-button__small-text span {
-    font-size: 13px;
-}
 
 .module--custom {
     a {
@@ -704,10 +670,71 @@ address.dja-address-contact-list {
     }
 }
 
+// Make the clipboard button "float" inside of the input box
+.admin-icon-group {
+    position: relative;
+    display: inline;
+    align-items: center;
+
+    input {
+        // Allow for padding around the copy button
+        padding-right: 35px !important;
+        // Match the height of other inputs
+        min-height: 2.25rem !important;
+    }
+
+    button {
+        line-height: 14px;
+        width: max-content;
+        font-size: unset;
+        text-decoration: none !important;
+    }
+
+    @media (max-width: 1000px) {
+        button {
+            display: block;
+            padding-top: 8px;
+        }
+    }
+
+    span {
+        padding-left: 0.1rem;
+    }
+
+}
+
+.admin-icon-group.admin-icon-group__clipboard-link {
+    position: relative;
+    display: inline;
+    align-items: center;
+
+
+    .usa-button--icon {
+        position: absolute;
+        right: auto;
+        left: 4px;
+        height: 100%;
+        top: -1px;
+    }
+    button {
+        font-size: unset !important;
+        display: inline-flex;
+        padding-top: 4px;
+        line-height: 14px;
+        width: max-content;
+        font-size: unset;
+        text-decoration: none !important;
+    }
+}
+
 .no-outline-on-click:focus {
     outline: none !important;
 }
 
+.usa-button__small-text {
+    font-size: small;
+}
+
 // Get rid of padding on all help texts
 form .aligned p.help, form .aligned div.help {
     padding-left: 0px !important;
diff --git a/src/registrar/templates/admin/change_form_object_tools.html b/src/registrar/templates/admin/change_form_object_tools.html
index 55c374419a..198140c19d 100644
--- a/src/registrar/templates/admin/change_form_object_tools.html
+++ b/src/registrar/templates/admin/change_form_object_tools.html
@@ -20,11 +20,10 @@
             </li>
             {% if opts.model_name == 'domainrequest' %}
             <li>
-                <a id="id-copy-to-clipboard-summary" class="usa-button--dja button--clipboard" type="button" href="#">
+                <a id="id-copy-to-clipboard-summary" class="button--clipboard" type="button" href="#">
                     <svg class="usa-icon" >
                         <use xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
                     </svg>
-                    <!-- the span is targeted in JS, do not remove -->
                     <span>{% translate "Copy request summary" %}</span>
                 </a>
             </li>
diff --git a/src/registrar/templates/admin/input_with_clipboard.html b/src/registrar/templates/admin/input_with_clipboard.html
index de89602b81..98f287ecfd 100644
--- a/src/registrar/templates/admin/input_with_clipboard.html
+++ b/src/registrar/templates/admin/input_with_clipboard.html
@@ -8,7 +8,7 @@
 <div class="admin-icon-group">
     {{ field }}
     <button 
-    class="usa-button--dja usa-button usa-button__small-text usa-button--unstyled padding-left-1 usa-button--icon button--clipboard copy-to-clipboard" 
+    class="usa-button usa-button--unstyled padding-left-1 usa-button--icon button--clipboard copy-to-clipboard" 
     type="button"
     >
         <div class="no-outline-on-click">
@@ -17,7 +17,6 @@
             >
                 <use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
             </svg>
-            <!-- the span is targeted in JS, do not remove -->
             <span>Copy</span>
         </div>
     </button>
@@ -25,19 +24,16 @@
 {% else %}
 <div class="admin-icon-group">
     <input aria-hidden="true" class="display-none" value="{{ field.email }}" />
-    {% if field.email is not None %}
-        <button 
-        class="usa-button--dja usa-button usa-button__small-text usa-button--unstyled padding-right-1 usa-button--icon button--clipboard copy-to-clipboard text-no-underline padding-left-05" 
-        type="button"
+    <button 
+    class="usa-button usa-button--unstyled padding-right-1 usa-button--icon button--clipboard copy-to-clipboard text-no-underline padding-left-0"
+    type="button"
+    >
+        <svg 
+        class="usa-icon" 
         >
-            <svg 
-            class="usa-icon" 
-            >
-                <use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
-            </svg>
-            <!-- the span is targeted in JS, do not remove -->
-            <span>Copy</span>
-        </button>
-    {% endif %}
+            <use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
+        </svg>
+        <span>Copy</span>
+    </button>
 </div>
 {% endif %}
\ No newline at end of file
diff --git a/src/registrar/templates/django/admin/includes/contact_detail_list.html b/src/registrar/templates/django/admin/includes/contact_detail_list.html
index b855dcf12e..7cc72e8e1a 100644
--- a/src/registrar/templates/django/admin/includes/contact_detail_list.html
+++ b/src/registrar/templates/django/admin/includes/contact_detail_list.html
@@ -26,7 +26,7 @@
         {% if user.email %}
             <span id="contact_info_email">{{ user.email }}</span>
             {% include "admin/input_with_clipboard.html" with field=user invisible_input_field=True %}
-            <br>
+            <br class="admin-icon-group__br">
         {% else %}
             None<br>
         {% endif %}
diff --git a/src/registrar/templates/django/admin/includes/detail_table_fieldset.html b/src/registrar/templates/django/admin/includes/detail_table_fieldset.html
index 1e8fcaaeb5..f0b291c57b 100644
--- a/src/registrar/templates/django/admin/includes/detail_table_fieldset.html
+++ b/src/registrar/templates/django/admin/includes/detail_table_fieldset.html
@@ -269,15 +269,13 @@ <h2 class="usa-modal__heading">
                                 <td class="padding-left-1 text-size-small">
                                     <input aria-hidden="true" class="display-none" value="{{ contact.email }}" />
                                     <button 
-                                    class="usa-button--dja usa-button usa-button__small-text usa-button--unstyled padding-right-1 usa-button--icon button--clipboard copy-to-clipboard usa-button__small-text text-no-underline" 
-                                    type="button"
+                                    class="usa-button usa-button--unstyled padding-right-1 usa-button--icon button--clipboard copy-to-clipboard usa-button__small-text text-no-underline"
                                     >
                                         <svg 
                                         class="usa-icon" 
                                         >
                                             <use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
                                         </svg>
-                                        <!-- the span is targeted in JS, do not remove -->
                                         <span>Copy email</span>
                                     </button>
                                 </td>

From 1a82c19a73a1a48f8bfcefe98db1e4f8776e2088 Mon Sep 17 00:00:00 2001
From: Rachid Mrad <rachid.mrad@ecstech.com>
Date: Wed, 2 Oct 2024 22:28:25 -0400
Subject: [PATCH 4/6] cleanup

---
 src/registrar/assets/js/get-gov-admin.js     | 1 +
 src/registrar/assets/sass/_theme/_admin.scss | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/registrar/assets/js/get-gov-admin.js b/src/registrar/assets/js/get-gov-admin.js
index 3a2bd5fde4..7e3c086c44 100644
--- a/src/registrar/assets/js/get-gov-admin.js
+++ b/src/registrar/assets/js/get-gov-admin.js
@@ -718,6 +718,7 @@ document.addEventListener('DOMContentLoaded', function() {
             const submitterPhone = extractTextById('contact_info_phone', submitterDiv);
             let submitterInfo = `${submitterName}${submitterTitle}${submitterEmail}${submitterPhone}`;
 
+
             //------ Senior Official
             const seniorOfficialDiv = document.querySelector('.form-row.field-senior_official');
             const seniorOfficialElement = document.getElementById('id_senior_official');
diff --git a/src/registrar/assets/sass/_theme/_admin.scss b/src/registrar/assets/sass/_theme/_admin.scss
index 46ed245dd6..7bc7dc53ce 100644
--- a/src/registrar/assets/sass/_theme/_admin.scss
+++ b/src/registrar/assets/sass/_theme/_admin.scss
@@ -707,7 +707,7 @@ address.dja-address-contact-list {
     position: relative;
     display: inline;
     align-items: center;
-
+    
 
     .usa-button--icon {
         position: absolute;

From 55d6f2b4cdf6b4c994bd8528b0f16a03bbcd6707 Mon Sep 17 00:00:00 2001
From: Rachid Mrad <rachid.mrad@ecstech.com>
Date: Wed, 2 Oct 2024 22:30:06 -0400
Subject: [PATCH 5/6] cleanup

---
 src/registrar/templates/admin/input_with_clipboard.html     | 6 +++---
 .../django/admin/includes/detail_table_fieldset.html        | 3 ++-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/registrar/templates/admin/input_with_clipboard.html b/src/registrar/templates/admin/input_with_clipboard.html
index 98f287ecfd..e324c5f878 100644
--- a/src/registrar/templates/admin/input_with_clipboard.html
+++ b/src/registrar/templates/admin/input_with_clipboard.html
@@ -17,7 +17,7 @@
             >
                 <use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
             </svg>
-            <span>Copy</span>
+            Copy
         </div>
     </button>
 </div>
@@ -25,7 +25,7 @@
 <div class="admin-icon-group">
     <input aria-hidden="true" class="display-none" value="{{ field.email }}" />
     <button 
-    class="usa-button usa-button--unstyled padding-right-1 usa-button--icon button--clipboard copy-to-clipboard text-no-underline padding-left-0"
+    class="usa-button usa-button--unstyled padding-right-1 usa-button--icon button--clipboard copy-to-clipboard text-no-underline padding-left-05"
     type="button"
     >
         <svg 
@@ -33,7 +33,7 @@
         >
             <use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
         </svg>
-        <span>Copy</span>
+        Copy
     </button>
 </div>
 {% endif %}
\ No newline at end of file
diff --git a/src/registrar/templates/django/admin/includes/detail_table_fieldset.html b/src/registrar/templates/django/admin/includes/detail_table_fieldset.html
index f0b291c57b..bee42d24e2 100644
--- a/src/registrar/templates/django/admin/includes/detail_table_fieldset.html
+++ b/src/registrar/templates/django/admin/includes/detail_table_fieldset.html
@@ -269,7 +269,8 @@ <h2 class="usa-modal__heading">
                                 <td class="padding-left-1 text-size-small">
                                     <input aria-hidden="true" class="display-none" value="{{ contact.email }}" />
                                     <button 
-                                    class="usa-button usa-button--unstyled padding-right-1 usa-button--icon button--clipboard copy-to-clipboard usa-button__small-text text-no-underline"
+                                    class="usa-button usa-button--unstyled padding-right-1 usa-button--icon button--clipboard copy-to-clipboard usa-button__small-text text-no-underline" 
+                                    type="button"
                                     >
                                         <svg 
                                         class="usa-icon" 

From 5aa3ef6a03a09995f5e84e4643f3b58cc3376090 Mon Sep 17 00:00:00 2001
From: Rachid Mrad <rachid.mrad@ecstech.com>
Date: Wed, 2 Oct 2024 22:31:14 -0400
Subject: [PATCH 6/6] cleanup

---
 src/registrar/templates/admin/input_with_clipboard.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/registrar/templates/admin/input_with_clipboard.html b/src/registrar/templates/admin/input_with_clipboard.html
index e324c5f878..5ad2b27f78 100644
--- a/src/registrar/templates/admin/input_with_clipboard.html
+++ b/src/registrar/templates/admin/input_with_clipboard.html
@@ -22,10 +22,10 @@
     </button>
 </div>
 {% else %}
-<div class="admin-icon-group">
+<div class="admin-icon-group admin-icon-group__clipboard-link">
     <input aria-hidden="true" class="display-none" value="{{ field.email }}" />
     <button 
-    class="usa-button usa-button--unstyled padding-right-1 usa-button--icon button--clipboard copy-to-clipboard text-no-underline padding-left-05"
+    class="usa-button usa-button--unstyled padding-right-1 usa-button--icon button--clipboard copy-to-clipboard text-no-underline padding-left-05" 
     type="button"
     >
         <svg