tweaks

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

@@ -1128,7 +1128,7 @@ document.addEventListener('DOMContentLoaded', function() {
     let currentOrder = 'asc';
     const noDomainsWrapper = document.querySelector('.domains__no-data');
     const noSearchResultsWrapper = document.querySelector('.domains__no-search-results');
-    let hasLoaded = false;
+    let scrollToTable = false;
     let currentStatus = [];
     let currentSearchTerm = '';
     const domainsSearchInput = document.getElementById('domains__search-field');
@@ -1147,10 +1147,10 @@ document.addEventListener('DOMContentLoaded', function() {
      * @param {*} page - the page number of the results (starts with 1)
      * @param {*} sortBy - the sort column option
      * @param {*} order - the sort order {asc, desc}
-     * @param {*} loaded - control for the scrollToElement functionality
+     * @param {*} scroll - control for the scrollToElement functionality
      * @param {*} searchTerm - the search term
      */
-    function loadDomains(page, sortBy = currentSortBy, order = currentOrder, loaded = hasLoaded, status = currentStatus, searchTerm = currentSearchTerm) {
+    function loadDomains(page, sortBy = currentSortBy, order = currentOrder, scroll = scrollToTable, status = currentStatus, searchTerm = currentSearchTerm) {
       // fetch json of page of domains, given params
       fetch(`/get-domains-json/?page=${page}&sort_by=${sortBy}&order=${order}&status=${status}&search_term=${searchTerm}`)
         .then(response => response.json())
@@ -1210,9 +1210,9 @@ document.addEventListener('DOMContentLoaded', function() {
           initializeTooltips();
 
           // Do not scroll on first page load
-          if (loaded)
+          if (scroll)
             ScrollToElement('class', 'domains');
-          hasLoaded = true;
+          scrollToTable = true;
 
           // update pagination
           updatePagination(
@@ -1291,6 +1291,9 @@ document.addEventListener('DOMContentLoaded', function() {
           showElement(resetFiltersButton);
         }
 
+        // Disable the auto scroll
+        scrollToTable = false;
+
         // Call loadDomains with updated status
         loadDomains(1, 'id', 'asc');
         resetHeaders();
@@ -1398,13 +1401,12 @@ document.addEventListener('DOMContentLoaded', function() {
     let currentOrder = 'asc';
     const noDomainRequestsWrapper = document.querySelector('.domain-requests__no-data');
     const noSearchResultsWrapper = document.querySelector('.domain-requests__no-search-results');
-    let hasLoaded = false;
+    let scrollToTable = false;
     let currentSearchTerm = '';
     const domainRequestsSearchInput = document.getElementById('domain-requests__search-field');
     const domainRequestsSearchSubmit = document.getElementById('domain-requests__search-field-submit');
     const tableHeaders = document.querySelectorAll('.domain-requests__table th[data-sortable]');
     const tableAnnouncementRegion = document.querySelector('.domain-requests__table-wrapper .usa-table__announcement-region');
-    // const searchTermHolder = document.querySelector('.domain-requests__search-term');
     const resetSearchButton = document.querySelector('.domain-requests__reset-search');
 
     /**
@@ -1435,7 +1437,7 @@ document.addEventListener('DOMContentLoaded', function() {
           throw new Error(`HTTP error! status: ${response.status}`);
         }
         // Update data and UI
-        loadDomainRequests(pageToDisplay, currentSortBy, currentOrder, hasLoaded, currentSearchTerm);
+        loadDomainRequests(pageToDisplay, currentSortBy, currentOrder, scrollToTable, currentSearchTerm);
       })
       .catch(error => console.error('Error fetching domain requests:', error));
     }
@@ -1451,10 +1453,10 @@ document.addEventListener('DOMContentLoaded', function() {
      * @param {*} page - the page number of the results (starts with 1)
      * @param {*} sortBy - the sort column option
      * @param {*} order - the sort order {asc, desc}
-     * @param {*} loaded - control for the scrollToElement functionality
+     * @param {*} scroll - control for the scrollToElement functionality
      * @param {*} searchTerm - the search term
      */
-    function loadDomainRequests(page, sortBy = currentSortBy, order = currentOrder, loaded = hasLoaded, searchTerm = currentSearchTerm) {
+    function loadDomainRequests(page, sortBy = currentSortBy, order = currentOrder, scroll = scrollToTable, searchTerm = currentSearchTerm) {
       // fetch json of page of domain requests, given params
       fetch(`/get-domain-requests-json/?page=${page}&sort_by=${sortBy}&order=${order}&search_term=${searchTerm}`)
         .then(response => response.json())
@@ -1652,9 +1654,9 @@ document.addEventListener('DOMContentLoaded', function() {
           });
 
           // Do not scroll on first page load
-          if (loaded)
+          if (scroll)
             ScrollToElement('class', 'domain-requests');
-          hasLoaded = true;
+          scrollToTable = true;
 
           // update the pagination after the domain requests list is updated
           updatePagination(

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

@@ -16,6 +16,10 @@
         z-index: 1;
         top: 33.88px;
         left: 0;
+        border-radius: 4px;
+        border: solid 1px color('base-lighter');
+        padding: units(2) units(2) units(3) units(2);
+        width: max-content;
     }
     h2 {
         font-size: size('body', 'sm');

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

@@ -212,6 +212,6 @@ abbr[title] {
   color: #{$dhs-dark-gray-85};
 }
 
-.width-145px {
-  width: 145px;
+.padding--8-12-9-12 {
+  padding: 8px 12px 9px 12px !important;
 }

src/registrar/templates/includes/domains_table.html

@@ -40,7 +40,7 @@
         <div class="usa-accordion__heading">
           <button
             type="button"
-            class="usa-button usa-button--small usa-button--outline usa-button--filter usa-accordion__button"
+            class="usa-button usa-button--small padding--8-12-9-12 usa-button--outline usa-button--filter usa-accordion__button"
             aria-expanded="false"
             aria-controls="filter-status"
           >
@@ -53,7 +53,7 @@
         <div id="filter-status" class="usa-accordion__content usa-prose shadow-1">
           <h2>Status</h2>
           <fieldset class="usa-fieldset margin-top-0">
-            <legend class="usa-legend width-145px">Select to apply <span class="sr-only">status</span> filter</legend>
+            <legend class="usa-legend">Select to apply <span class="sr-only">status</span> filter</legend>
             <div class="usa-checkbox">
               <input
                 class="usa-checkbox__input"
@@ -119,7 +119,7 @@
       </div>
       <button
         type="button"
-        class="usa-button usa-button--small usa-button--outline usa-button--filter domains__reset-filters display-none"
+        class="usa-button usa-button--small padding--8-12-9-12 usa-button--outline usa-button--filter domains__reset-filters display-none"
       >
         Clear filters
         <svg class="usa-icon top-1px" aria-hidden="true" focusable="false" role="img" width="24">