Add styling + javascript

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

@@ -555,3 +555,27 @@ function enableRelatedWidgetButtons(changeLink, deleteLink, viewLink, elementPk,
         observer.observe(targetElement);
     }
 })();
+
+/** An IIFE for toggling the overflow styles on django-admin__model-description (the show more / show less button) */
+(function () {
+    let toggleButton = document.getElementById('dja-show-more-model-description');
+    let descriptionDiv = document.querySelector('.dja__model-description');
+
+    if (toggleButton && descriptionDiv) {
+        toggleButton.addEventListener('click', function() {
+            // Toggle the class on the description div
+            descriptionDiv.classList.toggle('dja__model-description--no-overflow');
+
+            // Change the button text based on the presence of the class
+            if (descriptionDiv.classList.contains('dja__model-description--no-overflow')) {
+                toggleButton.textContent = 'Show less';
+
+                // Move the div to where it was when the page first loaded
+                descriptionDiv.appendChild(toggleButton);
+            } else {    
+                toggleButton.textContent = 'Show more';
+                descriptionDiv.insertAdjacentElement('afterend', toggleButton);
+            }
+        });
+    }
+})();

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

@@ -618,7 +618,12 @@ address.dja-address-contact-list {
     font-size: small;
 }
 
-div.django-admin__model-description{
+div.dja__model-description{
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;  
+    overflow: hidden;
+
     p, li {
         color: var(--primary);
         font-size: medium;
@@ -629,13 +634,17 @@ div.django-admin__model-description{
         list-style-type: disc;
     }
 
-    button {
-        margin-top: 25px !important;
-        height: 10px !important;
-    }
-
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;  
-    overflow: hidden;
+}
+
+.dja__model-description + button {
+    margin-top: 25px !important;
+    height: 10px !important;
+}
+
+div.dja__model-description.dja__model-description--no-overflow {
+    display: block;
+    overflow: unset;
+    button {
+        margin-top: unset;
+    }
 }

src/registrar/templates/admin/model_descriptions.html

@@ -1,5 +1,5 @@
 <span class="display-inline-flex">
-    <div class="django-admin__model-description text-normal">
+    <div class="dja__model-description text-normal">
         {% if opts.model_name == 'domainrequest' %}
             <p>
             This table contains all domain requests that have been started within the registrar and the status of those requests. 
@@ -184,5 +184,5 @@
             <p>This table does not have a description yet.</p>
         {% endif %}
     </div>
-    <button class="usa-button usa-button--unstyled text-no-underline" type="button">Show more</button>
+    <button id="dja-show-more-model-description" class="usa-button usa-button--unstyled text-no-underline" type="button">Show more</button>
 </span>