Stylize

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

@@ -787,36 +787,50 @@ div.dja__model-description{
     color: var(--link-fg);
 }
 
-// If the dja textarea is set as readonly, display this on hover
+.dja-textarea-container {
-textarea.vLargeTextField[readonly]:hover {
+    textarea {
-    cursor: not-allowed;
+        width: 100%;
-}
+        resize: none;
 
-.textarea-container textarea {
+        &::-webkit-scrollbar {
-    width: 100%; /* Full width to fit the container */
+            background-color: transparent;
-    height: 150px; /* Fixed height or as needed */
+            border: none;
-    padding-right: 10px; /* Enough padding to nest the scrollbar inside */
+            width: 12px;
-    box-sizing: border-box; /* Include padding in width and height calculations */
+        }
-    overflow-y: auto; /* Only show vertical scrollbar when necessary */
-    scrollbar-width: thin; /* Makes the scrollbar thinner */
-    scrollbar-color: #888 #000; /* Optional: styling the scrollbar with a thumb and track color */
-}
 
-/* For WebKit browsers like Chrome, Safari */
+        &::-webkit-scrollbar-thumb {
-.textarea-container textarea::-webkit-scrollbar {
+            background-color: var(--hairline-color);
-    width: 8px; /* Width of the scrollbar */
+            border-radius: 99px;
-}
+            background-clip: content-box;
+            border: 3px solid transparent;
+        }
 
-.textarea-container textarea::-webkit-scrollbar-track {
+        &::-webkit-scrollbar-thumb:hover {
-    background: #000; /* Track color */
+            cursor: pointer;
-}
+        }
+        
+        
+        &::-webkit-scrollbar-button {
+            display: none;
+        }
 
-.textarea-container textarea::-webkit-scrollbar-thumb {
+        ::-webkit-scrollbar-corner {
-    background-color: #888; /* Color of the scrollbar thumb */
+            display: none;
-    border-radius: 10px; /* Rounded corners for the scrollbar thumb */
+        }
-    border: 2px solid #000; /* Optional: Adds a border around the thumb */
+    }
+
+    
 }
 
 .max-full {
     width: 100% !important;
+}
+
+.thin-border {
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+}
+
+.no-border {
+    border: none
 }

src/registrar/models/domain_request.py

@@ -550,7 +550,6 @@ class DomainRequest(TimeStampedModel):
 
     def get_action_needed_reason_default_email_text(self, action_needed_reason: str):
         """Returns the default email associated with the given action needed reason"""
-        logger.info(f"reason? {action_needed_reason}")
         if action_needed_reason is None or action_needed_reason == self.ActionNeededReasons.OTHER:
             return {
                 "subject_text": None,
@@ -567,9 +566,13 @@ class DomainRequest(TimeStampedModel):
 
         # Return the content of the rendered views
         context = {"domain_request": self}
+
+        # autoescape off adds a newline to the beginning of the email.
+        # This is fine when the email is rendered, but we don't need this for display.
+        email_body_text = template.render(context=context).lstrip().lstrip("\n")
         return {
             "subject_text": subject_template.render(context=context),
-            "email_body_text": template.render(context=context)
+            "email_body_text": email_body_text
         }
 
 

src/registrar/templates/django/admin/includes/detail_table_fieldset.html

@@ -107,11 +107,11 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
                 </table>
 
                 {% if original_object.action_needed_reason_email %}
-                <div class="dja-textarea-container padding-1 margin-top-2 display-none">
+                <div class="dja-textarea-container padding-1 margin-top-2 thin-border display-none">
                     <label class="max-full" for="action_needed_reason_email_view_more">
-                        <strong>Action needed reason email</strong>
+                        <strong>Auto-generated email (will be sent to submitter)</strong>
                     </label>
-                    <textarea id="action_needed_reason_email_view_more" cols="40" rows="20" class="vLargeTextField {% if original_object.status != "action needed" %} display-none {% endif %}" readonly>
+                    <textarea id="action_needed_reason_email_view_more" cols="40" rows="20" class="no-border" readonly>
                         {{ original_object.action_needed_reason_email }}
                     </textarea>
                 </div>