Merge branch 'main' of https://github.com/cisagov/manage.get.gov into es/code-review-update

src/registrar/assets/src/js/getgov/domain-dnssec.js

@@ -0,0 +1,15 @@
+import { submitForm } from './helpers.js';
+
+export function initDomainDNSSEC() {
+    document.addEventListener('DOMContentLoaded', function() {
+        let domain_dnssec_page = document.getElementById("domain-dnssec");
+        if (domain_dnssec_page) {
+            const button = document.getElementById("disable-dnssec-button");
+            if (button) {
+                button.addEventListener("click", function () {
+                    submitForm("disable-dnssec-form");
+                });
+            }
+        }
+    });
+}

src/registrar/assets/src/js/getgov/domain-dsdata.js

@@ -0,0 +1,27 @@
+import { submitForm } from './helpers.js';
+
+export function initDomainDSData() {
+    document.addEventListener('DOMContentLoaded', function() {
+        let domain_dsdata_page = document.getElementById("domain-dsdata");
+        if (domain_dsdata_page) {
+            const override_button = document.getElementById("disable-override-click-button");
+            const cancel_button = document.getElementById("btn-cancel-click-button");
+            const cancel_close_button = document.getElementById("btn-cancel-click-close-button");
+            if (override_button) {
+                override_button.addEventListener("click", function () {
+                    submitForm("disable-override-click-form");
+                });
+            }
+            if (cancel_button) {
+                cancel_button.addEventListener("click", function () {
+                    submitForm("btn-cancel-click-form");
+                });
+            } 
+            if (cancel_close_button) {
+                cancel_close_button.addEventListener("click", function () {
+                    submitForm("btn-cancel-click-form");
+                });
+            } 
+        }
+    });
+}

src/registrar/assets/src/js/getgov/domain-managers.js

@@ -0,0 +1,20 @@
+import { submitForm } from './helpers.js';
+
+export function initDomainManagersPage() {
+    document.addEventListener('DOMContentLoaded', function() {
+        let domain_managers_page = document.getElementById("domain-managers");
+        if (domain_managers_page) {
+            // Add event listeners for all buttons matching user-delete-button-{NUMBER}
+            const deleteButtons = document.querySelectorAll('[id^="user-delete-button-"]'); // Select buttons with ID starting with "user-delete-button-"
+            deleteButtons.forEach((button) => {
+                const buttonId = button.id; // e.g., "user-delete-button-1"
+                const number = buttonId.split('-').pop(); // Extract the NUMBER part
+                const formId = `user-delete-form-${number}`; // Generate the corresponding form ID
+                
+                button.addEventListener("click", function () {
+                    submitForm(formId); // Pass the form ID to submitForm
+                });
+            });
+        } 
+    });
+}

src/registrar/assets/src/js/getgov/domain-request-form.js

@@ -0,0 +1,12 @@
+import { submitForm } from './helpers.js';
+
+export function initDomainRequestForm() {
+    document.addEventListener('DOMContentLoaded', function() {
+        const button = document.getElementById("domain-request-form-submit-button");
+        if (button) {
+            button.addEventListener("click", function () {
+                submitForm("submit-domain-request-form");
+            });
+        } 
+    });
+}

src/registrar/assets/src/js/getgov/form-errors.js

