Tweak design for certain screen sizes for analysts only

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

@@ -422,7 +422,7 @@ function enableRelatedWidgetButtons(changeLink, deleteLink, viewLink, elementPk,
         // Add event listener to toggle the class and update content on click
         toggleButton.addEventListener('click', function() {
             // Toggle the 'collapsed' class on the bar
-            submitRowWrapper.classList.toggle('collapsed');
+            submitRowWrapper.classList.toggle('submit-row-wrapper--collapsed');
 
             // Get a reference to the span element inside the button
             const spanElement = this.querySelector('span');
@@ -458,7 +458,7 @@ function enableRelatedWidgetButtons(changeLink, deleteLink, viewLink, elementPk,
             entries.forEach(entry => {
                 if (entry.isIntersecting) {
                     // Refresh reference to submit row wrapper and check if it's collapsed
-                    if (document.querySelector('.submit-row-wrapper').classList.contains('collapsed')) {
+                    if (document.querySelector('.submit-row-wrapper').classList.contains('submit-row-wrapper--collapsed')) {
                         toggleButton.click();
                     }
                 }

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

@@ -422,6 +422,15 @@ address.dja-address-contact-list {
     border: 1px solid var(--error-fg) !important;
 }
 
+@mixin submit-row-wrapper--collapsed-one-line(){
+    &.submit-row-wrapper--collapsed {
+     transform: translate3d(0, 42px, 0);
+    }
+    .submit-row {
+        clear: none;
+    }
+  }
+
 // Sticky submit bar for domain requests on desktop
 @media screen and (min-width:768px) {
     .submit-row-wrapper {
@@ -436,11 +445,16 @@ address.dja-address-contact-list {
             margin-bottom: 0;
         }
     }
-
-    .submit-row-wrapper.collapsed {
+    .submit-row-wrapper--collapsed {
         // translate3d is more performant than translateY
         // https://stackoverflow.com/questions/22111256/translate3d-vs-translate-performance
-        transform: translate3d(0, 42px, 0);
+        transform: translate3d(0, 88px, 0);
+    }
+    .submit-row-wrapper--collapsed-one-line {
+        @include submit-row-wrapper--collapsed-one-line();
+    }
+    .submit-row {
+        clear: both;
     }
     .submit-row-toggle{
         display: inline-block;
@@ -449,11 +463,9 @@ address.dja-address-contact-list {
         right: 0;
         background: var(--darkened-bg);
     }
-
     #submitRowToggle {
         color: var(--body-fg);
     }
-
     .requested-domain-sticky {
         max-width: 325px;
         overflow: hidden;
@@ -462,13 +474,14 @@ address.dja-address-contact-list {
     }
 }
 
-@media screen and (max-width:1256px) {
-    .submit-row {
-        clear: both;
-    }
-    .submit-row-wrapper.collapsed {
-        // translate3d is more performant than translateY
-        // https://stackoverflow.com/questions/22111256/translate3d-vs-translate-performance
-        transform: translate3d(0, 88px, 0);
+@media screen and (min-width:935px) {
+    .submit-row-wrapper--analyst-view {
+        @include submit-row-wrapper--collapsed-one-line();
+    }
+}
+
+@media screen and (min-width:1256px) {
+    .submit-row-wrapper {
+        @include submit-row-wrapper--collapsed-one-line();
     }
 }

src/registrar/templates/django/admin/domain_request_change_form.html

@@ -1,4 +1,5 @@
 {% extends 'admin/change_form.html' %}
+{% load custom_filters %}
 {% load i18n static %}
 
 {% block field_sets %}
@@ -103,7 +104,7 @@
         </div>
 </div>
 
-<div class="submit-row-wrapper">
+<div class="submit-row-wrapper{% if not request.user|has_permission:'registrar.full_access_permission' %} submit-row-wrapper--analyst-view{% endif %}">
     
     <span class="submit-row-toggle padding-1 padding-right-2 visible-desktop">
         <button type="button" class="usa-button usa-button--unstyled" id="submitRowToggle">

src/registrar/templatetags/custom_filters.py

@@ -62,3 +62,8 @@ def get_organization_long_name(generic_org_type):
         return "Error"
 
     return long_form_type
+
+
+@register.filter(name="has_permission")
+def has_permission(user, permission):
+    return user.has_perm(permission)