@@ -0,0 +1,19 @@
+export function initFormErrorHandling() {
+  document.addEventListener('DOMContentLoaded', function() {
+    const errorSummary = document.getElementById('form-errors');
+    const firstErrorField = document.querySelector('.usa-input--error');
+    if (firstErrorField) {
+      // Scroll to the first field in error
+      firstErrorField.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  
+      // Add focus to the first field in error
+      setTimeout(() => {
+        firstErrorField.focus();
+      }, 50);
+    } else if (errorSummary) {
+      // Scroll to the error summary
+      errorSummary.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+
+  });
+}

src/registrar/assets/src/js/getgov/helpers.js

@@ -75,3 +75,16 @@ export function debounce(handler, cooldown=600) {
 export function getCsrfToken() {
     return document.querySelector('input[name="csrfmiddlewaretoken"]').value;
 }
+
+/**
+ * Helper function to submit a form
+ * @param {} form_id - the id of the form to be submitted
+ */
+export function submitForm(form_id) {
+    let form = document.getElementById(form_id);
+    if (form) {
+        form.submit();
+    } else {
+        console.error("Form '" + form_id + "' not found.");
+    }
+}

src/registrar/assets/src/js/getgov/main.js

@@ -11,6 +11,11 @@ import { initMembersTable } from './table-members.js';
 import { initMemberDomainsTable } from './table-member-domains.js';
 import { initEditMemberDomainsTable } from './table-edit-member-domains.js';
 import { initPortfolioNewMemberPageToggle, initAddNewMemberPageListeners, initPortfolioMemberPageRadio } from './portfolio-member-page.js';
+import { initDomainRequestForm } from './domain-request-form.js';
+import { initDomainManagersPage } from './domain-managers.js';
+import { initDomainDSData } from './domain-dsdata.js';
+import { initDomainDNSSEC } from './domain-dnssec.js';
+import { initFormErrorHandling } from './form-errors.js';
 
 initDomainValidators();
 
@@ -36,6 +41,13 @@ initMembersTable();
 initMemberDomainsTable();
 initEditMemberDomainsTable();
 
+initDomainRequestForm();
+initDomainManagersPage();
+initDomainDSData();
+initDomainDNSSEC();
+
+initFormErrorHandling();
+
 // Init the portfolio new member page
 initPortfolioMemberPageRadio();
 initPortfolioNewMemberPageToggle();

src/registrar/assets/src/js/getgov/table-base.js

@@ -495,7 +495,8 @@ export class BaseTable {
   // Add event listeners to table headers for sorting
   initializeTableHeaders() {
     this.tableHeaders.forEach(header => {
-      header.addEventListener('click', () => {
+      header.addEventListener('click', event => {
+        let button = header.querySelector('.usa-table__header__button')
         const sortBy = header.getAttribute('data-sortable');
         let order = 'asc';
         // sort order will be ascending, unless the currently sorted column is ascending, and the user
@@ -505,6 +506,13 @@ export class BaseTable {
         }
         // load the results with the updated sort
         this.loadTable(1, sortBy, order);
+        // If the click occurs outside of the button, need to simulate a button click in order
+        // for USWDS listener on the button to execute.
+        // Check first to see if click occurs outside of the button
+        if (!button.contains(event.target)) {
+            // Simulate a button click
+            button.click();
+        }
       });
     });
   }

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

@@ -176,7 +176,16 @@ html[data-theme="dark"] {
     color: var(--primary-fg);
 }
 
+// Reset the USWDS styles for alerts
+@include at-media(desktop) {
+    .dashboard .usa-alert__body--widescreen {
+        padding-left: 4rem !important;
+    }
 
+    .dashboard .usa-alert__body--widescreen::before {
+        left: 1.5rem !important;
+    }
+}
 
 #branding h1,
 h1, h2, h3,

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

@@ -1,21 +1,18 @@
 @use "uswds-core" as *;
 @use "base" as *;
 
-// Fixes some font size disparities with the Figma
-// for usa-alert alert elements
-.usa-alert {
-  .usa-alert__heading.larger-font-sizing {
-    font-size: units(3);
-  }
-}
 
-.usa-alert__text.measure-none {
-  max-width: measure(none);
-}
+/*----------------
+   Alert Layout
+-----------------*/
 
 // The icon was off center for some reason
 // Fixes that issue
-@media (min-width: 64em){
+@include at-media(desktop) {
+  // NOTE: !important is used because _font.scss overrides this
+  .usa-alert__body--widescreen {
+    max-width: $widescreen-max-width !important;
+  }
   .usa-alert--warning{
     .usa-alert__body::before {
       left: 1rem !important;
@@ -24,13 +21,29 @@
   .usa-alert__body.margin-left-1 {
     margin-left: 0.5rem!important;
   }
+
+  .usa-alert__body--widescreen::before {
+    left: 4rem !important;
+  }
+  .usa-alert__body--widescreen {
+    padding-left: 7rem!important;
+  }
 }
 
-// NOTE: !important is used because _font.scss overrides this
-.usa-alert__body--widescreen {
-  max-width: $widescreen-max-width !important;
+/*----------------
+   Alert Fonts
+-----------------*/
+// Fixes some font size disparities with the Figma
+// for usa-alert alert elements
+.usa-alert {
+  .usa-alert__heading.larger-font-sizing {
+    font-size: 1.5rem;
+  }
 }
 
+/*----------------
+  Alert Coloring
+-----------------*/
 .usa-site-alert--hot-pink {
   .usa-alert {
     background-color: $hot-pink;
@@ -47,3 +60,4 @@
     background-color: color('base-darkest');
   }
 }
+

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

@@ -2,6 +2,8 @@
 @use "cisa_colors" as *;
 
 $widescreen-max-width: 1920px;
+$widescreen-x-padding: 4.5rem;
+
 $hot-pink: #FFC3F9;
 
 /* Styles for making visible to screen reader / AT users only. */
@@ -252,6 +254,15 @@ abbr[title] {
   max-width: $widescreen-max-width;
 }
 
+// This is used in cases where we want to align content to widescreen margins
+// but we don't want the content itself to have widescreen widths
+@include at-media(desktop) {
+  .padding-x--widescreen {
+    padding-left: $widescreen-x-padding !important;
+    padding-right: $widescreen-x-padding !important;
+  }
+}
+
 .margin-right-neg-4px {
   margin-right: -4px;
 }
@@ -265,4 +276,8 @@ abbr[title] {
   margin: 0;
   height: 1.5em;
   width: 1.5em;
+}
+
+.maxw-fit-content {
+  max-width: fit-content;
 }

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

@@ -6,3 +6,21 @@
 .usa-identifier__container--widescreen {
     max-width: $widescreen-max-width !important;
 }
+
+
+// NOTE: !important is used because we are overriding default
+// USWDS paddings in a few locations
+@include at-media(desktop) {
+    .grid-container--widescreen {
+      padding-left: $widescreen-x-padding !important;
+      padding-right: $widescreen-x-padding !important;
+    }
+}
+
+// matches max-width to equal the max-width of .grid-container
+// used to trick the eye into thinking we have left-aligned a 
+// regular grid-container within a widescreen (see instances
+// where is_widescreen_centered is used in the html).
+.max-width--grid-container {
+  max-width: 960px;
+}

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

@@ -110,8 +110,8 @@
             }
         }
         .usa-nav__secondary {
-            // I don't know why USWDS has this at 2 rem, which puts it out of alignment
-            right: 3rem;
+            right: 1rem;
+            padding-right: $widescreen-x-padding;
             color: color('white');
             bottom: 4.3rem;
             .usa-nav-link,

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

@@ -88,8 +88,14 @@ th {
   }
 
   @include at-media(tablet-lg) {
-    th[data-sortable]:not([aria-sort]) .usa-table__header__button {
+    th[data-sortable] .usa-table__header__button {
       right: auto;
+  
+      &[aria-sort=ascending],
+      &[aria-sort=descending],
+      &:not([aria-sort]) {
+        right: auto;
+      }
     }
   }
 }

src/registrar/config/settings.py

@@ -251,7 +251,7 @@ TEMPLATES = [
                 "registrar.context_processors.org_user_status",
                 "registrar.context_processors.add_path_to_context",
                 "registrar.context_processors.portfolio_permissions",
-                "registrar.context_processors.is_widescreen_mode",
+                "registrar.context_processors.is_widescreen_centered",
             ],
         },
     },

src/registrar/context_processors.py

@@ -109,31 +109,21 @@ def portfolio_permissions(request):
         return portfolio_context
 
 
-def is_widescreen_mode(request):
-    widescreen_paths = []  # If this list is meant to include specific paths, populate it.
-    portfolio_widescreen_paths = [
+def is_widescreen_centered(request):
+    include_paths = [
         "/domains/",
         "/requests/",
-        "/request/",
-        "/no-organization-requests/",
-        "/no-organization-domains/",
-        "/domain-request/",
+        "/members/",
     ]
-    # widescreen_paths can be a bear as it trickles down sub-urls. exclude_paths gives us a way out.
     exclude_paths = [
         "/domains/edit",
+        "members/new-member/",
     ]
 
-    # Check if the current path matches a widescreen path or the root path.
-    is_widescreen = any(path in request.path for path in widescreen_paths) or request.path == "/"
+    is_excluded = any(exclude_path in request.path for exclude_path in exclude_paths)
 
-    # Check if the user is an organization user and the path matches portfolio paths.
-    is_portfolio_widescreen = (
-        hasattr(request.user, "is_org_user")
-        and request.user.is_org_user(request)
-        and any(path in request.path for path in portfolio_widescreen_paths)
-        and not any(exclude_path in request.path for exclude_path in exclude_paths)
-    )
+    # Check if the current path matches a path in included_paths or the root path.
+    is_widescreen_centered = any(path in request.path for path in include_paths) or request.path == "/"
 
     # Return a dictionary with the widescreen mode status.
-    return {"is_widescreen_mode": is_widescreen or is_portfolio_widescreen}
+    return {"is_widescreen_centered": is_widescreen_centered and not is_excluded}

src/registrar/templates/401.html

@@ -5,8 +5,8 @@
 {% block title %}{% translate "Unauthorized | " %}{% endblock %}
 
 {% block content %}
-<main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen{% endif %}">
-  <div class="grid-row grow-gap"> 
+<main id="main-content" class="grid-container grid-container--widescreen">
+  <div class="grid-row grow-gap {% if not is_widescreen_centered %}max-width--grid-container{% endif %}"> 
     <div class="tablet:grid-col-6 usa-prose margin-bottom-3">
       <h1>
         {% translate "You are not authorized to view this page" %}

src/registrar/templates/403.html

@@ -5,8 +5,8 @@
 {% block title %}{% translate "Forbidden | " %}{% endblock %}
 
 {% block content %}
-<main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen{% endif %}">
-  <div class="grid-row grow-gap"> 
+<main id="main-content" class="grid-container grid-container--widescreen">
+  <div class="grid-row grow-gap {% if not is_widescreen_centered %}max-width--grid-container{% endif %}"> 
     <div class="tablet:grid-col-6 usa-prose margin-bottom-3">
       <h1>
         {% translate "You're not authorized to view this page." %}

src/registrar/templates/404.html

@@ -5,8 +5,8 @@
 {% block title %}{% translate "Page not found | " %}{% endblock %}
 
 {% block content %}
-<main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen{% endif %}">
-  <div class="grid-row grid-gap">
+<main id="main-content" class="grid-container grid-container--widescreen">
+  <div class="grid-row grid-gap {% if not is_widescreen_centered %}max-width--grid-container{% endif %}">
     <div class="tablet:grid-col-6 usa-prose margin-bottom-3">
       <h1>
         {% translate "We couldn’t find that page" %}

src/registrar/templates/500.html

@@ -5,8 +5,8 @@
 {% block title %}{% translate "Server error | " %}{% endblock %}
 
 {% block content %}
-<main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen{% endif %}">
-  <div class="grid-row grid-gap">
+<main id="main-content" class="grid-container grid-container--widescreen">
+  <div class="grid-row grid-gap {% if not is_widescreen_centered %}max-width--grid-container{% endif %}">
     <div class="tablet:grid-col-6 usa-prose margin-bottom-3">
       <h1>
         {% translate "We're having some trouble." %}

src/registrar/templates/admin/app_list.html

@@ -39,7 +39,7 @@
         {% for model in app.models %}
           <tr class="model-{{ model.object_name|lower }}{% if model.admin_url in request.path|urlencode %} current-model{% endif %}">
             {% if model.admin_url %}
-              <th scope="row"><a href="{{ model.admin_url }}"{% if model.admin_url in request.path|urlencode %} aria-current="page"{% endif %}>{{ model.name }}</a></th>
+              <th scope="row"><a href="{{ model.admin_url }}"{% if model.admin_url in request.path|urlencode %} aria-current="page"{% endif %}">{{ model.name }}</a></th>
             {% else %}
               <th scope="row">{{ model.name }}</th>
             {% endif %}

src/registrar/templates/admin/fieldset.html

@@ -61,7 +61,7 @@ https://github.com/django/django/blob/main/django/contrib/admin/templates/admin/
                     {% if field.field.help_text %}
                         {# .gov override #}
                         {% block help_text %}
-                        <div class="help"{% if field.field.id_for_label %} id="{{ field.field.id_for_label }}_helptext"{% endif %}>
+                        <div class="help"{% if field.field.id_for_label %} id="{{ field.field.id_for_label }}_helptext"{% endif %}">
                             <div>{{ field.field.help_text|safe }}</div>
                         </div>
                         {% endblock help_text %}

src/registrar/templates/admin/transfer_user.html

@@ -43,7 +43,7 @@
                 <select name="selected_user" id="selected_user" class="admin-combobox margin-top-0" onchange="this.form.submit()">
                     <option value="">Select a user</option>
                     {% for user in other_users %}
-                        <option value="{{ user.pk }}" {% if selected_user and user.pk == selected_user.pk %}selected{% endif %}>
+                        <option value="{{ user.pk }}" {% if selected_user and user.pk == selected_user.pk %}selected{% endif %}">
                             {{ user.first_name }} {{ user.last_name }}
                         </option>
                     {% endfor %}

src/registrar/templates/base.html

@@ -97,7 +97,7 @@
   <section class="usa-banner" aria-label="Official website of the United States government">
     <div class="usa-accordion">
       <header class="usa-banner__header">
-        <div class="usa-banner__inner {% if is_widescreen_mode %} usa-banner__inner--widescreen {% endif %}">
+        <div class="usa-banner__inner usa-banner__inner--widescreen padding-x--widescreen">
           <div class="grid-col-auto">
             <img class="usa-banner__header-flag" src="{% static 'img/us_flag_small.png' %}" alt="U.S. flag" />
           </div>
@@ -113,7 +113,7 @@
           </button>
         </div>
       </header>
-      <div class="usa-banner__content usa-accordion__content" id="gov-banner-default">
+      <div class="usa-banner__content usa-accordion__content padding-x--widescreen margin-x-0" id="gov-banner-default">
         <div class="grid-row grid-gap-lg">
           <div class="usa-banner__guidance tablet:grid-col-6">
             <img class="usa-banner__icon usa-media-block__img" src="{% static 'img/icon-dot-gov.svg' %}" role="img"
@@ -159,14 +159,14 @@
 
   {% block wrapper %}
   {% block wrapperdiv %}
-  <div id="wrapper">
+  <div id="wrapper" class="wrapper--padding-top-6">
   {% endblock wrapperdiv %}
     {% block messages %}
     {% if messages %}
     <ul class="messages">
       {% for message in messages %}
       {% if 'base' in message.extra_tags %}
-      <li{% if message.tags %} class="{{ message.tags }}" {% endif %}>
+      <li{% if message.tags %} class="{{ message.tags }}" {% endif %}">
         {{ message }}
         </li>
         {% endif %}

src/registrar/templates/dashboard_base.html

@@ -11,7 +11,7 @@
           {% if messages %}
           <ul class="messages">
             {% for message in messages %}
-              <li {% if message.tags %} class="{{ message.tags }}" {% endif %}>
+              <li {% if message.tags %} class="{{ message.tags }}" {% endif %}">
                 {{ message }}
               </li>
             {% endfor %}

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

@@ -1,6 +1,6 @@
 
 {% comment %} This view provides a detail button that can be used to show/hide content {% endcomment %}
-<details class="margin-top-1 dja-detail-table" aria-role="button" {% if start_open %}open{% else %}closed{% endif %}>
+<details class="margin-top-1 dja-detail-table" aria-role="button" {% if start_open %}open{% else %}closed{% endif %}">
     <summary class="padding-1 padding-left-0 dja-details-summary">Details</summary>
     <div class="grid-container margin-left-0 padding-left-0 padding-right-0 dja-details-contents">
         {% block detail_content %}

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

@@ -11,7 +11,7 @@
 {% endblock %}
 
 {% block help_text %}
-    <div class="help margin-bottom-1" {% if field.field.id_for_label %} id="{{ field.field.id_for_label }}_helptext"{% endif %}>
+    <div class="help margin-bottom-1" {% if field.field.id_for_label %} id="{{ field.field.id_for_label }}_helptext"{% endif %}">
         {% if field.field.name == "state" %}
         <div>{{ state_help_message }}</div>
         {% else %}

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

@@ -6,14 +6,14 @@
 <ul class="mulitple-choice">
 {% for choice in choices %}
     {% if choice.reset %}
-        <li{% if choice.selected %} class="selected"{% endif %}>
+        <li{% if choice.selected %} class="selected"{% endif %}">
             <a href="{{ choice.query_string|iriencode }}" title="{{ choice.display }}">{{ choice.display }}</a>
         </li>
     {% endif %}
 {% endfor %}
 {% for choice in choices %}
     {% if not choice.reset %}
-        <li{% if choice.selected %} class="selected"{% endif %}>
+        <li{% if choice.selected %} class="selected"{% endif %}">
           {% if choice.selected and choice.exclude_query_string %}
             <a class="choice-filter choice-filter--checked" href="{{ choice.exclude_query_string|iriencode }}">{{ choice.display }}
               <svg class="usa-icon position-absolute z-0 left-0" aria-hidden="true" focusable="false" role="img" width="24" height="24">

src/registrar/templates/domain_add_user.html

@@ -37,6 +37,9 @@
     </nav>
     {% endif %}
   {% endblock breadcrumb %}
+
+  {% include "includes/form_errors.html" with form=form %}
+
   <h1>Add a domain manager</h1>
 {% if has_organization_feature_flag %}
   <p>

src/registrar/templates/domain_base.html

@@ -4,10 +4,10 @@
 {% block title %}{{ domain.name }} | {% endblock %}
 
 {% block content %}
-<div class="grid-container">
+<div class="grid-container grid-container--widescreen">
 
-  <div class="grid-row grid-gap">
-    <div class="tablet:grid-col-3">
+  <div class="grid-row grid-gap {% if not is_widescreen_centered %}max-width--grid-container{% endif %}">
+    <div class="tablet:grid-col-3 ">
       <p class="font-body-md margin-top-0 margin-bottom-2
                 text-primary-darker text-semibold domain-name-wrap"
       >

src/registrar/templates/domain_dnssec.html

@@ -27,7 +27,7 @@
   {% endif %}
   {% endblock breadcrumb %}
 
-  <h1>DNSSEC</h1>
+  <h1 id="domain-dnssec">DNSSEC</h1>
 
   <p>DNSSEC, or DNS Security Extensions, is an additional security layer to protect your website. Enabling DNSSEC ensures that when someone visits your domain, they can be certain that it’s connecting to the correct server, preventing potential hijacking or tampering with your domain's records.</p>
 
@@ -78,7 +78,11 @@
     aria-labelledby="Are you sure you want to continue?"
     aria-describedby="Your DNSSEC records will be deleted from the registry."
   >
-      {% include 'includes/modal.html' with modal_heading="Are you sure you want to disable DNSSEC?" modal_button=modal_button|safe %}
+      {% include 'includes/modal.html' with modal_heading="Are you sure you want to disable DNSSEC?" modal_button_id="disable-dnssec-button" modal_button_text="Confirm" modal_button_class="usa-button--secondary" %}
   </div>
+  <form method="post" id="disable-dnssec-form">
+    {% csrf_token %}
+    <input type="hidden" name="disable_dnssec" value="1">
+  </form>
 
 {% endblock %}  {# domain_content #}

src/registrar/templates/domain_dsdata.html

@@ -42,7 +42,7 @@
     {% include "includes/form_errors.html" with form=form %}
   {% endfor %}
 
-  <h1>DS data</h1>
+  <h1 id="domain-dsdata">DS data</h1>
 
   <p>In order to enable DNSSEC, you must first configure it with your DNS hosting service.</p>
 
@@ -141,7 +141,15 @@
     aria-describedby="Your DNSSEC records will be deleted from the registry."
     data-force-action
   >
-      {% include 'includes/modal.html' with cancel_button_resets_ds_form=True modal_heading="Warning: You are about to remove all DS records on your domain." modal_description="To fully disable DNSSEC: In addition to removing your DS records here, you’ll need to delete the DS records at your DNS host. To avoid causing your domain to appear offline, you should wait to delete your DS records at your DNS host until the Time to Live (TTL) expires. This is often less than 24 hours, but confirm with your provider." modal_button=modal_button|safe %}
+      {% include 'includes/modal.html' with cancel_button_resets_ds_form=True modal_heading="Warning: You are about to remove all DS records on your domain." modal_description="To fully disable DNSSEC: In addition to removing your DS records here, you’ll need to delete the DS records at your DNS host. To avoid causing your domain to appear offline, you should wait to delete your DS records at your DNS host until the Time to Live (TTL) expires. This is often less than 24 hours, but confirm with your provider." modal_button_id="disable-override-click-button" modal_button_text="Remove all DS data" modal_button_class="usa-button--secondary" %}
   </div>
+  <form method="post" id="disable-override-click-form">
+    {% csrf_token %}
+    <input type="hidden" name="disable-override-click" value="1">
+  </form>
+  <form method="post" id="btn-cancel-click-form">
+    {% csrf_token %}
+    <input type="hidden" name="btn-cancel-click" value="1">
+  </form>
 
 {% endblock %}  {# domain_content #}

src/registrar/templates/domain_request_form.html

@@ -3,13 +3,13 @@
 
 {% block title %}{{form_titles|get_item:steps.current}} | Request a .gov | {% endblock %}
 {% block content %}
-<div class="grid-container">
-  <div class="grid-row grid-gap">
+<div class="grid-container grid-container--widescreen">
+  <div class="grid-row grid-gap {% if not is_widescreen_centered %}max-width--grid-container{% endif %}">
     <div class="tablet:grid-col-3">
       {% include 'domain_request_sidebar.html' %}
     </div>
     <div class="tablet:grid-col-9">
-      <main id="main-content" class="grid-container register-form-step">
+      <main id="main-content" class="register-form-step">
         <input type="hidden" class="display-none" id="wizard-domain-request-id" value="{{domain_request_id}}"/>
         {% if steps.current == steps.first %}
           {% if portfolio %}
@@ -130,9 +130,17 @@
           aria-describedby="Are you sure you want to submit a domain request?"
           data-force-action
         >
-            {% include 'includes/modal.html' with is_domain_request_form=True review_form_is_complete=review_form_is_complete modal_heading=modal_heading|safe modal_description=modal_description|safe modal_button=modal_button|safe %}
+          {% if review_form_is_complete %}
+            {% include 'includes/modal.html' with modal_heading="You are about to submit a domain request for " domain_name_modal=requested_domain__name modal_description="Once you submit this request, you won’t be able to edit it until we review it. You’ll only be able to withdraw your request." modal_button_id="domain-request-form-submit-button" modal_button_text="Submit request" %}
+          {% else %}
+            {% include 'includes/modal.html' with modal_heading="Your request form is incomplete" modal_description='This request cannot be submitted yet. Return to the request and visit the steps that are marked as "incomplete."' modal_button_text="Return to request" cancel_button_only=True %}
+          {% endif %}
         </div>
 
+        <form method="post" id="submit-domain-request-form">
+          {% csrf_token %}
+        </form>
+
 {% block after_form_content %}{% endblock %}
 
       </main>

src/registrar/templates/domain_request_intro.html

@@ -4,41 +4,42 @@
 {% block title %} Start a request | {% endblock %}
 
 {% block content %}
-<main id="main-content" class="grid-container">
-    <div class="grid-col desktop:grid-offset-2 desktop:grid-col-8">
+<main id="main-content" class="grid-container grid-container--widescreen">
+    <div class="grid-row {% if not is_widescreen_centered %}max-width--grid-container{% endif %}">
+      <div class="grid-col {% if is_widescreen_centered %}desktop:grid-offset-2 {% endif %} desktop:grid-col-8">
 
-    <form class="usa-form usa-form--extra-large" method="post" novalidate>
-        {% csrf_token %}
+      <form class="usa-form usa-form--extra-large" method="post" novalidate>
+          {% csrf_token %}
 
-        <h1>You’re about to start your .gov domain request.</h1>
-        <p>You don’t have to complete the process in one session. You can save what you enter and come back to it when you’re ready.</p>
-        {% if portfolio %}
-        <p>We’ll use the information you provide to verify your domain request meets our guidelines.</p>
-        {% else %}
-        <p>We’ll use the information you provide to verify your organization’s eligibility for a .gov domain. We’ll also verify that the domain you request meets our guidelines.</p>
-        {% endif %}
-        <h2>Time to complete the form</h2>
-        <p>If you have <a href="{% public_site_url 'domains/before/#information-you%E2%80%99ll-need-to-complete-the-domain-request-form' %}" target="_blank" class="usa-link">all the information you need</a>,
-          completing your domain request might take around 15 minutes.</p>
-        <h2>How we’ll reach you</h2>
-        <p>While reviewing your domain request, we may need to reach out with questions. We’ll also email you when we complete our review. If the contact information below is not correct, visit <a href="{% url 'user-profile' %}?redirect=domain-request:start" class="usa-link">your profile</a> to make updates.</p>
-        {% include "includes/profile_information.html" with user=user%}
-        
+          <h1>You’re about to start your .gov domain request.</h1>
+          <p>You don’t have to complete the process in one session. You can save what you enter and come back to it when you’re ready.</p>
+          {% if portfolio %}
+          <p>We’ll use the information you provide to verify your domain request meets our guidelines.</p>
+          {% else %}
+          <p>We’ll use the information you provide to verify your organization’s eligibility for a .gov domain. We’ll also verify that the domain you request meets our guidelines.</p>
+          {% endif %}
+          <h2>Time to complete the form</h2>
+          <p>If you have <a href="{% public_site_url 'domains/before/#information-you%E2%80%99ll-need-to-complete-the-domain-request-form' %}" target="_blank" class="usa-link">all the information you need</a>,
+            completing your domain request might take around 15 minutes.</p>
+          <h2>How we’ll reach you</h2>
+          <p>While reviewing your domain request, we may need to reach out with questions. We’ll also email you when we complete our review. If the contact information below is not correct, visit <a href="{% url 'user-profile' %}?redirect=domain-request:start" class="usa-link">your profile</a> to make updates.</p>
+          {% include "includes/profile_information.html" with user=user%}
+          
 
-{% block form_buttons %}
-        <div class="stepnav">
-            <button
-              type="submit"
-              name="submit_button"
-              value="intro_acknowledge"
-              class="usa-button"
-            >Continue</button>
-        </div>
-{% endblock %}
+  {% block form_buttons %}
+          <div class="stepnav">
+              <button
+                type="submit"
+                name="submit_button"
+                value="intro_acknowledge"
+                class="usa-button"
+              >Continue</button>
+          </div>
+  {% endblock %}
 
-        </form>
+          </form>
 
-   <div class="caption margin-top-5"><a href="{% public_site_url 'privacy-policy#pra' %}" target="_blank" rel="noopener noreferrer" class="usa-link">Paperwork Reduction Act statement</a> (OMB control number: 1670-0049; expiration date: 10/31/2026)</div>
-  </div>
+    <div class="caption margin-top-5"><a href="{% public_site_url 'privacy-policy#pra' %}" target="_blank" rel="noopener noreferrer" class="usa-link">Paperwork Reduction Act statement</a> (OMB control number: 1670-0049; expiration date: 10/31/2026)</div>
+    </div>
 </main>
 {% endblock %}

src/registrar/templates/domain_request_withdraw_confirmation.html

@@ -8,18 +8,20 @@
 {% endblock wrapperdiv %}
 
 {% block content %}
-<div class="grid-container">
-<div class="grid-col desktop:grid-offset-2 desktop:grid-col-8">
- 
+<div class="grid-container grid-container--widescreen">
+  <div class="grid-row {% if not is_widescreen_centered %}max-width--grid-container{% endif %}">
+    <div class="grid-col {% if is_widescreen_centered %}desktop:grid-offset-2 {% endif %} desktop:grid-col-8">
+    
 
-<h1>Withdraw request for {{ DomainRequest.requested_domain.name }}?</h1>
+    <h1>Withdraw request for {{ DomainRequest.requested_domain.name }}?</h1>
 
-<p>If you withdraw your request, we won't review it. Once you withdraw your request, you can edit it and submit it again. </p>
+    <p>If you withdraw your request, we won't review it. Once you withdraw your request, you can edit it and submit it again. </p>
 
-<p><a href="{% url 'domain-request-withdrawn' DomainRequest.id %}" class="usa-button withdraw">Withdraw request</a>  
-  <a href="{% url 'domain-request-status' DomainRequest.id %}">Cancel</a></p>
+    <p><a href="{% url 'domain-request-withdrawn' DomainRequest.id %}" class="usa-button withdraw">Withdraw request</a>  
+      <a href="{% url 'domain-request-status' DomainRequest.id %}">Cancel</a></p>
 
-</div>
+    </div>
+  </div>
 
 </div>
 {% endblock %}

src/registrar/templates/domain_sidebar.html

@@ -18,7 +18,7 @@
 
       <li class="usa-sidenav__item">
         {% url 'domain-dns' pk=domain.id as url %}
-        <a href="{{ url }}" {% if request.path|startswith:url %}class="usa-current"{% endif %}>
+        <a href="{{ url }}" {% if request.path|startswith:url %}class="usa-current"{% endif %}">
           DNS
         </a>
         {% if request.path|startswith:url %}

src/registrar/templates/domain_users.html

@@ -49,7 +49,7 @@
   </ul>
 
   {% if domain_manager_roles %}
-  <section class="section-outlined">
+  <section class="section-outlined" id="domain-managers">
   <table class="usa-table usa-table--borderless usa-table--stacked dotgov-table--stacked dotgov-table">
     <h2 class> Domain managers </h2>
     <caption class="sr-only">Domain managers</caption>
@@ -89,12 +89,13 @@
             aria-describedby="You will be removed from this domain"
             data-force-action
             >
-              <form method="POST" action="{% url "domain-user-delete" pk=domain.id user_pk=item.permission.user.id %}">
-                {% with domain_name=domain.name|force_escape %}
-                  {% include 'includes/modal.html' with modal_heading="Are you sure you want to remove yourself as a domain manager?" modal_description="You will no longer be able to manage the domain <strong>"|add:domain_name|add:"</strong>."|safe modal_button=modal_button_self|safe %}
-                {% endwith %}
-              </form>
+              {% with domain_name=domain.name|force_escape counter_str=forloop.counter|stringformat:"s" %}
+                {% include 'includes/modal.html' with modal_heading="Are you sure you want to remove yourself as a domain manager?" modal_description="You will no longer be able to manage the domain <strong>"|add:domain_name|add:"</strong>."|safe modal_button_id="user-delete-button-"|add:counter_str|safe modal_button_text="Yes, remove myself" modal_button_class="usa-button--secondary" %}
+              {% endwith %}
             </div>
+            <form method="POST" id="user-delete-form-{{ forloop.counter }}" action="{% url "domain-user-delete" pk=domain.id user_pk=item.permission.user.id %}" >
+              {% csrf_token %}
+            </form>
           {% else %}
             <div
               class="usa-modal"
@@ -103,12 +104,13 @@
               aria-describedby="{{ item.permission.user.email }} will be removed"
               data-force-action
             >
-              <form method="POST" action="{% url "domain-user-delete" pk=domain.id user_pk=item.permission.user.id %}">
-                {% with email=item.permission.user.email|default:item.permission.user|force_escape domain_name=domain.name|force_escape %}
-                  {% include 'includes/modal.html' with modal_heading="Are you sure you want to remove " heading_value=email|add:"?" modal_description="<strong>"|add:email|add:"</strong> will no longer be able to manage the domain <strong>"|add:domain_name|add:"</strong>."|safe modal_button=modal_button|safe %}
-                {% endwith %}
-              </form>
+              {% with email=item.permission.user.email|default:item.permission.user|force_escape domain_name=domain.name|force_escape counter_str=forloop.counter|stringformat:"s" %}
+                {% include 'includes/modal.html' with modal_heading="Are you sure you want to remove " heading_value=email|add:"?" modal_description="<strong>"|add:email|add:"</strong> will no longer be able to manage the domain <strong>"|add:domain_name|add:"</strong>."|safe modal_button_id="user-delete-button-"|add:counter_str|safe modal_button_text="Yes, remove domain manager" modal_button_class="usa-button--secondary" %}
+              {% endwith %}
             </div>
+            <form method="POST" id="user-delete-form-{{ forloop.counter }}" action="{% url "domain-user-delete" pk=domain.id user_pk=item.permission.user.id %}">
+              {% csrf_token %}
+            </form>
           {% endif %}
         {% else %}
           <input 

src/registrar/templates/home.html

@@ -5,12 +5,12 @@
 {% block title %} Home | {% endblock %}
 
 {% block content %}
-<main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen{% endif %}">
+<main id="main-content" class="grid-container grid-container--widescreen">
 {% if user.is_authenticated %}
 {# the entire logged in page goes here #}
 
 {% block homepage_content %}
-  <div class="tablet:grid-col-11 desktop:grid-col-10 tablet:grid-offset-1">
+  <div class="tablet:grid-col-11 desktop:grid-col-10 {% if is_widescreen_centered %}tablet:grid-offset-1{% endif %}">
     {% block messages %}
       {% include "includes/form_messages.html" %}
     {% endblock %}

src/registrar/templates/includes/banner-error.html

@@ -1,6 +1,6 @@
 <div class="margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
     <div class="usa-alert usa-alert--error">
-      <div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
+      <div class="usa-alert__body usa-alert__body--widescreen">
         <h4 class="usa-alert__heading">
           Header
         </h4>

src/registrar/templates/includes/banner-info.html

@@ -1,6 +1,6 @@
 <section class="usa-site-alert usa-site-alert--info margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
     <div class="usa-alert">
-      <div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
+      <div class="usa-alert__body usa-alert__body--widescreen">
         <h4 class="usa-alert__heading">
           Header
         </h4>

src/registrar/templates/includes/banner-non-production-alert.html

@@ -1,6 +1,6 @@
 <section class="usa-site-alert usa-site-alert--emergency usa-site-alert--hot-pink margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
     <div class="usa-alert">
-        <div class="usa-alert__body {% if add_body_class %}{{ add_body_class }}{% endif %} {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
+        <div class="usa-alert__body {% if add_body_class %}{{ add_body_class }}{% endif %} usa-alert__body--widescreen">
             <p class="usa-alert__text maxw-none">
                 <strong>Attention:</strong> You are on a test site.
             </p>

src/registrar/templates/includes/banner-service-disruption.html

@@ -1,6 +1,6 @@
 <section class="usa-site-alert usa-site-alert--emergency margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
     <div class="usa-alert">
-      <div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
+      <div class="usa-alert__body usa-alert__body--widescreen">
         <h3 class="usa-alert__heading">
             Service disruption
         </h3>

src/registrar/templates/includes/banner-site-alert.html

@@ -1,6 +1,6 @@
 <section class="usa-site-alert usa-site-alert--emergency margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
     <div class="usa-alert">
-      <div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
+      <div class="usa-alert__body usa-alert__body--widescreen">
         <h3 class="usa-alert__heading">
             Header here
         </h3>

src/registrar/templates/includes/banner-system-outage.html

@@ -1,6 +1,6 @@
 <section class="usa-site-alert usa-site-alert--emergency margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
     <div class="usa-alert">
-      <div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
+      <div class="usa-alert__body usa-alert__body--widescreen">
         <h3 class="usa-alert__heading">
             System outage
         </h3>

src/registrar/templates/includes/banner-warning.html

@@ -1,6 +1,6 @@
 <div class="margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
     <div class="usa-alert usa-alert--warning">
-      <div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
+      <div class="usa-alert__body usa-alert__body--widescreen">
         <h4 class="usa-alert__heading">
           Header
         </h4>

src/registrar/templates/includes/domain_request_status_manage.html

@@ -1,236 +1,238 @@
 {% load custom_filters %}
 {% load static url_helpers %}
-<main id="main-content" class="grid-container">
-    <div class="grid-col desktop:grid-offset-2 desktop:grid-col-8">
-        {% block breadcrumb %}
-        {% if portfolio %}
-            {% url 'domain-requests' as url %}
-        {% else %}
-            {% url 'home' as url %}
-        {% endif %}
-        <nav class="usa-breadcrumb padding-top-0" aria-label="Domain request breadcrumb">
-        <ol class="usa-breadcrumb__list">
-            <li class="usa-breadcrumb__list-item">
+<main id="main-content" class="grid-container grid-container--widescreen">
+    <div class="grid-row {% if not is_widescreen_centered %}max-width--grid-container{% endif %}">
+        <div class="grid-col {% if is_widescreen_centered %}desktop:grid-offset-2 {% endif %} desktop:grid-col-8">
+            {% block breadcrumb %}
             {% if portfolio %}
-                <a href="{{ url }}" class="usa-breadcrumb__link"><span>Domain requests</span></a>
+                {% url 'domain-requests' as url %}
             {% else %}
-                <a href="{{ url }}" class="usa-breadcrumb__link"><span>Manage your domains</span></a>
+                {% url 'home' as url %}
             {% endif %}
-            </li>
-            <li class="usa-breadcrumb__list-item usa-current" aria-current="page">
-            {% if not DomainRequest.requested_domain and DomainRequest.status == DomainRequest.DomainRequestStatus.STARTED %}
-                <span>New domain request</span>
-            {% else %}
-                <span>{{ DomainRequest.requested_domain.name }}</span>
+            <nav class="usa-breadcrumb padding-top-0" aria-label="Domain request breadcrumb">
+            <ol class="usa-breadcrumb__list">
+                <li class="usa-breadcrumb__list-item">
+                {% if portfolio %}
+                    <a href="{{ url }}" class="usa-breadcrumb__link"><span>Domain requests</span></a>
+                {% else %}
+                    <a href="{{ url }}" class="usa-breadcrumb__link"><span>Manage your domains</span></a>
+                {% endif %}
+                </li>
+                <li class="usa-breadcrumb__list-item usa-current" aria-current="page">
+                {% if not DomainRequest.requested_domain and DomainRequest.status == DomainRequest.DomainRequestStatus.STARTED %}
+                    <span>New domain request</span>
+                {% else %}
+                    <span>{{ DomainRequest.requested_domain.name }}</span>
+                {% endif %}
+                </li>
+            </ol>
+            </nav>
+            {% endblock breadcrumb %}
+
+            {% block header %}
+                {% if not DomainRequest.requested_domain and DomainRequest.status == DomainRequest.DomainRequestStatus.STARTED %}
+                    <h1>New domain request</h1>
+                {% else %}
+                    <h1>Domain request for {{ DomainRequest.requested_domain.name }}</h1>
+                {% endif %}
+            {% endblock header %}
+
+            {% block status_summary %}
+            <div
+                class="usa-summary-box dotgov-status-box margin-top-3 padding-left-2" 
+                role="region"
+                aria-labelledby="summary-box-key-information"
+            >
+            <div class="usa-summary-box__body">
+                <p class="usa-summary-box__heading font-sans-md margin-bottom-0" 
+                    id="summary-box-key-information"
+                > 
+                <span class="text-bold text-primary-darker">
+                    Status:
+                </span>
+                {{ DomainRequest.get_status_display|default:"ERROR Please contact technical support/dev" }}
+                </p>
+            </div>
+            </div>
+            <br>
+            {% endblock status_summary %}
+            
+            {% block status_metadata %}
+
+            {% if portfolio %}
+                {% if DomainRequest.creator %}
+                <p class="margin-top-1 margin-bottom-1">
+                    <b class="review__step__name">Created by:</b> {{DomainRequest.creator.email|default:DomainRequest.creator.get_formatted_name }}
+                </p>
+                {% else %}
+                <p class="margin-top-1 margin-bottom-1">
+                    <b class="review__step__name">No creator found:</b> this is an error, please email <a href="mailto:help@get.gov" class="usa-link">help@get.gov</a>.
+                </p>
+                {% endif %}
             {% endif %}
-            </li>
-        </ol>
-        </nav>
-        {% endblock breadcrumb %}
 
-        {% block header %}
-            {% if not DomainRequest.requested_domain and DomainRequest.status == DomainRequest.DomainRequestStatus.STARTED %}
-                <h1>New domain request</h1>
-            {% else %}
-                <h1>Domain request for {{ DomainRequest.requested_domain.name }}</h1>
-            {% endif %}
-        {% endblock header %}
-
-        {% block status_summary %}
-        <div
-            class="usa-summary-box dotgov-status-box margin-top-3 padding-left-2" 
-            role="region"
-            aria-labelledby="summary-box-key-information"
-        >
-        <div class="usa-summary-box__body">
-            <p class="usa-summary-box__heading font-sans-md margin-bottom-0" 
-                id="summary-box-key-information"
-            > 
-            <span class="text-bold text-primary-darker">
-                Status:
-            </span>
-            {{ DomainRequest.get_status_display|default:"ERROR Please contact technical support/dev" }}
-            </p>
-        </div>
-        </div>
-        <br>
-        {% endblock status_summary %}
-        
-        {% block status_metadata %}
-
-        {% if portfolio %}
-            {% if DomainRequest.creator %}
-            <p class="margin-top-1 margin-bottom-1">
-                <b class="review__step__name">Created by:</b> {{DomainRequest.creator.email|default:DomainRequest.creator.get_formatted_name }}
-            </p>
-            {% else %}
-            <p class="margin-top-1 margin-bottom-1">
-                <b class="review__step__name">No creator found:</b> this is an error, please email <a href="mailto:help@get.gov" class="usa-link">help@get.gov</a>.
-            </p>
-            {% endif %}
-        {% endif %}
-
-        {% with statuses=DomainRequest.DomainRequestStatus last_submitted=DomainRequest.last_submitted_date|date:"F j, Y" first_submitted=DomainRequest.first_submitted_date|date:"F j, Y" last_status_update=DomainRequest.last_status_update|date:"F j, Y" %}
-        {% comment %} 
-        These are intentionally seperated this way. 
-        There is some code repetition, but it gives us more flexibility rather than a dense reduction. 
-        Leave it this way until we've solidified our requirements.
-        {% endcomment %}
-        {% if DomainRequest.status == statuses.STARTED %}
-        {% with first_started_date=DomainRequest.get_first_status_started_date|date:"F j, Y" %}
-        <p class="margin-top-1">
+            {% with statuses=DomainRequest.DomainRequestStatus last_submitted=DomainRequest.last_submitted_date|date:"F j, Y" first_submitted=DomainRequest.first_submitted_date|date:"F j, Y" last_status_update=DomainRequest.last_status_update|date:"F j, Y" %}
             {% comment %} 
-            A newly created domain request will not have a value for last_status update.
-            This is because the status never really updated. 
-            However, if this somehow goes back to started we can default to displaying that new date.
+            These are intentionally seperated this way. 
+            There is some code repetition, but it gives us more flexibility rather than a dense reduction. 
+            Leave it this way until we've solidified our requirements.
             {% endcomment %}
-            <b class="review__step__name">Started on:</b> {{last_status_update|default:first_started_date}}
-        </p>
-        {% endwith %}
-        {% elif DomainRequest.status == statuses.SUBMITTED %}
-        <p class="margin-top-1 margin-bottom-1">
-            <b class="review__step__name">Submitted on:</b> {{last_submitted|default:first_submitted }}
-        </p>
-        <p class="margin-top-1">
-            <b class="review__step__name">Last updated on:</b> {{DomainRequest.updated_at|date:"F j, Y"}}
-        </p>
-        {% elif DomainRequest.status == statuses.ACTION_NEEDED %}
-        <p class="margin-top-1 margin-bottom-1">
-            <b class="review__step__name">Submitted on:</b> {{last_submitted|default:first_submitted }}
-        </p>
-        <p class="margin-top-1">
-            <b class="review__step__name">Last updated on:</b> {{DomainRequest.updated_at|date:"F j, Y"}}
-        </p>
-        {% elif DomainRequest.status == statuses.REJECTED %}
-        <p class="margin-top-1 margin-bottom-1">
-            <b class="review__step__name">Submitted on:</b> {{last_submitted|default:first_submitted }}
-        </p>
-        <p class="margin-top-1">
-            <b class="review__step__name">Rejected on:</b> {{last_status_update}}
-        </p>
-        {% elif DomainRequest.status == statuses.WITHDRAWN %}
-        <p class="margin-top-1 margin-bottom-1">
-            <b class="review__step__name">Submitted on:</b> {{last_submitted|default:first_submitted }}
-        </p>
-        <p class="margin-top-1">
-            <b class="review__step__name">Withdrawn on:</b> {{last_status_update}}
-        </p>
-        {% else %}
-        {% comment %} Shown for in_review, approved, ineligible {% endcomment %}
-        <p class="margin-top-1">
-            <b class="review__step__name">Last updated on:</b> {{DomainRequest.updated_at|date:"F j, Y"}}
-        </p>
-        {% endif %}
-        {% endwith %}
-        {% endblock status_metadata %}
-
-        {% block status_blurb %}
-        {% if DomainRequest.is_awaiting_review %}
-            <p>{% include "includes/domain_request_awaiting_review.html" with show_withdraw_text=DomainRequest.is_withdrawable %}</p>
-        {% endif %}
-        {% endblock status_blurb %}
-
-        {% block modify_request %}
-        {% if DomainRequest.is_withdrawable %}
-            <p><a href="{% url 'domain-request-withdraw-confirmation' pk=DomainRequest.id %}" class="usa-button usa-button--outline withdraw_outline">
-                Withdraw request</a>
+            {% if DomainRequest.status == statuses.STARTED %}
+            {% with first_started_date=DomainRequest.get_first_status_started_date|date:"F j, Y" %}
+            <p class="margin-top-1">
+                {% comment %} 
+                A newly created domain request will not have a value for last_status update.
+                This is because the status never really updated. 
+                However, if this somehow goes back to started we can default to displaying that new date.
+                {% endcomment %}
+                <b class="review__step__name">Started on:</b> {{last_status_update|default:first_started_date}}
             </p>
-        {% endif %}
-        {% endblock modify_request %}
-    </div>
-
-    <div class="grid-col desktop:grid-offset-2 maxw-tablet">
-        {% block request_summary_header %}
-        <h2 class="text-primary-darker"> Summary of your domain request </h2> 
-        {% endblock request_summary_header%}
-
-        {% block request_summary %}
-        {% with heading_level='h3' %}
-        {% with org_type=DomainRequest.get_generic_org_type_display %}
-        {% include "includes/summary_item.html" with title='Type of organization' value=org_type heading_level=heading_level %}
-        {% endwith %}
-
-        {% if DomainRequest.tribe_name %}
-            {% include "includes/summary_item.html" with title='Tribal government' value=DomainRequest.tribe_name heading_level=heading_level %}
-
-            {% if DomainRequest.federally_recognized_tribe %}
-                <p>Federally-recognized tribe</p>
-            {% endif %}
-
-            {% if DomainRequest.state_recognized_tribe %}
-                <p>State-recognized tribe</p>
-            {% endif %}
-
-        {% endif %}
-
-        {% if DomainRequest.get_federal_type_display %}
-            {% include "includes/summary_item.html" with title='Federal government branch' value=DomainRequest.get_federal_type_display heading_level=heading_level %}
-        {% endif %}
-
-        {% if DomainRequest.is_election_board %}
-            {% with value=DomainRequest.is_election_board|yesno:"Yes,No,Incomplete" %}
-                {% include "includes/summary_item.html" with title='Election office' value=value heading_level=heading_level %}
             {% endwith %}
-        {% endif %}
+            {% elif DomainRequest.status == statuses.SUBMITTED %}
+            <p class="margin-top-1 margin-bottom-1">
+                <b class="review__step__name">Submitted on:</b> {{last_submitted|default:first_submitted }}
+            </p>
+            <p class="margin-top-1">
+                <b class="review__step__name">Last updated on:</b> {{DomainRequest.updated_at|date:"F j, Y"}}
+            </p>
+            {% elif DomainRequest.status == statuses.ACTION_NEEDED %}
+            <p class="margin-top-1 margin-bottom-1">
+                <b class="review__step__name">Submitted on:</b> {{last_submitted|default:first_submitted }}
+            </p>
+            <p class="margin-top-1">
+                <b class="review__step__name">Last updated on:</b> {{DomainRequest.updated_at|date:"F j, Y"}}
+            </p>
+            {% elif DomainRequest.status == statuses.REJECTED %}
+            <p class="margin-top-1 margin-bottom-1">
+                <b class="review__step__name">Submitted on:</b> {{last_submitted|default:first_submitted }}
+            </p>
+            <p class="margin-top-1">
+                <b class="review__step__name">Rejected on:</b> {{last_status_update}}
+            </p>
+            {% elif DomainRequest.status == statuses.WITHDRAWN %}
+            <p class="margin-top-1 margin-bottom-1">
+                <b class="review__step__name">Submitted on:</b> {{last_submitted|default:first_submitted }}
+            </p>
+            <p class="margin-top-1">
+                <b class="review__step__name">Withdrawn on:</b> {{last_status_update}}
+            </p>
+            {% else %}
+            {% comment %} Shown for in_review, approved, ineligible {% endcomment %}
+            <p class="margin-top-1">
+                <b class="review__step__name">Last updated on:</b> {{DomainRequest.updated_at|date:"F j, Y"}}
+            </p>
+            {% endif %}
+            {% endwith %}
+            {% endblock status_metadata %}
 
-        {% if DomainRequest.organization_name %}
-            {% include "includes/summary_item.html" with title='Organization' value=DomainRequest  address='true' heading_level=heading_level %}
-        {% endif %}
+            {% block status_blurb %}
+            {% if DomainRequest.is_awaiting_review %}
+                <p>{% include "includes/domain_request_awaiting_review.html" with show_withdraw_text=DomainRequest.is_withdrawable %}</p>
+            {% endif %}
+            {% endblock status_blurb %}
 
-        {% if DomainRequest.about_your_organization %}
-            {% include "includes/summary_item.html" with title='About your organization' value=DomainRequest.about_your_organization heading_level=heading_level %}
-        {% endif %}
+            {% block modify_request %}
+            {% if DomainRequest.is_withdrawable %}
+                <p><a href="{% url 'domain-request-withdraw-confirmation' pk=DomainRequest.id %}" class="usa-button usa-button--outline withdraw_outline">
+                    Withdraw request</a>
+                </p>
+            {% endif %}
+            {% endblock modify_request %}
+        </div>
 
-        {% if DomainRequest.senior_official %}
-            {% include "includes/summary_item.html" with title='Senior official' value=DomainRequest.senior_official contact='true' heading_level=heading_level %}
-        {% endif %}
+        <div class="grid-col {% if is_widescreen_centered %}desktop:grid-offset-2 maxw-tablet{% endif %}">
+            {% block request_summary_header %}
+            <h2 class="text-primary-darker"> Summary of your domain request </h2> 
+            {% endblock request_summary_header%}
 
-        {% if DomainRequest.current_websites.all %}
-            {% include "includes/summary_item.html" with title='Current websites' value=DomainRequest.current_websites.all list='true' heading_level=heading_level %}
-        {% endif %}
+            {% block request_summary %}
+            {% with heading_level='h3' %}
+            {% with org_type=DomainRequest.get_generic_org_type_display %}
+            {% include "includes/summary_item.html" with title='Type of organization' value=org_type heading_level=heading_level %}
+            {% endwith %}
 
-        {% if DomainRequest.requested_domain %}
-            {% include "includes/summary_item.html" with title='.gov domain' value=DomainRequest.requested_domain heading_level=heading_level %}
-        {% endif %}
+            {% if DomainRequest.tribe_name %}
+                {% include "includes/summary_item.html" with title='Tribal government' value=DomainRequest.tribe_name heading_level=heading_level %}
 
-        {% if DomainRequest.alternative_domains.all %}
-            {% include "includes/summary_item.html" with title='Alternative domains' value=DomainRequest.alternative_domains.all list='true' heading_level=heading_level %}
-        {% endif %}
-
-        {% if DomainRequest.purpose %}
-            {% include "includes/summary_item.html" with title='Purpose of your domain' value=DomainRequest.purpose heading_level=heading_level %}
-        {% endif %}
-
-        {% if DomainRequest.creator %}
-            {% include "includes/summary_item.html" with title='Your contact information' value=DomainRequest.creator contact='true' heading_level=heading_level %}
-        {% endif %}
-
-        {% if DomainRequest.other_contacts.all %}
-            {% include "includes/summary_item.html" with title='Other employees from your organization' value=DomainRequest.other_contacts.all contact='true' list='true' heading_level=heading_level %}
-        {% else %}
-            {% include "includes/summary_item.html" with title='Other employees from your organization' value=DomainRequest.no_other_contacts_rationale heading_level=heading_level %}
-        {% endif %}
-
-        {# We always show this field even if None #}
-        {% if DomainRequest %}
-            <h3 class="register-form-review-header">CISA Regional Representative</h3>
-            <ul class="usa-list usa-list--unstyled margin-top-0">
-                {% if DomainRequest.cisa_representative_first_name %}
-                {{ DomainRequest.get_formatted_cisa_rep_name }}
-                {% else %}
-                No
+                {% if DomainRequest.federally_recognized_tribe %}
+                    <p>Federally-recognized tribe</p>
                 {% endif %}
-            </ul>
-            <h3 class="register-form-review-header">Anything else</h3>
-            <ul class="usa-list usa-list--unstyled margin-top-0">
-                {% if DomainRequest.anything_else %}
-                {{DomainRequest.anything_else}}
-                {% else %}
-                No
+
+                {% if DomainRequest.state_recognized_tribe %}
+                    <p>State-recognized tribe</p>
                 {% endif %}
-            </ul>
-        {% endif %}
-    {% endwith %}
-    {% endblock request_summary%}
+
+            {% endif %}
+
+            {% if DomainRequest.get_federal_type_display %}
+                {% include "includes/summary_item.html" with title='Federal government branch' value=DomainRequest.get_federal_type_display heading_level=heading_level %}
+            {% endif %}
+
+            {% if DomainRequest.is_election_board %}
+                {% with value=DomainRequest.is_election_board|yesno:"Yes,No,Incomplete" %}
+                    {% include "includes/summary_item.html" with title='Election office' value=value heading_level=heading_level %}
+                {% endwith %}
+            {% endif %}
+
+            {% if DomainRequest.organization_name %}
+                {% include "includes/summary_item.html" with title='Organization' value=DomainRequest  address='true' heading_level=heading_level %}
+            {% endif %}
+
+            {% if DomainRequest.about_your_organization %}
+                {% include "includes/summary_item.html" with title='About your organization' value=DomainRequest.about_your_organization heading_level=heading_level %}
+            {% endif %}
+
+            {% if DomainRequest.senior_official %}
+                {% include "includes/summary_item.html" with title='Senior official' value=DomainRequest.senior_official contact='true' heading_level=heading_level %}
+            {% endif %}
+
+            {% if DomainRequest.current_websites.all %}
+                {% include "includes/summary_item.html" with title='Current websites' value=DomainRequest.current_websites.all list='true' heading_level=heading_level %}
+            {% endif %}
+
+            {% if DomainRequest.requested_domain %}
+                {% include "includes/summary_item.html" with title='.gov domain' value=DomainRequest.requested_domain heading_level=heading_level %}
+            {% endif %}
+
+            {% if DomainRequest.alternative_domains.all %}
+                {% include "includes/summary_item.html" with title='Alternative domains' value=DomainRequest.alternative_domains.all list='true' heading_level=heading_level %}
+            {% endif %}
+
+            {% if DomainRequest.purpose %}
+                {% include "includes/summary_item.html" with title='Purpose of your domain' value=DomainRequest.purpose heading_level=heading_level %}
+            {% endif %}
+
+            {% if DomainRequest.creator %}
+                {% include "includes/summary_item.html" with title='Your contact information' value=DomainRequest.creator contact='true' heading_level=heading_level %}
+            {% endif %}
+
+            {% if DomainRequest.other_contacts.all %}
+                {% include "includes/summary_item.html" with title='Other employees from your organization' value=DomainRequest.other_contacts.all contact='true' list='true' heading_level=heading_level %}
+            {% else %}
+                {% include "includes/summary_item.html" with title='Other employees from your organization' value=DomainRequest.no_other_contacts_rationale heading_level=heading_level %}
+            {% endif %}
+
+            {# We always show this field even if None #}
+            {% if DomainRequest %}
+                <h3 class="register-form-review-header">CISA Regional Representative</h3>
+                <ul class="usa-list usa-list--unstyled margin-top-0">
+                    {% if DomainRequest.cisa_representative_first_name %}
+                    {{ DomainRequest.get_formatted_cisa_rep_name }}
+                    {% else %}
+                    No
+                    {% endif %}
+                </ul>
+                <h3 class="register-form-review-header">Anything else</h3>
+                <ul class="usa-list usa-list--unstyled margin-top-0">
+                    {% if DomainRequest.anything_else %}
+                    {{DomainRequest.anything_else}}
+                    {% else %}
+                    No
+                    {% endif %}
+                </ul>
+            {% endif %}
+        {% endwith %}
+        {% endblock request_summary%}
+        </div>
     </div>
 </main>

src/registrar/templates/includes/domain_requests_table.html

@@ -4,8 +4,8 @@
 {% url 'get_domain_requests_json' as url %}
 <span id="get_domain_requests_json_url" class="display-none">{{url}}</span>
 
-<section class="section-outlined domain-requests{% if portfolio %} section-outlined--border-base-light{% endif %}" id="domain-requests">
-    <div class="section-outlined__header margin-bottom-3 {% if not portfolio %} section-outlined__header--no-portfolio justify-content-space-between{% else %} grid-row{% endif %}">
+<section class="section-outlined domain-requests {% if portfolio %}section-outlined--border-base-light{% endif %}" id="domain-requests">
+    <div class="section-outlined__header margin-bottom-3 {% if not portfolio %}section-outlined__header--no-portfolio justify-content-space-between{% else %} grid-row{% endif %}">
         {% if not portfolio %}
             <h2 id="domain-requests-header" class="display-inline-block">Domain requests</h2>
         {% else %}
@@ -13,7 +13,7 @@
         <span id="portfolio-js-value" data-portfolio="{{ portfolio.id }}"></span>
         {% endif %}
 
-        <div class="section-outlined__search {% if portfolio %} mobile:grid-col-12 desktop:grid-col-6{% endif %} {% if is_widescreen_mode %} section-outlined__search--widescreen {% endif %}">
+        <div class="section-outlined__search section-outlined__search--widescreen {% if portfolio %}mobile:grid-col-12 desktop:grid-col-6{% endif %}">
             <section aria-label="Domain requests search component" class="margin-top-2">
                 <form class="usa-search usa-search--small" method="POST" role="search">
                     {% csrf_token %}

src/registrar/templates/includes/domains_table.html

@@ -12,7 +12,7 @@
 {% if has_domain_renewal_flag and num_expiring_domains > 0 and has_any_domains_portfolio_permission %}
 <section class="usa-site-alert usa-site-alert--info margin-bottom-2 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
   <div class="usa-alert">
-    <div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
+    <div class="usa-alert__body usa-alert__body--widescreen">
       <p class="usa-alert__text maxw-none">
         {% if num_expiring_domains == 1%}  
         One domain will expire soon. Go to "Manage" to renew the domain. <a href="#" id="link-expiring-domains" class="usa-link">Show expiring domain.</a>
@@ -33,7 +33,7 @@
       <!-- Embedding the portfolio value in a data attribute -->
       <span id="portfolio-js-value" data-portfolio="{{ portfolio.id }}"></span>
     {% endif %}
-    <div class="section-outlined__search {% if portfolio %} mobile:grid-col-12 desktop:grid-col-6{% endif %} {% if is_widescreen_mode %} section-outlined__search--widescreen {% endif %}">
+    <div class="section-outlined__search section-outlined__search--widescreen {% if portfolio %}mobile:grid-col-12 desktop:grid-col-6{% endif %}">
       <section aria-label="Domains search component" class="margin-top-2">
         <form class="usa-search usa-search--small" method="POST" role="search">
           {% csrf_token %}
@@ -78,7 +78,7 @@
   {% if has_domain_renewal_flag and num_expiring_domains > 0 and not portfolio %}
   <section class="usa-site-alert usa-site-alert--info margin-bottom-2 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
     <div class="usa-alert">
-      <div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
+      <div class="usa-alert__body usa-alert__body--widescreen">
         <p class="usa-alert__text maxw-none">
           {% if num_expiring_domains == 1%}  
           One domain will expire soon. Go to "Manage" to renew the domain. <a href="#" id="link-expiring-domains" class="usa-link">Show expiring domain.</a>

src/registrar/templates/includes/footer.html

@@ -3,7 +3,7 @@
 
 <footer class="usa-footer">
     <div class="usa-footer__secondary-section">
-      <div class="grid-container {% if is_widescreen_mode %} grid-container--widescreen{% endif %}">
+      <div class="grid-container grid-container--widescreen">
         <div class="grid-row grid-gap">
           <div
             class="
@@ -24,7 +24,7 @@
           <div class="usa-footer__contact-links 
                       mobile-lg:grid-col-6 flex-align-self-center"
           >
-            <address class="usa-footer__address">
+            <address class="usa-footer__address maxw-none">
               <div class="usa-footer__contact-info grid-row grid-gap-md">
                 {% if show_manage_your_domains %}
                 <div class="grid-col-auto">
@@ -51,7 +51,7 @@
       class="usa-identifier__section usa-identifier__section--masthead"
       aria-label="Agency identifier"
     >
-      <div class="usa-identifier__container {% if is_widescreen_mode %} usa-identifier__container--widescreen {% endif %}">
+      <div class="usa-identifier__container usa-identifier__container--widescreen padding-x--widescreen">
         <div class="usa-identifier__logos">
           <a rel="noopener noreferrer" target="_blank" href="https://www.cisa.gov" class="usa-identifier__logo"
             ><img
@@ -77,7 +77,7 @@
       class="usa-identifier__section usa-identifier__section--required-links"
       aria-label="Important links"
     >
-      <div class="usa-identifier__container {% if is_widescreen_mode %} usa-identifier__container--widescreen {% endif %}">
+      <div class="usa-identifier__container usa-identifier__container--widescreen padding-x--widescreen">
         <ul class="usa-identifier__required-links-list">
           <li class="usa-identifier__required-links-item">
         <a rel="noopener noreferrer" target="_blank" href="{% public_site_url 'about/' %}"
@@ -119,7 +119,7 @@
       class="usa-identifier__section usa-identifier__section--usagov"
       aria-label="U.S. government information and services"
     >
-      <div class="usa-identifier__container {% if is_widescreen_mode %} usa-identifier__container--widescreen {% endif %}">
+      <div class="usa-identifier__container usa-identifier__container--widescreen padding-x--widescreen">
         <div class="usa-identifier__usagov-description">
           Looking for U.S. government information and services?
         </div>

src/registrar/templates/includes/form_errors.html

@@ -1,6 +1,7 @@
 {% if form.errors %}
+  <div id="form-errors">
   {% for error in form.non_field_errors %}
-    <div class="usa-alert usa-alert--error usa-alert--slim margin-bottom-2">
+    <div class="usa-alert usa-alert--error usa-alert--slim margin-bottom-2" role="alert">
     <div class="usa-alert__body">
     {{ error|escape }}
     </div>
@@ -14,5 +15,6 @@
       </div>
     </div>
   {% endfor %}
-{% endfor %}
+  {% endfor %}
+  </div>
 {% endif %}

src/registrar/templates/includes/header_basic.html

@@ -1,7 +1,7 @@
 {% load static %}
 
 <header class="usa-header usa-header--basic">
-  <div class="usa-nav-container {% if is_widescreen_mode %} usa-nav-container--widescreen {% endif %}">
+  <div class="usa-nav-container usa-nav-container--widescreen padding-x--widescreen">
     <div class="usa-navbar">
         {% include "includes/gov_extended_logo.html" with logo_clickable=logo_clickable %}
       <button type="button" class="usa-menu-btn">Menu</button>

src/registrar/templates/includes/header_extended.html

@@ -2,13 +2,13 @@
 {% load custom_filters %}
 
 <header class="usa-header usa-header--extended">
-    <div class="usa-navbar {% if is_widescreen_mode %} usa-navbar--widescreen {% endif %}">
+    <div class="usa-navbar usa-navbar--widescreen padding-x--widescreen">
         {% include "includes/gov_extended_logo.html" with logo_clickable=logo_clickable %}
     <button type="button" class="usa-menu-btn">Menu</button>
     </div>
     {% block usa_nav %}
     <nav class="usa-nav" aria-label="Primary navigation">
-    <div class="usa-nav__inner {% if is_widescreen_mode %} usa-nav__inner--widescreen {% endif %}">
+    <div class="usa-nav__inner usa-nav__inner--widescreen padding-x--widescreen">
         <button type="button" class="usa-nav__close">
             <img src="{%static 'img/usa-icons/close.svg'%}" role="img" alt="Close" />
         </button>

src/registrar/templates/includes/members_table.html

@@ -8,7 +8,7 @@
 <section class="section-outlined members margin-top-0 section-outlined--border-base-light" id="members">
   <div class="section-outlined__header margin-bottom-3 grid-row">
       <!-- ---------- SEARCH ---------- -->
-      <div class="section-outlined__search mobile:grid-col-12 desktop:grid-col-6 {% if is_widescreen_mode %} section-outlined__search--widescreen {% endif %}">
+      <div class="section-outlined__search mobile:grid-col-12 desktop:grid-col-6 section-outlined__search--widescreen">
         <section aria-label="Members search component" class="margin-top-2">
           <form class="usa-search usa-search--small" method="POST" role="search">
             {% csrf_token %}

src/registrar/templates/includes/modal.html

@@ -1,4 +1,5 @@
 {% load static form_helpers url_helpers %}
+{% load custom_filters %}
 
 <div class="usa-modal__content">
     <div class="usa-modal__main">
@@ -24,39 +25,51 @@
         <div class="usa-modal__footer">
             <ul class="usa-button-group">
                 <li class="usa-button-group__item">
-                    {% if not_form and modal_button %}
-                        {{ modal_button }}
+                    {% if cancel_button_only %}
+                        <button
+                            type="button"
+                            class="{{ modal_button_class|button_class }}"
+                            data-close-modal
+                        >
+                        {% if modal_button_text %}
+                            {{ modal_button_text }}
+                        {% else %}
+                            Cancel
+                        {% endif %}
+                    </button>
+                    {% elif modal_button_id and modal_button_text %}
+                        {% comment %} Adding button id allows for onclick listeners on button by id,
+                        which execute form submission on form elsewhere on a page outside modal.{% endcomment %}
+                        <button
+                            id="{{ modal_button_id }}"
+                            type="button"
+                            class="{{ modal_button_class|button_class }}"
+                        >
+                            {{ modal_button_text }}
+                        </button>
                     {% elif modal_button_url and modal_button_text %}
                         <a
                             href="{{ modal_button_url }}"
                             type="button"
-                            class="usa-button"
+                            class="{{ modal_button_class|button_class }}"
                         >
                             {{ modal_button_text }}
                         </a>
-                    {% else %}
-                        <form method="post">
-                            {% csrf_token %}
-                            {{ modal_button }}
-                        </form>
                     {% endif %}
                 </li>
                 <li class="usa-button-group__item">
                     {% comment %} The cancel button the DS form actually triggers a context change in the view,
                     in addition to being a close modal hook {% endcomment %}
                     {% if cancel_button_resets_ds_form %}
-                        <form method="post">
-                            {% csrf_token %}
-                            <button
-                                type="submit"
-                                class="usa-button usa-button--unstyled padding-105 text-center"
-                                name="btn-cancel-click"
-                                data-close-modal
-                            >
-                                Cancel
-                            </button>
-                        </form>
-                    {% elif not is_domain_request_form or review_form_is_complete %}
+                        <button
+                            type="submit"
+                            class="usa-button usa-button--unstyled padding-105 text-center"
+                            id="btn-cancel-click-button"
+                            data-close-modal
+                        >
+                            Cancel
+                        </button>
+                    {% elif not cancel_button_only %}
                         <button
                             type="button"
                             class="usa-button usa-button--unstyled padding-105 text-center"
@@ -72,20 +85,17 @@
     {% comment %} The cancel button the DS form actually triggers a context change in the view,
     in addition to being a close modal hook {% endcomment %}
     {% if cancel_button_resets_ds_form %}
-        <form method="post">
-            {% csrf_token %}
-            <button
-                type="submit"
-                class="usa-button usa-modal__close"
-                aria-label="Close this window"
-                name="btn-cancel-click"
-                data-close-modal
-            >
-                <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
-                    <use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
-                </svg>
-            </button>
-        </form>
+        <button
+            type="submit"
+            class="usa-button usa-modal__close"
+            aria-label="Close this window"
+            id="btn-cancel-click-close-button"
+            data-close-modal
+        >
+            <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
+                <use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
+            </svg>
+        </button>
     {% else %}
         <button
             type="button"

src/registrar/templates/includes/request_status_manage.html

@@ -1,240 +1,242 @@
 {% load custom_filters %}
 {% load static url_helpers %}
-<main id="main-content" class="grid-container">
-    <div class="grid-col desktop:grid-offset-2 desktop:grid-col-8">
-        {% block breadcrumb %}
-        {% if portfolio %}
-            {% url 'domain-requests' as url %}
-        {% else %}
-            {% url 'home' as url %}
-        {% endif %}
-        <nav class="usa-breadcrumb padding-top-0" aria-label="Domain request breadcrumb">
-        <ol class="usa-breadcrumb__list">
-            <li class="usa-breadcrumb__list-item">
+<main id="main-content" class="grid-container grid-container--widescreen">
+    <div class="grid-row {% if not is_widescreen_centered %}max-width--grid-container{% endif %}">
+        <div class="grid-col desktop:grid-col-8 {% if is_widescreen_centered %}desktop:grid-offset-2{% endif %}">
+            {% block breadcrumb %}
             {% if portfolio %}
-                <a href="{{ url }}" class="usa-breadcrumb__link"><span>Domain requests</span></a>
+                {% url 'domain-requests' as url %}
             {% else %}
-                <a href="{{ url }}" class="usa-breadcrumb__link"><span>Manage your domains</span></a>
+                {% url 'home' as url %}
             {% endif %}
-            </li>
-            <li class="usa-breadcrumb__list-item usa-current" aria-current="page">
-            {% if not DomainRequest.requested_domain and DomainRequest.status == DomainRequest.DomainRequestStatus.STARTED %}
-                <span>New domain request</span>
-            {% else %}
-                <span>{{ DomainRequest.requested_domain.name }}</span>
+            <nav class="usa-breadcrumb padding-top-0" aria-label="Domain request breadcrumb">
+            <ol class="usa-breadcrumb__list">
+                <li class="usa-breadcrumb__list-item">
+                {% if portfolio %}
+                    <a href="{{ url }}" class="usa-breadcrumb__link"><span>Domain requests</span></a>
+                {% else %}
+                    <a href="{{ url }}" class="usa-breadcrumb__link"><span>Manage your domains</span></a>
+                {% endif %}
+                </li>
+                <li class="usa-breadcrumb__list-item usa-current" aria-current="page">
+                {% if not DomainRequest.requested_domain and DomainRequest.status == DomainRequest.DomainRequestStatus.STARTED %}
+                    <span>New domain request</span>
+                {% else %}
+                    <span>{{ DomainRequest.requested_domain.name }}</span>
+                {% endif %}
+                </li>
+            </ol>
+            </nav>
+            {% endblock breadcrumb %}
+
+            {% block header %}
+                {% if not DomainRequest.requested_domain and DomainRequest.status == DomainRequest.DomainRequestStatus.STARTED %}
+                    <h1>New domain request</h1>
+                {% else %}
+                    <h1>Domain request for {{ DomainRequest.requested_domain.name }}</h1>
+                {% endif %}
+            {% endblock header %}
+
+            {% block status_summary %}
+            <div
+                class="usa-summary-box dotgov-status-box margin-top-3 padding-left-2" 
+                role="region"
+                aria-labelledby="summary-box-key-information"
+            >
+            <div class="usa-summary-box__body">
+                <p class="usa-summary-box__heading font-sans-md margin-bottom-0" 
+                    id="summary-box-key-information"
+                > 
+                <span class="text-bold text-primary-darker">
+                    Status:
+                </span>
+                {{ DomainRequest.get_status_display|default:"ERROR Please contact technical support/dev" }}
+                </p>
+            </div>
+            </div>
+            <br>
+            {% endblock status_summary %}
+            
+            {% block status_metadata %}
+
+            {% if portfolio %}
+                {% if DomainRequest.creator %}
+                <p class="margin-top-1 margin-bottom-1">
+                    <b class="review__step__name">Created by:</b> {{DomainRequest.creator.email|default:DomainRequest.creator.get_formatted_name }}
+                </p>
+                {% else %}
+                <p class="margin-top-1 margin-bottom-1">
+                    <b class="review__step__name">No creator found:</b> this is an error, please email <a href="mailto:help@get.gov" class="usa-link">help@get.gov</a>.
+                </p>
+                {% endif %}
             {% endif %}
-            </li>
-        </ol>
-        </nav>
-        {% endblock breadcrumb %}
 
-        {% block header %}
-            {% if not DomainRequest.requested_domain and DomainRequest.status == DomainRequest.DomainRequestStatus.STARTED %}
-                <h1>New domain request</h1>
-            {% else %}
-                <h1>Domain request for {{ DomainRequest.requested_domain.name }}</h1>
-            {% endif %}
-        {% endblock header %}
-
-        {% block status_summary %}
-        <div
-            class="usa-summary-box dotgov-status-box margin-top-3 padding-left-2" 
-            role="region"
-            aria-labelledby="summary-box-key-information"
-        >
-        <div class="usa-summary-box__body">
-            <p class="usa-summary-box__heading font-sans-md margin-bottom-0" 
-                id="summary-box-key-information"
-            > 
-            <span class="text-bold text-primary-darker">
-                Status:
-            </span>
-            {{ DomainRequest.get_status_display|default:"ERROR Please contact technical support/dev" }}
-            </p>
-        </div>
-        </div>
-        <br>
-        {% endblock status_summary %}
-        
-        {% block status_metadata %}
-
-        {% if portfolio %}
-            {% if DomainRequest.creator %}
-            <p class="margin-top-1 margin-bottom-1">
-                <b class="review__step__name">Created by:</b> {{DomainRequest.creator.email|default:DomainRequest.creator.get_formatted_name }}
-            </p>
-            {% else %}
-            <p class="margin-top-1 margin-bottom-1">
-                <b class="review__step__name">No creator found:</b> this is an error, please email <a href="mailto:help@get.gov" class="usa-link">help@get.gov</a>.
-            </p>
-            {% endif %}
-        {% endif %}
-
-        {% with statuses=DomainRequest.DomainRequestStatus last_submitted=DomainRequest.last_submitted_date|date:"F j, Y" first_submitted=DomainRequest.first_submitted_date|date:"F j, Y" last_status_update=DomainRequest.last_status_update|date:"F j, Y" %}
-        {% comment %} 
-        These are intentionally seperated this way. 
-        There is some code repetition, but it gives us more flexibility rather than a dense reduction. 
-        Leave it this way until we've solidified our requirements.
-        {% endcomment %}
-        {% if DomainRequest.status == statuses.STARTED %}
-        {% with first_started_date=DomainRequest.get_first_status_started_date|date:"F j, Y" %}
-        <p class="margin-top-1">
+            {% with statuses=DomainRequest.DomainRequestStatus last_submitted=DomainRequest.last_submitted_date|date:"F j, Y" first_submitted=DomainRequest.first_submitted_date|date:"F j, Y" last_status_update=DomainRequest.last_status_update|date:"F j, Y" %}
             {% comment %} 
-            A newly created domain request will not have a value for last_status update.
-            This is because the status never really updated. 
-            However, if this somehow goes back to started we can default to displaying that new date.
+            These are intentionally seperated this way. 
+            There is some code repetition, but it gives us more flexibility rather than a dense reduction. 
+            Leave it this way until we've solidified our requirements.
             {% endcomment %}
-            <b class="review__step__name">Started on:</b> {{last_status_update|default:first_started_date}}
-        </p>
-        {% endwith %}
-        {% elif DomainRequest.status == statuses.SUBMITTED %}
-        <p class="margin-top-1 margin-bottom-1">
-            <b class="review__step__name">Submitted on:</b> {{last_submitted|default:first_submitted }}
-        </p>
-        <p class="margin-top-1">
-            <b class="review__step__name">Last updated on:</b> {{DomainRequest.updated_at|date:"F j, Y"}}
-        </p>
-        {% elif DomainRequest.status == statuses.ACTION_NEEDED %}
-        <p class="margin-top-1 margin-bottom-1">
-            <b class="review__step__name">Submitted on:</b> {{last_submitted|default:first_submitted }}
-        </p>
-        <p class="margin-top-1">
-            <b class="review__step__name">Last updated on:</b> {{DomainRequest.updated_at|date:"F j, Y"}}
-        </p>
-        {% elif DomainRequest.status == statuses.REJECTED %}
-        <p class="margin-top-1 margin-bottom-1">
-            <b class="review__step__name">Submitted on:</b> {{last_submitted|default:first_submitted }}
-        </p>
-        <p class="margin-top-1">
-            <b class="review__step__name">Rejected on:</b> {{last_status_update}}
-        </p>
-        {% elif DomainRequest.status == statuses.WITHDRAWN %}
-        <p class="margin-top-1 margin-bottom-1">
-            <b class="review__step__name">Submitted on:</b> {{last_submitted|default:first_submitted }}
-        </p>
-        <p class="margin-top-1">
-            <b class="review__step__name">Withdrawn on:</b> {{last_status_update}}
-        </p>
-        {% else %}
-        {% comment %} Shown for in_review, approved, ineligible {% endcomment %}
-        <p class="margin-top-1">
-            <b class="review__step__name">Last updated on:</b> {{DomainRequest.updated_at|date:"F j, Y"}}
-        </p>
-        {% endif %}
-        {% endwith %}
-        {% endblock status_metadata %}
-
-        {% block status_blurb %}
-        {% if DomainRequest.is_awaiting_review %}
-            <p>{% include "includes/domain_request_awaiting_review.html" with show_withdraw_text=DomainRequest.is_withdrawable %}</p>
-        {% endif %}
-        {% endblock status_blurb %}
-
-        {% block modify_request %}
-        {% if DomainRequest.is_withdrawable %}
-            <p><a href="{% url 'domain-request-withdraw-confirmation' pk=DomainRequest.id %}" class="usa-button usa-button--outline withdraw_outline">
-                Withdraw request</a>
+            {% if DomainRequest.status == statuses.STARTED %}
+            {% with first_started_date=DomainRequest.get_first_status_started_date|date:"F j, Y" %}
+            <p class="margin-top-1">
+                {% comment %} 
+                A newly created domain request will not have a value for last_status update.
+                This is because the status never really updated. 
+                However, if this somehow goes back to started we can default to displaying that new date.
+                {% endcomment %}
+                <b class="review__step__name">Started on:</b> {{last_status_update|default:first_started_date}}
             </p>
-        {% endif %}
-        {% endblock modify_request %}
-    </div>
-
-    <div class="grid-col desktop:grid-offset-2 maxw-tablet">
-        {% block request_summary_header %}
-        <h2 class="text-primary-darker"> Summary of your domain request </h2> 
-        {% endblock request_summary_header%}
-
-        {% block request_summary %}
-        {% if portfolio %}
-            {% include "includes/portfolio_request_review_steps.html" with is_editable=False domain_request=DomainRequest %}
-        {% else %}
-            {% with heading_level='h3' %}
-            {% with org_type=DomainRequest.get_generic_org_type_display %}
-            {% include "includes/summary_item.html" with title='Type of organization' value=org_type heading_level=heading_level %}
             {% endwith %}
-
-            {% if DomainRequest.tribe_name %}
-                {% include "includes/summary_item.html" with title='Tribal government' value=DomainRequest.tribe_name heading_level=heading_level %}
-
-                {% if DomainRequest.federally_recognized_tribe %}
-                    <p>Federally-recognized tribe</p>
-                {% endif %}
-
-                {% if DomainRequest.state_recognized_tribe %}
-                    <p>State-recognized tribe</p>
-                {% endif %}
-
-            {% endif %}
-
-            {% if DomainRequest.get_federal_type_display %}
-                {% include "includes/summary_item.html" with title='Federal government branch' value=DomainRequest.get_federal_type_display heading_level=heading_level %}
-            {% endif %}
-
-            {% if DomainRequest.is_election_board %}
-                {% with value=DomainRequest.is_election_board|yesno:"Yes,No,Incomplete" %}
-                    {% include "includes/summary_item.html" with title='Election office' value=value heading_level=heading_level %}
-                {% endwith %}
-            {% endif %}
-
-            {% if DomainRequest.organization_name %}
-                {% include "includes/summary_item.html" with title='Organization' value=DomainRequest  address='true' heading_level=heading_level %}
-            {% endif %}
-
-            {% if DomainRequest.about_your_organization %}
-                {% include "includes/summary_item.html" with title='About your organization' value=DomainRequest.about_your_organization heading_level=heading_level %}
-            {% endif %}
-
-            {% if DomainRequest.senior_official %}
-                {% include "includes/summary_item.html" with title='Senior official' value=DomainRequest.senior_official contact='true' heading_level=heading_level %}
-            {% endif %}
-
-            {% if DomainRequest.current_websites.all %}
-                {% include "includes/summary_item.html" with title='Current websites' value=DomainRequest.current_websites.all list='true' heading_level=heading_level %}
-            {% endif %}
-
-            {% if DomainRequest.requested_domain %}
-                {% include "includes/summary_item.html" with title='.gov domain' value=DomainRequest.requested_domain heading_level=heading_level %}
-            {% endif %}
-
-            {% if DomainRequest.alternative_domains.all %}
-                {% include "includes/summary_item.html" with title='Alternative domains' value=DomainRequest.alternative_domains.all list='true' heading_level=heading_level %}
-            {% endif %}
-
-            {% if DomainRequest.purpose %}
-                {% include "includes/summary_item.html" with title='Purpose of your domain' value=DomainRequest.purpose heading_level=heading_level %}
-            {% endif %}
-
-            {% if DomainRequest.creator %}
-                {% include "includes/summary_item.html" with title='Your contact information' value=DomainRequest.creator contact='true' heading_level=heading_level %}
-            {% endif %}
-
-            {% if DomainRequest.other_contacts.all %}
-                {% include "includes/summary_item.html" with title='Other employees from your organization' value=DomainRequest.other_contacts.all contact='true' list='true' heading_level=heading_level %}
+            {% elif DomainRequest.status == statuses.SUBMITTED %}
+            <p class="margin-top-1 margin-bottom-1">
+                <b class="review__step__name">Submitted on:</b> {{last_submitted|default:first_submitted }}
+            </p>
+            <p class="margin-top-1">
+                <b class="review__step__name">Last updated on:</b> {{DomainRequest.updated_at|date:"F j, Y"}}
+            </p>
+            {% elif DomainRequest.status == statuses.ACTION_NEEDED %}
+            <p class="margin-top-1 margin-bottom-1">
+                <b class="review__step__name">Submitted on:</b> {{last_submitted|default:first_submitted }}
+            </p>
+            <p class="margin-top-1">
+                <b class="review__step__name">Last updated on:</b> {{DomainRequest.updated_at|date:"F j, Y"}}
+            </p>
+            {% elif DomainRequest.status == statuses.REJECTED %}
+            <p class="margin-top-1 margin-bottom-1">
+                <b class="review__step__name">Submitted on:</b> {{last_submitted|default:first_submitted }}
+            </p>
+            <p class="margin-top-1">
+                <b class="review__step__name">Rejected on:</b> {{last_status_update}}
+            </p>
+            {% elif DomainRequest.status == statuses.WITHDRAWN %}
+            <p class="margin-top-1 margin-bottom-1">
+                <b class="review__step__name">Submitted on:</b> {{last_submitted|default:first_submitted }}
+            </p>
+            <p class="margin-top-1">
+                <b class="review__step__name">Withdrawn on:</b> {{last_status_update}}
+            </p>
             {% else %}
-                {% include "includes/summary_item.html" with title='Other employees from your organization' value=DomainRequest.no_other_contacts_rationale heading_level=heading_level %}
+            {% comment %} Shown for in_review, approved, ineligible {% endcomment %}
+            <p class="margin-top-1">
+                <b class="review__step__name">Last updated on:</b> {{DomainRequest.updated_at|date:"F j, Y"}}
+            </p>
             {% endif %}
+            {% endwith %}
+            {% endblock status_metadata %}
 
-            {# We always show this field even if None #}
-            {% if DomainRequest %}
-                <h3 class="register-form-review-header">CISA Regional Representative</h3>
-                <ul class="usa-list usa-list--unstyled margin-top-0">
-                    {% if DomainRequest.cisa_representative_first_name %}
-                    {{ DomainRequest.get_formatted_cisa_rep_name }}
-                    {% else %}
-                    No
-                    {% endif %}
-                </ul>
-                <h3 class="register-form-review-header">Anything else</h3>
-                <ul class="usa-list usa-list--unstyled margin-top-0">
-                    {% if DomainRequest.anything_else %}
-                    {{DomainRequest.anything_else}}
-                    {% else %}
-                    No
-                    {% endif %}
-                </ul>
+            {% block status_blurb %}
+            {% if DomainRequest.is_awaiting_review %}
+                <p>{% include "includes/domain_request_awaiting_review.html" with show_withdraw_text=DomainRequest.is_withdrawable %}</p>
             {% endif %}
-        {% endwith %}
-    {% endif %}
-    {% endblock request_summary%}
+            {% endblock status_blurb %}
+
+            {% block modify_request %}
+            {% if DomainRequest.is_withdrawable %}
+                <p><a href="{% url 'domain-request-withdraw-confirmation' pk=DomainRequest.id %}" class="usa-button usa-button--outline withdraw_outline">
+                    Withdraw request</a>
+                </p>
+            {% endif %}
+            {% endblock modify_request %}
+        </div>
+
+        <div class="grid-col {% if is_widescreen_centered %}desktop:grid-offset-2 maxw-tablet{% endif %}">
+            {% block request_summary_header %}
+            <h2 class="text-primary-darker"> Summary of your domain request </h2> 
+            {% endblock request_summary_header%}
+
+            {% block request_summary %}
+            {% if portfolio %}
+                {% include "includes/portfolio_request_review_steps.html" with is_editable=False domain_request=DomainRequest %}
+            {% else %}
+                {% with heading_level='h3' %}
+                {% with org_type=DomainRequest.get_generic_org_type_display %}
+                {% include "includes/summary_item.html" with title='Type of organization' value=org_type heading_level=heading_level %}
+                {% endwith %}
+
+                {% if DomainRequest.tribe_name %}
+                    {% include "includes/summary_item.html" with title='Tribal government' value=DomainRequest.tribe_name heading_level=heading_level %}
+
+                    {% if DomainRequest.federally_recognized_tribe %}
+                        <p>Federally-recognized tribe</p>
+                    {% endif %}
+
+                    {% if DomainRequest.state_recognized_tribe %}
+                        <p>State-recognized tribe</p>
+                    {% endif %}
+
+                {% endif %}
+
+                {% if DomainRequest.get_federal_type_display %}
+                    {% include "includes/summary_item.html" with title='Federal government branch' value=DomainRequest.get_federal_type_display heading_level=heading_level %}
+                {% endif %}
+
+                {% if DomainRequest.is_election_board %}
+                    {% with value=DomainRequest.is_election_board|yesno:"Yes,No,Incomplete" %}
+                        {% include "includes/summary_item.html" with title='Election office' value=value heading_level=heading_level %}
+                    {% endwith %}
+                {% endif %}
+
+                {% if DomainRequest.organization_name %}
+                    {% include "includes/summary_item.html" with title='Organization' value=DomainRequest  address='true' heading_level=heading_level %}
+                {% endif %}
+
+                {% if DomainRequest.about_your_organization %}
+                    {% include "includes/summary_item.html" with title='About your organization' value=DomainRequest.about_your_organization heading_level=heading_level %}
+                {% endif %}
+
+                {% if DomainRequest.senior_official %}
+                    {% include "includes/summary_item.html" with title='Senior official' value=DomainRequest.senior_official contact='true' heading_level=heading_level %}
+                {% endif %}
+
+                {% if DomainRequest.current_websites.all %}
+                    {% include "includes/summary_item.html" with title='Current websites' value=DomainRequest.current_websites.all list='true' heading_level=heading_level %}
+                {% endif %}
+
+                {% if DomainRequest.requested_domain %}
+                    {% include "includes/summary_item.html" with title='.gov domain' value=DomainRequest.requested_domain heading_level=heading_level %}
+                {% endif %}
+
+                {% if DomainRequest.alternative_domains.all %}
+                    {% include "includes/summary_item.html" with title='Alternative domains' value=DomainRequest.alternative_domains.all list='true' heading_level=heading_level %}
+                {% endif %}
+
+                {% if DomainRequest.purpose %}
+                    {% include "includes/summary_item.html" with title='Purpose of your domain' value=DomainRequest.purpose heading_level=heading_level %}
+                {% endif %}
+
+                {% if DomainRequest.creator %}
+                    {% include "includes/summary_item.html" with title='Your contact information' value=DomainRequest.creator contact='true' heading_level=heading_level %}
+                {% endif %}
+
+                {% if DomainRequest.other_contacts.all %}
+                    {% include "includes/summary_item.html" with title='Other employees from your organization' value=DomainRequest.other_contacts.all contact='true' list='true' heading_level=heading_level %}
+                {% else %}
+                    {% include "includes/summary_item.html" with title='Other employees from your organization' value=DomainRequest.no_other_contacts_rationale heading_level=heading_level %}
+                {% endif %}
+
+                {# We always show this field even if None #}
+                {% if DomainRequest %}
+                    <h3 class="register-form-review-header">CISA Regional Representative</h3>
+                    <ul class="usa-list usa-list--unstyled margin-top-0">
+                        {% if DomainRequest.cisa_representative_first_name %}
+                        {{ DomainRequest.get_formatted_cisa_rep_name }}
+                        {% else %}
+                        No
+                        {% endif %}
+                    </ul>
+                    <h3 class="register-form-review-header">Anything else</h3>
+                    <ul class="usa-list usa-list--unstyled margin-top-0">
+                        {% if DomainRequest.anything_else %}
+                        {{DomainRequest.anything_else}}
+                        {% else %}
+                        No
+                        {% endif %}
+                    </ul>
+                {% endif %}
+            {% endwith %}
+        {% endif %}
+        {% endblock request_summary%}
+        </div>
     </div>
 </main>

src/registrar/templates/includes/required_fields.html

@@ -1,3 +1,3 @@
-  <p class="{% if not remove_margin_top %}margin-top-3 {% endif %}">
+  <p class="{% if not remove_margin_top %}margin-top-3{% endif %}">
     <em>Required fields are marked with an asterisk (<abbr class="usa-hint usa-hint--required" title="required">*</abbr>).</em>
   </p>

src/registrar/templates/includes/senior_official.html

@@ -26,7 +26,6 @@
     </form>
 {% elif not form.full_name.value and not form.title.value and not form.email.value %}
     <p>
-        Your senior official is a person within your organization who can authorize domain requests.
         We don't have information about your organization's senior official. To suggest an update, email <a href="mailto:help@get.gov" class="usa-link">help@get.gov</a>.
     </p>
 {% else %}

src/registrar/templates/portfolio_base.html

@@ -4,26 +4,29 @@
   <div id="wrapper" class="{% block wrapper_class %}wrapper--padding-top-6{% endblock %}">
     {% block content %}
         
-        <main class="grid-container {% if is_widescreen_mode %} grid-container--widescreen{% endif %}">
+        <main class="grid-container grid-container--widescreen">
             {% if user.is_authenticated %}
             {# the entire logged in page goes here #}
             
-            <div class="tablet:grid-col-11 desktop:grid-col-10 tablet:grid-offset-1">
+            <div class="grid-row {% if not is_widescreen_centered %}max-width--grid-container{% endif %}">
+              <div class="tablet:grid-col-11 desktop:grid-col-10 {% if is_widescreen_centered %}tablet:grid-offset-1{% endif %}">
                 {% block messages %}
                     {% include "includes/form_messages.html" %}
                 {% endblock %}
             
                 {% block portfolio_content %}{% endblock %}
             
-            </div>            
-            {% else %} {# not user.is_authenticated #}
-            {# the entire logged out page goes here #}
-            
-            <p><a class="usa-button" href="{% url 'login' %}">
-            Sign in
-            </a></p>
-            
-            {% endif %}
+              </div>            
+              {% else %} {# not user.is_authenticated #}
+              {# the entire logged out page goes here #}
+              
+              <p><a class="usa-button" href="{% url 'login' %}">
+              Sign in
+              </a></p>
+              
+              {% endif %}
+            </div>
+           
         </main>
 
       {% endblock content%}

src/registrar/templates/portfolio_organization.html

@@ -23,6 +23,8 @@
             {% include "includes/form_messages.html" %}
         {% endblock %}
 
+        {% include "includes/form_errors.html" with form=form %}
+
         <h1>Organization</h1>
 
         <p>The name of your organization will be publicly listed as the domain registrant.</p>
@@ -33,7 +35,6 @@
                 To suggest an update, email <a href="mailto:help@get.gov" class="usa-link">help@get.gov</a>.
             </p>
 
-            {% include "includes/form_errors.html" with form=form %}
             {% include "includes/required_fields.html" %}
             <form class="usa-form usa-form--large desktop:margin-top-4" method="post" novalidate>
                 {% csrf_token %}

src/registrar/templates/profile.html

@@ -11,90 +11,92 @@ Edit your User Profile |
 {% endblock %}
 
 {% block content %}
-<main id="main-content" class="grid-container">
-  <div class="grid-col desktop:grid-offset-2 desktop:grid-col-8">
-    {% if messages %}
-    {% for message in messages %}
-    <div class="usa-alert usa-alert--{{ message.tags }} usa-alert--slim margin-bottom-3">
-        <div class="usa-alert__body">
-        {{ message }}
-        </div>
-    </div>
-    {% endfor %}
-    {% endif %}
-    {% include "includes/form_errors.html" with form=form %}
+<main id="main-content" class="grid-container grid-container--widescreen">
+    <div class="grid-row {% if not is_widescreen_centered %}max-width--grid-container{% endif %}">
+        <div class="desktop:grid-col-8">
+            {% if messages %}
+            {% for message in messages %}
+            <div class="usa-alert usa-alert--{{ message.tags }} usa-alert--slim margin-bottom-3">
+                <div class="usa-alert__body">
+                {{ message }}
+                </div>
+            </div>
+            {% endfor %}
+            {% endif %}
+            {% include "includes/form_errors.html" with form=form %}
 
-    {% if show_back_button %}
-      <a href="{% url form.initial.redirect %}" class="breadcrumb__back">
-        <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
-        <use xlink:href="{% static 'img/sprite.svg' %}#arrow_back"></use>
-        </svg>
-        <p class="margin-left-05 margin-top-0 margin-bottom-0 line-height-sans-1">
-          {{ profile_back_button_text }}
-        </p>
-      </a>
-    {% endif %}
-    
-    {% if show_confirmation_modal %}
-        <a
-            href="#toggle-confirmation-modal"
-            class="usa-button display-none show-confirmation-modal"
-            aria-controls="toggle-confirmation-modal"
-            data-open-modal
-            >Open confirmation modal</a>
-        <div
-            class="usa-modal usa-modal--lg is-visible"
-            id="toggle-confirmation-modal"
-            aria-labelledby="Add contact information"
-            aria-describedby="Add contact information"
-            data-force-action
-        >
-            <div class="usa-modal__content">
-                <div class="usa-modal__main">
-                    <h2 class="usa-modal__heading">
-                        Add contact information
-                    </h2>
-                    <div class="usa-prose">
-                        <p>
-                            .Gov domain registrants must maintain accurate contact information in the .gov registrar.
-                            Before you can manage your domain, we need you to add your contact information.
-                        </p>
-                    </div>
-                    <div class="usa-modal__footer">
-                        <ul class="usa-button-group">
-                            <li class="usa-button-group__item">
-                                <button
-                                    type="button"
-                                    class="usa-button padding-105 text-center"
-                                    data-close-modal
-                                >
+            {% if show_back_button %}
+            <a href="{% url form.initial.redirect %}" class="breadcrumb__back">
+                <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
+                <use xlink:href="{% static 'img/sprite.svg' %}#arrow_back"></use>
+                </svg>
+                <p class="margin-left-05 margin-top-0 margin-bottom-0 line-height-sans-1">
+                {{ profile_back_button_text }}
+                </p>
+            </a>
+            {% endif %}
+            
+            {% if show_confirmation_modal %}
+                <a
+                    href="#toggle-confirmation-modal"
+                    class="usa-button display-none show-confirmation-modal"
+                    aria-controls="toggle-confirmation-modal"
+                    data-open-modal
+                    >Open confirmation modal</a>
+                <div
+                    class="usa-modal usa-modal--lg is-visible"
+                    id="toggle-confirmation-modal"
+                    aria-labelledby="Add contact information"
+                    aria-describedby="Add contact information"
+                    data-force-action
+                >
+                    <div class="usa-modal__content">
+                        <div class="usa-modal__main">
+                            <h2 class="usa-modal__heading">
                                 Add contact information
-                                </button>
-                            </li>     
-                        </ul>
+                            </h2>
+                            <div class="usa-prose">
+                                <p>
+                                    .Gov domain registrants must maintain accurate contact information in the .gov registrar.
+                                    Before you can manage your domain, we need you to add your contact information.
+                                </p>
+                            </div>
+                            <div class="usa-modal__footer">
+                                <ul class="usa-button-group">
+                                    <li class="usa-button-group__item">
+                                        <button
+                                            type="button"
+                                            class="usa-button padding-105 text-center"
+                                            data-close-modal
+                                        >
+                                        Add contact information
+                                        </button>
+                                    </li>     
+                                </ul>
+                            </div>
+                        </div>
+                        <button
+                            type="button"
+                            class="usa-button usa-modal__close"
+                            aria-label="Close this window"
+                            data-close-modal
+                        >
+                            <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
+                                <use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
+                            </svg>
+                        </button>
                     </div>
                 </div>
-                <button
-                    type="button"
-                    class="usa-button usa-modal__close"
-                    aria-label="Close this window"
-                    data-close-modal
-                >
-                    <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
-                        <use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
-                    </svg>
-                </button>
-            </div>
+            {% endif %}
+
+        
+
+        {% endblock content %}
+
+        {% block content_bottom %}
+        {% include "includes/profile_form.html" with form=form %}
         </div>
-    {% endif %}
-
-   
-
-{% endblock content %}
-
-{% block content_bottom %}
-  {% include "includes/profile_form.html" with form=form %}
-  </div>
+    </div>
 </main>
 {% endblock content_bottom %}
 

src/registrar/templatetags/custom_filters.py

@@ -290,3 +290,9 @@ def get_dict_value(dictionary, key):
     if isinstance(dictionary, dict):
         return dictionary.get(key, "")
     return ""
+
+
+@register.filter
+def button_class(custom_class):
+    default_class = "usa-button"
+    return f"{default_class} {custom_class}" if custom_class else default_class

src/registrar/views/domain.py

@@ -805,15 +805,6 @@ class DomainDNSSECView(DomainFormBaseView):
         context = super().get_context_data(**kwargs)
 
         has_dnssec_records = self.object.dnssecdata is not None
-
-        # Create HTML for the modal button
-        modal_button = (
-            '<button type="submit" '
-            'class="usa-button usa-button--secondary" '
-            'name="disable_dnssec">Confirm</button>'
-        )
-
-        context["modal_button"] = modal_button
         context["has_dnssec_records"] = has_dnssec_records
         context["dnssec_enabled"] = self.request.session.pop("dnssec_enabled", False)
 
@@ -906,15 +897,6 @@ class DomainDsDataView(DomainFormBaseView):
             # to preserve the context["form"]
             context = super().get_context_data(form=formset)
             context["trigger_modal"] = True
-            # Create HTML for the modal button
-            modal_button = (
-                '<button type="submit" '
-                'class="usa-button usa-button--secondary" '
-                'name="disable-override-click">Remove all DS data</button>'
-            )
-
-            # context to back out of a broken form on all fields delete
-            context["modal_button"] = modal_button
             return self.render_to_response(context)
 
         if formset.is_valid() or override:
@@ -1050,9 +1032,6 @@ class DomainUsersView(DomainBaseView):
         # Add conditionals to the context (such as "can_delete_users")
         context = self._add_booleans_to_context(context)
 
-        # Add modal buttons to the context (such as for delete)
-        context = self._add_modal_buttons_to_context(context)
-
         # Get portfolio from session (if set)
         portfolio = self.request.session.get("portfolio")
 
@@ -1149,26 +1128,6 @@ class DomainUsersView(DomainBaseView):
         context["can_delete_users"] = can_delete_users
         return context
 
-    def _add_modal_buttons_to_context(self, context):
-        """Adds modal buttons (and their HTML) to the context"""
-        # Create HTML for the modal button
-        modal_button = (
-            '<button type="submit" '
-            'class="usa-button usa-button--secondary" '
-            'name="delete_domain_manager">Yes, remove domain manager</button>'
-        )
-        context["modal_button"] = modal_button
-
-        # Create HTML for the modal button when deleting yourself
-        modal_button_self = (
-            '<button type="submit" '
-            'class="usa-button usa-button--secondary" '
-            'name="delete_domain_manager_self">Yes, remove myself</button>'
-        )
-        context["modal_button_self"] = modal_button_self
-
-        return context
-
 
 class DomainAddUserView(DomainFormBaseView):
     """Inside of a domain's user management, a form for adding users.

src/registrar/views/domain_request.py

@@ -448,34 +448,21 @@ class DomainRequestWizard(DomainRequestWizardPermissionView, TemplateView):
         non_org_steps_complete = DomainRequest._form_complete(self.domain_request, self.request)
         org_steps_complete = len(self.db_check_for_unlocking_steps()) == len(self.steps)
         if (not self.is_portfolio and non_org_steps_complete) or (self.is_portfolio and org_steps_complete):
-            modal_button = '<button type="submit" ' 'class="usa-button" ' ">Submit request</button>"
             context = {
-                "not_form": False,
                 "form_titles": self.titles,
                 "steps": self.steps,
                 "visited": self.storage.get("step_history", []),
                 "is_federal": self.domain_request.is_federal(),
-                "modal_button": modal_button,
-                "modal_heading": "You are about to submit a domain request for ",
-                "domain_name_modal": str(self.domain_request.requested_domain),
-                "modal_description": "Once you submit this request, you won’t be able to edit it until we review it.\
-                You’ll only be able to withdraw your request.",
                 "review_form_is_complete": True,
                 "user": self.request.user,
                 "requested_domain__name": requested_domain_name,
             }
         else:  # form is not complete
-            modal_button = '<button type="button" class="usa-button" data-close-modal>Return to request</button>'
             context = {
-                "not_form": True,
                 "form_titles": self.titles,
                 "steps": self.steps,
                 "visited": self.storage.get("step_history", []),
                 "is_federal": self.domain_request.is_federal(),
-                "modal_button": modal_button,
-                "modal_heading": "Your request form is incomplete",
-                "modal_description": 'This request cannot be submitted yet.\
-                Return to the request and visit the steps that are marked as "incomplete."',
                 "review_form_is_complete": False,
                 "user": self.request.user,
                 "requested_domain__name": requested_domain_name,

src/registrar/views/domain_requests_json.py

@@ -109,6 +109,10 @@ def apply_sorting(queryset, request):
     sort_by = request.GET.get("sort_by", "id")  # Default to 'id'
     order = request.GET.get("order", "asc")  # Default to 'asc'
 
+    # Handle special case for 'creator'
+    if sort_by == "creator":
+        sort_by = "creator__email"
+
     if order == "desc":
         sort_by = f"-{sort_by}"
     return queryset.order_by(sort_by)