From 7542b9a4f2e1d7d6e07b643e3a8cbf094204b1d4 Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Wed, 11 Dec 2024 20:25:37 -0700
Subject: [PATCH 01/42] Made widescreen global for headers and banners

---
 src/registrar/templates/base.html                             | 2 +-
 src/registrar/templates/includes/banner-error.html            | 2 +-
 src/registrar/templates/includes/banner-info.html             | 2 +-
 .../templates/includes/banner-non-production-alert.html       | 2 +-
 .../templates/includes/banner-service-disruption.html         | 2 +-
 src/registrar/templates/includes/banner-site-alert.html       | 2 +-
 src/registrar/templates/includes/banner-system-outage.html    | 2 +-
 src/registrar/templates/includes/banner-warning.html          | 2 +-
 src/registrar/templates/includes/header_basic.html            | 2 +-
 src/registrar/templates/includes/header_extended.html         | 4 ++--
 10 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/registrar/templates/base.html b/src/registrar/templates/base.html
index de257f52c..5cee7ec01 100644
--- a/src/registrar/templates/base.html
+++ b/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">
           <div class="grid-col-auto">
             <img class="usa-banner__header-flag" src="{% static 'img/us_flag_small.png' %}" alt="U.S. flag" />
           </div>
diff --git a/src/registrar/templates/includes/banner-error.html b/src/registrar/templates/includes/banner-error.html
index 7b5c32ed1..10582e268 100644
--- a/src/registrar/templates/includes/banner-error.html
+++ b/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>
diff --git a/src/registrar/templates/includes/banner-info.html b/src/registrar/templates/includes/banner-info.html
index e5d54e483..cf379c50d 100644
--- a/src/registrar/templates/includes/banner-info.html
+++ b/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>
diff --git a/src/registrar/templates/includes/banner-non-production-alert.html b/src/registrar/templates/includes/banner-non-production-alert.html
index 61d4eed51..7b66d543b 100644
--- a/src/registrar/templates/includes/banner-non-production-alert.html
+++ b/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>
diff --git a/src/registrar/templates/includes/banner-service-disruption.html b/src/registrar/templates/includes/banner-service-disruption.html
index fc89ee65d..6ee4b976b 100644
--- a/src/registrar/templates/includes/banner-service-disruption.html
+++ b/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>
diff --git a/src/registrar/templates/includes/banner-site-alert.html b/src/registrar/templates/includes/banner-site-alert.html
index 52256f46b..8dd657267 100644
--- a/src/registrar/templates/includes/banner-site-alert.html
+++ b/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>
diff --git a/src/registrar/templates/includes/banner-system-outage.html b/src/registrar/templates/includes/banner-system-outage.html
index 911fa4487..60fc4eb03 100644
--- a/src/registrar/templates/includes/banner-system-outage.html
+++ b/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>
diff --git a/src/registrar/templates/includes/banner-warning.html b/src/registrar/templates/includes/banner-warning.html
index 6838aef7b..762d0b47c 100644
--- a/src/registrar/templates/includes/banner-warning.html
+++ b/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>
diff --git a/src/registrar/templates/includes/header_basic.html b/src/registrar/templates/includes/header_basic.html
index 3f8b4a2fb..f44461a3d 100644
--- a/src/registrar/templates/includes/header_basic.html
+++ b/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">
     <div class="usa-navbar">
         {% include "includes/gov_extended_logo.html" with logo_clickable=logo_clickable %}
       <button type="button" class="usa-menu-btn">Menu</button>
diff --git a/src/registrar/templates/includes/header_extended.html b/src/registrar/templates/includes/header_extended.html
index 831b8b958..14e2cb573 100644
--- a/src/registrar/templates/includes/header_extended.html
+++ b/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">
         {% 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">
         <button type="button" class="usa-nav__close">
             <img src="{%static 'img/usa-icons/close.svg'%}" role="img" alt="Close" />
         </button>

From 37ecbffe10642ad856366b5883b9792cc953b12c Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Wed, 11 Dec 2024 20:29:24 -0700
Subject: [PATCH 02/42] Specify widescreen margins

---
 src/registrar/assets/src/sass/_theme/_alerts.scss     |  2 ++
 src/registrar/assets/src/sass/_theme/_base.scss       | 11 +++++++++++
 src/registrar/assets/src/sass/_theme/_containers.scss |  2 ++
 src/registrar/assets/src/sass/_theme/_header.scss     |  2 ++
 4 files changed, 17 insertions(+)

diff --git a/src/registrar/assets/src/sass/_theme/_alerts.scss b/src/registrar/assets/src/sass/_theme/_alerts.scss
index 9579cc057..c0264533e 100644
--- a/src/registrar/assets/src/sass/_theme/_alerts.scss
+++ b/src/registrar/assets/src/sass/_theme/_alerts.scss
@@ -29,6 +29,8 @@
 // NOTE: !important is used because _font.scss overrides this
 .usa-alert__body--widescreen {
   max-width: $widescreen-max-width !important;
+  margin-left: $widescreen-left-margin !important;
+  margin-right: $widescreen-right-margin !important;
 }
 
 .usa-site-alert--hot-pink {
diff --git a/src/registrar/assets/src/sass/_theme/_base.scss b/src/registrar/assets/src/sass/_theme/_base.scss
index 8d475270b..9cf49f86d 100644
--- a/src/registrar/assets/src/sass/_theme/_base.scss
+++ b/src/registrar/assets/src/sass/_theme/_base.scss
@@ -2,6 +2,9 @@
 @use "cisa_colors" as *;
 
 $widescreen-max-width: 1920px;
+$widescreen-left-margin: 48px;
+$widescreen-right-margin: 48px;
+
 $hot-pink: #FFC3F9;
 
 /* Styles for making visible to screen reader / AT users only. */
@@ -245,6 +248,14 @@ abbr[title] {
 
 .usa-banner__inner--widescreen  {
   max-width: $widescreen-max-width;
+  margin-left: $widescreen-left-margin !important;
+  margin-right: $widescreen-right-margin !important;
+}
+
+// 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
+.margin-left--widescreen {
+  margin-left: $widescreen-left-margin !important;
 }
 
 .margin-right-neg-4px {
diff --git a/src/registrar/assets/src/sass/_theme/_containers.scss b/src/registrar/assets/src/sass/_theme/_containers.scss
index 7473615ad..53f54b0d5 100644
--- a/src/registrar/assets/src/sass/_theme/_containers.scss
+++ b/src/registrar/assets/src/sass/_theme/_containers.scss
@@ -5,4 +5,6 @@
 .grid-container--widescreen,
 .usa-identifier__container--widescreen {
     max-width: $widescreen-max-width !important;
+    margin-left: $widescreen-left-margin !important;
+    margin-right: $widescreen-right-margin !important;
 }
diff --git a/src/registrar/assets/src/sass/_theme/_header.scss b/src/registrar/assets/src/sass/_theme/_header.scss
index 53eab90d8..f21f953eb 100644
--- a/src/registrar/assets/src/sass/_theme/_header.scss
+++ b/src/registrar/assets/src/sass/_theme/_header.scss
@@ -133,4 +133,6 @@
 .usa-navbar--widescreen,
 .usa-nav-container--widescreen  {
     max-width: $widescreen-max-width !important;
+    margin-left: $widescreen-left-margin;
+    margin-right: $widescreen-right-margin;
 }

From c32b5579136a49688a6d2fbf7487ca08d8e1350f Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Wed, 11 Dec 2024 20:31:04 -0700
Subject: [PATCH 03/42] update footer to match header widescreen logic

---
 src/registrar/templates/includes/footer.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/registrar/templates/includes/footer.html b/src/registrar/templates/includes/footer.html
index c8d237821..aa729f6d7 100644
--- a/src/registrar/templates/includes/footer.html
+++ b/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="
@@ -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">
         <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">
         <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">
         <div class="usa-identifier__usagov-description">
           Looking for U.S. government information and services?
         </div>

From 80aedf5844c5d976d79d5487f6063379d5bf2bdd Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Thu, 12 Dec 2024 13:17:00 -0700
Subject: [PATCH 04/42] normalize top margins for domain request pages

---
 src/registrar/templates/base.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/registrar/templates/base.html b/src/registrar/templates/base.html
index 5cee7ec01..46f8b4cb5 100644
--- a/src/registrar/templates/base.html
+++ b/src/registrar/templates/base.html
@@ -159,7 +159,7 @@
 
   {% block wrapper %}
   {% block wrapperdiv %}
-  <div id="wrapper">
+  <div id="wrapper" class="wrapper--padding-top-6">
   {% endblock wrapperdiv %}
     {% block messages %}
     {% if messages %}

From 5e50d9bc71972bff181cd6d20a64142e19933de1 Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Thu, 12 Dec 2024 15:49:42 -0700
Subject: [PATCH 05/42] Refactored to utilize padding classes

---
 src/registrar/assets/src/sass/_theme/_alerts.scss   |  9 +++++----
 src/registrar/assets/src/sass/_theme/_base.scss     | 13 +++++++------
 .../assets/src/sass/_theme/_containers.scss         |  2 --
 src/registrar/assets/src/sass/_theme/_header.scss   |  2 --
 src/registrar/templates/base.html                   |  2 +-
 src/registrar/templates/includes/footer.html        |  8 ++++----
 src/registrar/templates/includes/header_basic.html  |  2 +-
 .../templates/includes/header_extended.html         |  4 ++--
 8 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/src/registrar/assets/src/sass/_theme/_alerts.scss b/src/registrar/assets/src/sass/_theme/_alerts.scss
index c0264533e..a634e6b21 100644
--- a/src/registrar/assets/src/sass/_theme/_alerts.scss
+++ b/src/registrar/assets/src/sass/_theme/_alerts.scss
@@ -27,10 +27,11 @@
 }
 
 // NOTE: !important is used because _font.scss overrides this
-.usa-alert__body--widescreen {
-  max-width: $widescreen-max-width !important;
-  margin-left: $widescreen-left-margin !important;
-  margin-right: $widescreen-right-margin !important;
+@media (min-width: 64em) {
+  .usa-alert__body--widescreen {
+    max-width: $widescreen-max-width !important;
+    margin-left: 1rem !important;
+  }
 }
 
 .usa-site-alert--hot-pink {
diff --git a/src/registrar/assets/src/sass/_theme/_base.scss b/src/registrar/assets/src/sass/_theme/_base.scss
index 9cf49f86d..d16c30437 100644
--- a/src/registrar/assets/src/sass/_theme/_base.scss
+++ b/src/registrar/assets/src/sass/_theme/_base.scss
@@ -2,8 +2,8 @@
 @use "cisa_colors" as *;
 
 $widescreen-max-width: 1920px;
-$widescreen-left-margin: 48px;
-$widescreen-right-margin: 48px;
+$widescreen-left-padding: 48px;
+$widescreen-right-padding: 48px;
 
 $hot-pink: #FFC3F9;
 
@@ -248,14 +248,15 @@ abbr[title] {
 
 .usa-banner__inner--widescreen  {
   max-width: $widescreen-max-width;
-  margin-left: $widescreen-left-margin !important;
-  margin-right: $widescreen-right-margin !important;
 }
 
 // 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
-.margin-left--widescreen {
-  margin-left: $widescreen-left-margin !important;
+.padding-left--widescreen {
+  padding-left: $widescreen-left-padding !important;
+}
+.padding-right--widescreen {
+  padding-left: $widescreen-right-padding !important;
 }
 
 .margin-right-neg-4px {
diff --git a/src/registrar/assets/src/sass/_theme/_containers.scss b/src/registrar/assets/src/sass/_theme/_containers.scss
index 53f54b0d5..7473615ad 100644
--- a/src/registrar/assets/src/sass/_theme/_containers.scss
+++ b/src/registrar/assets/src/sass/_theme/_containers.scss
@@ -5,6 +5,4 @@
 .grid-container--widescreen,
 .usa-identifier__container--widescreen {
     max-width: $widescreen-max-width !important;
-    margin-left: $widescreen-left-margin !important;
-    margin-right: $widescreen-right-margin !important;
 }
diff --git a/src/registrar/assets/src/sass/_theme/_header.scss b/src/registrar/assets/src/sass/_theme/_header.scss
index f21f953eb..53eab90d8 100644
--- a/src/registrar/assets/src/sass/_theme/_header.scss
+++ b/src/registrar/assets/src/sass/_theme/_header.scss
@@ -133,6 +133,4 @@
 .usa-navbar--widescreen,
 .usa-nav-container--widescreen  {
     max-width: $widescreen-max-width !important;
-    margin-left: $widescreen-left-margin;
-    margin-right: $widescreen-right-margin;
 }
diff --git a/src/registrar/templates/base.html b/src/registrar/templates/base.html
index 46f8b4cb5..e0cea6e2b 100644
--- a/src/registrar/templates/base.html
+++ b/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 usa-banner__inner--widescreen">
+        <div class="usa-banner__inner usa-banner__inner--widescreen desktop:padding-right-6 desktop:padding-left-6">
           <div class="grid-col-auto">
             <img class="usa-banner__header-flag" src="{% static 'img/us_flag_small.png' %}" alt="U.S. flag" />
           </div>
diff --git a/src/registrar/templates/includes/footer.html b/src/registrar/templates/includes/footer.html
index aa729f6d7..95b25ba66 100644
--- a/src/registrar/templates/includes/footer.html
+++ b/src/registrar/templates/includes/footer.html
@@ -3,7 +3,7 @@
 
 <footer class="usa-footer">
     <div class="usa-footer__secondary-section">
-      <div class="grid-container grid-container--widescreen">
+      <div class="grid-container grid-container--widescreen desktop:padding-right-6 desktop:padding-left-6">
         <div class="grid-row grid-gap">
           <div
             class="
@@ -51,7 +51,7 @@
       class="usa-identifier__section usa-identifier__section--masthead"
       aria-label="Agency identifier"
     >
-      <div class="usa-identifier__container usa-identifier__container--widescreen">
+      <div class="usa-identifier__container usa-identifier__container--widescreen desktop:padding-right-6 desktop:padding-left-6">
         <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 usa-identifier__container--widescreen">
+      <div class="usa-identifier__container usa-identifier__container--widescreen desktop:padding-right-6 desktop:padding-left-6">
         <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 usa-identifier__container--widescreen">
+      <div class="usa-identifier__container usa-identifier__container--widescreen desktop:padding-right-6 desktop:padding-left-6">
         <div class="usa-identifier__usagov-description">
           Looking for U.S. government information and services?
         </div>
diff --git a/src/registrar/templates/includes/header_basic.html b/src/registrar/templates/includes/header_basic.html
index f44461a3d..bf34c13c3 100644
--- a/src/registrar/templates/includes/header_basic.html
+++ b/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 usa-nav-container--widescreen">
+  <div class="usa-nav-container usa-nav-container--widescreen desktop:padding-right-6 desktop:padding-left-6">
     <div class="usa-navbar">
         {% include "includes/gov_extended_logo.html" with logo_clickable=logo_clickable %}
       <button type="button" class="usa-menu-btn">Menu</button>
diff --git a/src/registrar/templates/includes/header_extended.html b/src/registrar/templates/includes/header_extended.html
index 14e2cb573..69e050725 100644
--- a/src/registrar/templates/includes/header_extended.html
+++ b/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 usa-navbar--widescreen">
+    <div class="usa-navbar usa-navbar--widescreen desktop:padding-right-6 desktop:padding-left-6">
         {% 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 usa-nav__inner--widescreen">
+    <div class="usa-nav__inner usa-nav__inner--widescreen desktop:padding-right-6 desktop:padding-left-6">
         <button type="button" class="usa-nav__close">
             <img src="{%static 'img/usa-icons/close.svg'%}" role="img" alt="Close" />
         </button>

From 2ebca48d999bbdc545cfc1520fd7f913ba69b749 Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Thu, 12 Dec 2024 15:49:53 -0700
Subject: [PATCH 06/42] Corrective adjustments

---
 .../assets/src/sass/_theme/_alerts.scss       | 48 +++++++++++--------
 .../assets/src/sass/_theme/_containers.scss   |  9 ++++
 2 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/src/registrar/assets/src/sass/_theme/_alerts.scss b/src/registrar/assets/src/sass/_theme/_alerts.scss
index a634e6b21..8c9a1f8c5 100644
--- a/src/registrar/assets/src/sass/_theme/_alerts.scss
+++ b/src/registrar/assets/src/sass/_theme/_alerts.scss
@@ -1,39 +1,46 @@
 @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
+-----------------*/
+// NOTE: !important is used because _font.scss overrides this
+@media (min-width: 64em) {
+  .usa-alert__body--widescreen {
+    max-width: $widescreen-max-width !important;
+  }
 }
 
 // The icon was off center for some reason
 // Fixes that issue
 @media (min-width: 64em){
-  .usa-alert--warning{
-    .usa-alert__body::before {
-      left: 1rem !important;
-    }
+  .usa-alert__body::before {
+    left: 2.5rem !important;
   }
-  .usa-alert__body.margin-left-1 {
-    margin-left: 0.5rem!important;
+  .usa-alert__body {
+    padding-left: 5rem!important;
   }
 }
 
-// NOTE: !important is used because _font.scss overrides this
-@media (min-width: 64em) {
-  .usa-alert__body--widescreen {
-    max-width: $widescreen-max-width !important;
-    margin-left: 1rem !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: units(3);
   }
 }
 
+.usa-alert__text.measure-none {
+  max-width: measure(none);
+}
+
+/*----------------
+  Alert Coloring
+-----------------*/
 .usa-site-alert--hot-pink {
   .usa-alert {
     background-color: $hot-pink;
@@ -50,3 +57,4 @@
     background-color: color('base-darkest');
   }
 }
+
diff --git a/src/registrar/assets/src/sass/_theme/_containers.scss b/src/registrar/assets/src/sass/_theme/_containers.scss
index 7473615ad..7e63dae8e 100644
--- a/src/registrar/assets/src/sass/_theme/_containers.scss
+++ b/src/registrar/assets/src/sass/_theme/_containers.scss
@@ -6,3 +6,12 @@
 .usa-identifier__container--widescreen {
     max-width: $widescreen-max-width !important;
 }
+
+
+// NOTE: !important is used because _font.scss overrides this
+@media (min-width: 64em) {
+    .usa-footer__secondary-section .grid-container--widescreen {
+      padding-left: $widescreen-left-padding !important;
+      padding-right: $widescreen-right-padding !important;
+    }
+}

From d7152507a88f6af892e10b1cedda24ae931a9b60 Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Thu, 12 Dec 2024 15:50:04 -0700
Subject: [PATCH 07/42] left-align domain request form

---
 src/registrar/templates/domain_request_form.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/registrar/templates/domain_request_form.html b/src/registrar/templates/domain_request_form.html
index a076220cb..b35acd242 100644
--- a/src/registrar/templates/domain_request_form.html
+++ b/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-container grid-container--widescreen">
   <div class="grid-row grid-gap">
     <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 %}

From fd8c3c31f4e15930847d965e686c9b178a35fafc Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Thu, 12 Dec 2024 22:13:31 -0700
Subject: [PATCH 08/42] fixed left padding for domain request pages

---
 src/registrar/templates/domain_request_form.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/registrar/templates/domain_request_form.html b/src/registrar/templates/domain_request_form.html
index b35acd242..64e541c59 100644
--- a/src/registrar/templates/domain_request_form.html
+++ b/src/registrar/templates/domain_request_form.html
@@ -3,7 +3,7 @@
 
 {% block title %}{{form_titles|get_item:steps.current}} | Request a .gov | {% endblock %}
 {% block content %}
-<div class="grid-container grid-container--widescreen">
+<div class="grid-container grid-container--widescreen desktop:padding-left-6">
   <div class="grid-row grid-gap">
     <div class="tablet:grid-col-3">
       {% include 'domain_request_sidebar.html' %}

From 5504308766cca39ddf2b6ee9b500563f796ee5e4 Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Mon, 16 Dec 2024 19:18:02 -0700
Subject: [PATCH 09/42] Fix navbar padding (it was getting overridden, so use
 !important)

---
 src/registrar/templates/includes/header_extended.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/registrar/templates/includes/header_extended.html b/src/registrar/templates/includes/header_extended.html
index 69e050725..5086a1ad3 100644
--- a/src/registrar/templates/includes/header_extended.html
+++ b/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 usa-navbar--widescreen desktop:padding-right-6 desktop:padding-left-6">
+    <div class="usa-navbar usa-navbar--widescreen padding-left--widescreen padding-right--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 usa-nav__inner--widescreen desktop:padding-right-6 desktop:padding-left-6">
+    <div class="usa-nav__inner usa-nav__inner--widescreen padding-left--widescreen padding-right--widescreen">
         <button type="button" class="usa-nav__close">
             <img src="{%static 'img/usa-icons/close.svg'%}" role="img" alt="Close" />
         </button>

From 6dbd183106938ef630f8849b6829ffd81f8fae6e Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Mon, 16 Dec 2024 19:51:29 -0700
Subject: [PATCH 10/42] Updates

---
 src/registrar/assets/src/sass/_theme/_base.scss | 4 ++++
 src/registrar/templates/domain_base.html        | 6 +++---
 src/registrar/templates/domain_detail.html      | 2 +-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/registrar/assets/src/sass/_theme/_base.scss b/src/registrar/assets/src/sass/_theme/_base.scss
index d16c30437..2e8de1957 100644
--- a/src/registrar/assets/src/sass/_theme/_base.scss
+++ b/src/registrar/assets/src/sass/_theme/_base.scss
@@ -272,4 +272,8 @@ abbr[title] {
   margin: 0;
   height: 1.5em;
   width: 1.5em;
+}
+
+.maxw-fit-content {
+  max-width: fit-content;
 }
\ No newline at end of file
diff --git a/src/registrar/templates/domain_base.html b/src/registrar/templates/domain_base.html
index 9f7e8d2e6..4f14928e1 100644
--- a/src/registrar/templates/domain_base.html
+++ b/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 desktop:padding-left-6">
 
   <div class="grid-row grid-gap">
-    <div class="tablet:grid-col-3">
+    <div class="tablet:grid-col-3 maxw-fit-content">
       <p class="font-body-md margin-top-0 margin-bottom-2
                 text-primary-darker text-semibold domain-name-wrap"
       >
@@ -20,7 +20,7 @@
     </div>
 
     <div class="tablet:grid-col-9">
-      <main id="main-content" class="grid-container">
+      <main id="main-content">
       {% if not domain.domain_info %}
         <div class="usa-alert usa-alert--error margin-bottom-2">
           <div class="usa-alert__body">
diff --git a/src/registrar/templates/domain_detail.html b/src/registrar/templates/domain_detail.html
index add7ca725..2c1108c0c 100644
--- a/src/registrar/templates/domain_detail.html
+++ b/src/registrar/templates/domain_detail.html
@@ -20,7 +20,7 @@
   {% endblock breadcrumb %}
 
   {{ block.super }}
-  <div class="margin-top-4 tablet:grid-col-10">
+  <div class="margin-top-4 tablet:grid-col-10 maxw-fit-content">
     <h2 class="text-bold text-primary-dark domain-name-wrap">{{ domain.name }}</h2>
     <div
         class="usa-summary-box dotgov-status-box padding-bottom-0 margin-top-3 padding-left-2{% if not domain.is_expired %}{% if domain.state == domain.State.UNKNOWN or domain.state == domain.State.DNS_NEEDED %} dotgov-status-box--action-need{% endif %}{% endif %}"

From 7b97894e7cd1af80c10e9147fa6bef1af494e4fd Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Mon, 16 Dec 2024 20:02:59 -0700
Subject: [PATCH 11/42] left-justify profile pages

---
 src/registrar/templates/profile.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/registrar/templates/profile.html b/src/registrar/templates/profile.html
index 7d365d9c1..e87e53896 100644
--- a/src/registrar/templates/profile.html
+++ b/src/registrar/templates/profile.html
@@ -11,8 +11,8 @@
 {% 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 tablet:padding-left-6">
+  <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">

From e41444fc721d48a61c78f3747935efee695b6510 Mon Sep 17 00:00:00 2001
From: matthewswspence <Matthewswspence@gmail.com>
Date: Wed, 18 Dec 2024 13:06:30 -0600
Subject: [PATCH 12/42] add errors to domain add user form

---
 src/registrar/templates/domain_add_user.html | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/registrar/templates/domain_add_user.html b/src/registrar/templates/domain_add_user.html
index 1429127e6..b09f1f814 100644
--- a/src/registrar/templates/domain_add_user.html
+++ b/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>

From d84c120f8aaeede642c989d67ed4d1612cf5a73a Mon Sep 17 00:00:00 2001
From: matthewswspence <Matthewswspence@gmail.com>
Date: Wed, 18 Dec 2024 13:16:46 -0600
Subject: [PATCH 13/42] remove duplicate sentence from senior official page

---
 src/registrar/templates/includes/senior_official.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/registrar/templates/includes/senior_official.html b/src/registrar/templates/includes/senior_official.html
index 0302bc71f..19b443fcd 100644
--- a/src/registrar/templates/includes/senior_official.html
+++ b/src/registrar/templates/includes/senior_official.html
@@ -26,7 +26,6 @@ <h1>Senior official</h1>
     </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 %}

From f9e28871f406a801ebddf49aa5e387d5198c6982 Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Wed, 18 Dec 2024 16:53:25 -0700
Subject: [PATCH 14/42] Fix spacing (code housekeeping)

---
 src/registrar/templates/401.html            | 2 +-
 src/registrar/templates/403.html            | 2 +-
 src/registrar/templates/404.html            | 2 +-
 src/registrar/templates/500.html            | 2 +-
 src/registrar/templates/home.html           | 2 +-
 src/registrar/templates/portfolio_base.html | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/registrar/templates/401.html b/src/registrar/templates/401.html
index d7c7f83ae..20ca0420e 100644
--- a/src/registrar/templates/401.html
+++ b/src/registrar/templates/401.html
@@ -5,7 +5,7 @@
 {% block title %}{% translate "Unauthorized | " %}{% 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 {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
   <div class="grid-row grow-gap"> 
     <div class="tablet:grid-col-6 usa-prose margin-bottom-3">
       <h1>
diff --git a/src/registrar/templates/403.html b/src/registrar/templates/403.html
index 999d5f98e..ef910a191 100644
--- a/src/registrar/templates/403.html
+++ b/src/registrar/templates/403.html
@@ -5,7 +5,7 @@
 {% block title %}{% translate "Forbidden | " %}{% 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 {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
   <div class="grid-row grow-gap"> 
     <div class="tablet:grid-col-6 usa-prose margin-bottom-3">
       <h1>
diff --git a/src/registrar/templates/404.html b/src/registrar/templates/404.html
index 471575558..024c2803b 100644
--- a/src/registrar/templates/404.html
+++ b/src/registrar/templates/404.html
@@ -5,7 +5,7 @@
 {% block title %}{% translate "Page not found | " %}{% 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 {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
   <div class="grid-row grid-gap">
     <div class="tablet:grid-col-6 usa-prose margin-bottom-3">
       <h1>
diff --git a/src/registrar/templates/500.html b/src/registrar/templates/500.html
index a0663816b..95c17e069 100644
--- a/src/registrar/templates/500.html
+++ b/src/registrar/templates/500.html
@@ -5,7 +5,7 @@
 {% block title %}{% translate "Server error | " %}{% 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 {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
   <div class="grid-row grid-gap">
     <div class="tablet:grid-col-6 usa-prose margin-bottom-3">
       <h1>
diff --git a/src/registrar/templates/home.html b/src/registrar/templates/home.html
index b1c3775df..b00c57b5c 100644
--- a/src/registrar/templates/home.html
+++ b/src/registrar/templates/home.html
@@ -5,7 +5,7 @@
 {% 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 {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
 {% if user.is_authenticated %}
 {# the entire logged in page goes here #}
 
diff --git a/src/registrar/templates/portfolio_base.html b/src/registrar/templates/portfolio_base.html
index c2a60b7ba..1963d7cca 100644
--- a/src/registrar/templates/portfolio_base.html
+++ b/src/registrar/templates/portfolio_base.html
@@ -4,7 +4,7 @@
   <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 {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
             {% if user.is_authenticated %}
             {# the entire logged in page goes here #}
             

From 55fbbb355b83cc2c7717caa849a551dea4ecd019 Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Wed, 18 Dec 2024 16:53:58 -0700
Subject: [PATCH 15/42] changed from desktop: to tablet:

---
 src/registrar/templates/includes/footer.html          | 8 ++++----
 src/registrar/templates/includes/header_basic.html    | 2 +-
 src/registrar/templates/includes/header_extended.html | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/registrar/templates/includes/footer.html b/src/registrar/templates/includes/footer.html
index 95b25ba66..5fa576ccc 100644
--- a/src/registrar/templates/includes/footer.html
+++ b/src/registrar/templates/includes/footer.html
@@ -3,7 +3,7 @@
 
 <footer class="usa-footer">
     <div class="usa-footer__secondary-section">
-      <div class="grid-container grid-container--widescreen desktop:padding-right-6 desktop:padding-left-6">
+      <div class="grid-container grid-container--widescreen tablet:padding-left--widescreen tablet:padding-right--widescreen">
         <div class="grid-row grid-gap">
           <div
             class="
@@ -51,7 +51,7 @@
       class="usa-identifier__section usa-identifier__section--masthead"
       aria-label="Agency identifier"
     >
-      <div class="usa-identifier__container usa-identifier__container--widescreen desktop:padding-right-6 desktop:padding-left-6">
+      <div class="usa-identifier__container usa-identifier__container--widescreen tablet:padding-left--widescreen tablet:padding-right--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 usa-identifier__container--widescreen desktop:padding-right-6 desktop:padding-left-6">
+      <div class="usa-identifier__container usa-identifier__container--widescreen tablet:padding-left--widescreen tablet:padding-right--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 usa-identifier__container--widescreen desktop:padding-right-6 desktop:padding-left-6">
+      <div class="usa-identifier__container usa-identifier__container--widescreen tablet:padding-left--widescreen tablet:padding-right--widescreen">
         <div class="usa-identifier__usagov-description">
           Looking for U.S. government information and services?
         </div>
diff --git a/src/registrar/templates/includes/header_basic.html b/src/registrar/templates/includes/header_basic.html
index bf34c13c3..431f0131c 100644
--- a/src/registrar/templates/includes/header_basic.html
+++ b/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 usa-nav-container--widescreen desktop:padding-right-6 desktop:padding-left-6">
+  <div class="usa-nav-container usa-nav-container--widescreen tablet:padding-left--widescreen tablet:padding-right--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>
diff --git a/src/registrar/templates/includes/header_extended.html b/src/registrar/templates/includes/header_extended.html
index 5086a1ad3..4706cfa23 100644
--- a/src/registrar/templates/includes/header_extended.html
+++ b/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 usa-navbar--widescreen padding-left--widescreen padding-right--widescreen">
+    <div class="usa-navbar usa-navbar--widescreen tablet:padding-left--widescreen tablet:padding-right--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 usa-nav__inner--widescreen padding-left--widescreen padding-right--widescreen">
+    <div class="usa-nav__inner usa-nav__inner--widescreen tablet:padding-left--widescreen tablet:padding-right--widescreen">
         <button type="button" class="usa-nav__close">
             <img src="{%static 'img/usa-icons/close.svg'%}" role="img" alt="Close" />
         </button>

From 79bc7102e190e0470bf56755c90a25732242b203 Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Wed, 18 Dec 2024 16:59:26 -0700
Subject: [PATCH 16/42] desktop: to tablet: and replace padding class with
 custom widescreen class to accommodate custom padding specs

---
 src/registrar/templates/base.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/registrar/templates/base.html b/src/registrar/templates/base.html
index e0cea6e2b..1af42e8db 100644
--- a/src/registrar/templates/base.html
+++ b/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 usa-banner__inner--widescreen desktop:padding-right-6 desktop:padding-left-6">
+        <div class="usa-banner__inner usa-banner__inner--widescreen tablet:padding-left--widescreen tablet:padding-right--widescreen">
           <div class="grid-col-auto">
             <img class="usa-banner__header-flag" src="{% static 'img/us_flag_small.png' %}" alt="U.S. flag" />
           </div>

From 7e4d8e34adf42cb9d44cbe0ad59cbe40c19bac3a Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Wed, 18 Dec 2024 22:29:06 -0700
Subject: [PATCH 17/42] Full cleanup / refactor

---
 .../assets/src/sass/_theme/_alerts.scss       |  18 +-
 .../assets/src/sass/_theme/_base.scss         |  16 +-
 .../assets/src/sass/_theme/_containers.scss   |  10 +-
 .../assets/src/sass/_theme/_header.scss       |   4 +-
 src/registrar/config/settings.py              |   1 +
 src/registrar/context_processors.py           |  51 +++++-
 src/registrar/templates/401.html              |   2 +-
 src/registrar/templates/403.html              |   2 +-
 src/registrar/templates/404.html              |   2 +-
 src/registrar/templates/500.html              |   2 +-
 src/registrar/templates/base.html             |   2 +-
 src/registrar/templates/domain_base.html      |   6 +-
 .../templates/domain_request_form.html        |   4 +-
 .../templates/includes/banner-error.html      |   2 +-
 .../templates/includes/banner-info.html       |   2 +-
 .../includes/banner-non-production-alert.html |   2 +-
 .../includes/banner-service-disruption.html   |   2 +-
 .../templates/includes/banner-site-alert.html |   2 +-
 .../includes/banner-system-outage.html        |   2 +-
 .../templates/includes/banner-warning.html    |   2 +-
 src/registrar/templates/includes/footer.html  |   8 +-
 .../templates/includes/header_basic.html      |   2 +-
 .../templates/includes/header_extended.html   |   4 +-
 src/registrar/templates/portfolio_base.html   |  23 +--
 .../templates/portfolio_members.html          |   2 +-
 src/registrar/templates/profile.html          | 156 +++++++++---------
 26 files changed, 197 insertions(+), 132 deletions(-)

diff --git a/src/registrar/assets/src/sass/_theme/_alerts.scss b/src/registrar/assets/src/sass/_theme/_alerts.scss
index 8c9a1f8c5..41bead00e 100644
--- a/src/registrar/assets/src/sass/_theme/_alerts.scss
+++ b/src/registrar/assets/src/sass/_theme/_alerts.scss
@@ -12,14 +12,24 @@
   }
 }
 
+
 // The icon was off center for some reason
 // Fixes that issue
 @media (min-width: 64em){
-  .usa-alert__body::before {
-    left: 2.5rem !important;
+  .usa-alert--warning{
+    .usa-alert__body::before {
+      left: 1rem !important;
+    }
+  }
+  .usa-alert__body.margin-left-1 {
+    margin-left: 0.5rem!important;
   }
-  .usa-alert__body {
-    padding-left: 5rem!important;
+
+  .usa-alert__body--widescreen::before {
+    left: 4rem !important;
+  }
+  .usa-alert__body--widescreen {
+    padding-left: 7rem!important;
   }
 }
 
diff --git a/src/registrar/assets/src/sass/_theme/_base.scss b/src/registrar/assets/src/sass/_theme/_base.scss
index 2e8de1957..1a5ffe907 100644
--- a/src/registrar/assets/src/sass/_theme/_base.scss
+++ b/src/registrar/assets/src/sass/_theme/_base.scss
@@ -2,8 +2,8 @@
 @use "cisa_colors" as *;
 
 $widescreen-max-width: 1920px;
-$widescreen-left-padding: 48px;
-$widescreen-right-padding: 48px;
+$widescreen-left-padding: 4.5rem;
+$widescreen-right-padding: 4.5rem;
 
 $hot-pink: #FFC3F9;
 
@@ -252,11 +252,13 @@ abbr[title] {
 
 // 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
-.padding-left--widescreen {
-  padding-left: $widescreen-left-padding !important;
-}
-.padding-right--widescreen {
-  padding-left: $widescreen-right-padding !important;
+@media (min-width: 64em) {
+  .padding-left--widescreen {
+    padding-left: $widescreen-left-padding !important;
+  }
+  .padding-right--widescreen {
+    padding-right: $widescreen-right-padding !important;
+  }
 }
 
 .margin-right-neg-4px {
diff --git a/src/registrar/assets/src/sass/_theme/_containers.scss b/src/registrar/assets/src/sass/_theme/_containers.scss
index 7e63dae8e..740c0f998 100644
--- a/src/registrar/assets/src/sass/_theme/_containers.scss
+++ b/src/registrar/assets/src/sass/_theme/_containers.scss
@@ -10,8 +10,16 @@
 
 // NOTE: !important is used because _font.scss overrides this
 @media (min-width: 64em) {
-    .usa-footer__secondary-section .grid-container--widescreen {
+    .grid-container--widescreen {
       padding-left: $widescreen-left-padding !important;
       padding-right: $widescreen-right-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_left_justified is used in the html).
+.max-width--grid-container {
+  max-width: 64rem;
+}
\ No newline at end of file
diff --git a/src/registrar/assets/src/sass/_theme/_header.scss b/src/registrar/assets/src/sass/_theme/_header.scss
index 53eab90d8..573413d4e 100644
--- a/src/registrar/assets/src/sass/_theme/_header.scss
+++ b/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-right-padding;
             color: color('white');
             bottom: 4.3rem;
             .usa-nav-link,
diff --git a/src/registrar/config/settings.py b/src/registrar/config/settings.py
index 050950c9b..a3c55126d 100644
--- a/src/registrar/config/settings.py
+++ b/src/registrar/config/settings.py
@@ -252,6 +252,7 @@
                 "registrar.context_processors.add_path_to_context",
                 "registrar.context_processors.portfolio_permissions",
                 "registrar.context_processors.is_widescreen_mode",
+                "registrar.context_processors.is_widescreen_left_justified"
             ],
         },
     },
diff --git a/src/registrar/context_processors.py b/src/registrar/context_processors.py
index 9f5d0162f..047cfcfa5 100644
--- a/src/registrar/context_processors.py
+++ b/src/registrar/context_processors.py
@@ -99,30 +99,69 @@ def portfolio_permissions(request):
 
 
 def is_widescreen_mode(request):
-    widescreen_paths = []  # If this list is meant to include specific paths, populate it.
+    widescreen_paths = [
+        "/domain-request/",
+        ]  # If this list is meant to include specific paths, populate it.
     portfolio_widescreen_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",
+        "/admin/"
     ]
 
     # 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_widescreen = ( 
+        any(path in request.path for path in widescreen_paths)
+        or request.path == "/" )
 
     # 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)
     )
 
+    is_excluded = any(exclude_path in request.path for exclude_path in exclude_paths)
+
+    # Return a dictionary with the widescreen mode status.
+    return {"is_widescreen_mode": (is_widescreen or is_portfolio_widescreen or get_is_widescreen_left_justified(request)) and not is_excluded}
+
+def get_is_widescreen_left_justified(request):
+    include_paths = [
+        "/user-profile",
+        "/request/",
+        "/domain/",
+        ]
+    portfolio_include_paths = [
+        "/organization/",
+        "/senior-official/",
+        "/member/",
+        "/members/new-member",
+    ]
+    exclude_paths = [
+    ]
+
+    is_excluded = 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_left_justified = any(path in request.path for path in include_paths)
+
+    # Check if the user is an organization user and the path matches portfolio_only paths.
+    is_portfolio_widescreen_left_justified = (
+        hasattr(request.user, "is_org_user")
+        and request.user.is_org_user(request)
+        and any(path in request.path for path in portfolio_include_paths)
+    )
+
+    return (is_widescreen_left_justified or is_portfolio_widescreen_left_justified) and not is_excluded
+
+def is_widescreen_left_justified(request):
+    
     # Return a dictionary with the widescreen mode status.
-    return {"is_widescreen_mode": is_widescreen or is_portfolio_widescreen}
+    return {"is_widescreen_left_justified": get_is_widescreen_left_justified(request)}
\ No newline at end of file
diff --git a/src/registrar/templates/401.html b/src/registrar/templates/401.html
index 20ca0420e..23e40f649 100644
--- a/src/registrar/templates/401.html
+++ b/src/registrar/templates/401.html
@@ -6,7 +6,7 @@
 
 {% block content %}
 <main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
-  <div class="grid-row grow-gap"> 
+  <div class="grid-row grow-gap {% if is_widescreen_left_justified %} 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" %}
diff --git a/src/registrar/templates/403.html b/src/registrar/templates/403.html
index ef910a191..524e51c94 100644
--- a/src/registrar/templates/403.html
+++ b/src/registrar/templates/403.html
@@ -6,7 +6,7 @@
 
 {% block content %}
 <main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
-  <div class="grid-row grow-gap"> 
+  <div class="grid-row grow-gap {% if is_widescreen_left_justified %} 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." %}
diff --git a/src/registrar/templates/404.html b/src/registrar/templates/404.html
index 024c2803b..bd8604a3a 100644
--- a/src/registrar/templates/404.html
+++ b/src/registrar/templates/404.html
@@ -6,7 +6,7 @@
 
 {% block content %}
 <main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
-  <div class="grid-row grid-gap">
+  <div class="grid-row grid-gap {% if is_widescreen_left_justified %} max-width--grid-container {% endif %}">
     <div class="tablet:grid-col-6 usa-prose margin-bottom-3">
       <h1>
         {% translate "We couldn’t find that page" %}
diff --git a/src/registrar/templates/500.html b/src/registrar/templates/500.html
index 95c17e069..465e3a637 100644
--- a/src/registrar/templates/500.html
+++ b/src/registrar/templates/500.html
@@ -6,7 +6,7 @@
 
 {% block content %}
 <main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
-  <div class="grid-row grid-gap">
+  <div class="grid-row grid-gap {% if is_widescreen_left_justified %} max-width--grid-container {% endif %}">
     <div class="tablet:grid-col-6 usa-prose margin-bottom-3">
       <h1>
         {% translate "We're having some trouble." %}
diff --git a/src/registrar/templates/base.html b/src/registrar/templates/base.html
index 1af42e8db..18e8c0e78 100644
--- a/src/registrar/templates/base.html
+++ b/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 usa-banner__inner--widescreen tablet:padding-left--widescreen tablet:padding-right--widescreen">
+        <div class="usa-banner__inner usa-banner__inner--widescreen padding-left--widescreen padding-right--widescreen">
           <div class="grid-col-auto">
             <img class="usa-banner__header-flag" src="{% static 'img/us_flag_small.png' %}" alt="U.S. flag" />
           </div>
diff --git a/src/registrar/templates/domain_base.html b/src/registrar/templates/domain_base.html
index 4f14928e1..3769bf08f 100644
--- a/src/registrar/templates/domain_base.html
+++ b/src/registrar/templates/domain_base.html
@@ -4,10 +4,10 @@
 {% block title %}{{ domain.name }} | {% endblock %}
 
 {% block content %}
-<div class="grid-container grid-container--widescreen desktop:padding-left-6">
+<div class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
 
-  <div class="grid-row grid-gap">
-    <div class="tablet:grid-col-3 maxw-fit-content">
+  <div class="grid-row grid-gap {% if is_widescreen_left_justified %} 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"
       >
diff --git a/src/registrar/templates/domain_request_form.html b/src/registrar/templates/domain_request_form.html
index 64e541c59..aa01d2a15 100644
--- a/src/registrar/templates/domain_request_form.html
+++ b/src/registrar/templates/domain_request_form.html
@@ -3,8 +3,8 @@
 
 {% block title %}{{form_titles|get_item:steps.current}} | Request a .gov | {% endblock %}
 {% block content %}
-<div class="grid-container grid-container--widescreen desktop:padding-left-6">
-  <div class="grid-row grid-gap">
+<div class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
+  <div class="grid-row grid-gap {% if is_widescreen_left_justified %} max-width--grid-container {% endif %}">
     <div class="tablet:grid-col-3">
       {% include 'domain_request_sidebar.html' %}
     </div>
diff --git a/src/registrar/templates/includes/banner-error.html b/src/registrar/templates/includes/banner-error.html
index 10582e268..00aaee219 100644
--- a/src/registrar/templates/includes/banner-error.html
+++ b/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 usa-alert__body--widescreen">
+      <div class="usa-alert__body {% if is_widescreen_mode %} usa-alert__body--widescreen {% endif %}">
         <h4 class="usa-alert__heading">
           Header
         </h4>
diff --git a/src/registrar/templates/includes/banner-info.html b/src/registrar/templates/includes/banner-info.html
index cf379c50d..494aa40e7 100644
--- a/src/registrar/templates/includes/banner-info.html
+++ b/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 usa-alert__body--widescreen">
+      <div class="usa-alert__body {% if is_widescreen_mode %} usa-alert__body--widescreen {% endif %}">
         <h4 class="usa-alert__heading">
           Header
         </h4>
diff --git a/src/registrar/templates/includes/banner-non-production-alert.html b/src/registrar/templates/includes/banner-non-production-alert.html
index 7b66d543b..cbf7a0c13 100644
--- a/src/registrar/templates/includes/banner-non-production-alert.html
+++ b/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 %} usa-alert__body--widescreen">
+        <div class="usa-alert__body {% if add_body_class %}{{ add_body_class }}{% endif %} {% if is_widescreen_mode %} usa-alert__body--widescreen {% endif %}">
             <p class="usa-alert__text maxw-none">
                 <strong>Attention:</strong> You are on a test site.
             </p>
diff --git a/src/registrar/templates/includes/banner-service-disruption.html b/src/registrar/templates/includes/banner-service-disruption.html
index 6ee4b976b..022978144 100644
--- a/src/registrar/templates/includes/banner-service-disruption.html
+++ b/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 usa-alert__body--widescreen">
+      <div class="usa-alert__body {% if is_widescreen_mode %} usa-alert__body--widescreen {% endif %}">
         <h3 class="usa-alert__heading">
             Service disruption
         </h3>
diff --git a/src/registrar/templates/includes/banner-site-alert.html b/src/registrar/templates/includes/banner-site-alert.html
index 8dd657267..d3854b034 100644
--- a/src/registrar/templates/includes/banner-site-alert.html
+++ b/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 usa-alert__body--widescreen">
+      <div class="usa-alert__body {% if is_widescreen_mode %} usa-alert__body--widescreen {% endif %}">
         <h3 class="usa-alert__heading">
             Header here
         </h3>
diff --git a/src/registrar/templates/includes/banner-system-outage.html b/src/registrar/templates/includes/banner-system-outage.html
index 60fc4eb03..7cb31bbf4 100644
--- a/src/registrar/templates/includes/banner-system-outage.html
+++ b/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 usa-alert__body--widescreen">
+      <div class="usa-alert__body {% if is_widescreen_mode %} usa-alert__body--widescreen {% endif %}">
         <h3 class="usa-alert__heading">
             System outage
         </h3>
diff --git a/src/registrar/templates/includes/banner-warning.html b/src/registrar/templates/includes/banner-warning.html
index 762d0b47c..ae1b01138 100644
--- a/src/registrar/templates/includes/banner-warning.html
+++ b/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 usa-alert__body--widescreen">
+      <div class="usa-alert__body {% if is_widescreen_mode %} usa-alert__body--widescreen {% endif %}">
         <h4 class="usa-alert__heading">
           Header
         </h4>
diff --git a/src/registrar/templates/includes/footer.html b/src/registrar/templates/includes/footer.html
index 5fa576ccc..b948bd49b 100644
--- a/src/registrar/templates/includes/footer.html
+++ b/src/registrar/templates/includes/footer.html
@@ -3,7 +3,7 @@
 
 <footer class="usa-footer">
     <div class="usa-footer__secondary-section">
-      <div class="grid-container grid-container--widescreen tablet:padding-left--widescreen tablet:padding-right--widescreen">
+      <div class="grid-container grid-container--widescreen">
         <div class="grid-row grid-gap">
           <div
             class="
@@ -51,7 +51,7 @@
       class="usa-identifier__section usa-identifier__section--masthead"
       aria-label="Agency identifier"
     >
-      <div class="usa-identifier__container usa-identifier__container--widescreen tablet:padding-left--widescreen tablet:padding-right--widescreen">
+      <div class="usa-identifier__container usa-identifier__container--widescreen padding-left--widescreen padding-right--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 usa-identifier__container--widescreen tablet:padding-left--widescreen tablet:padding-right--widescreen">
+      <div class="usa-identifier__container usa-identifier__container--widescreen padding-left--widescreen padding-right--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 usa-identifier__container--widescreen tablet:padding-left--widescreen tablet:padding-right--widescreen">
+      <div class="usa-identifier__container usa-identifier__container--widescreen padding-left--widescreen padding-right--widescreen">
         <div class="usa-identifier__usagov-description">
           Looking for U.S. government information and services?
         </div>
diff --git a/src/registrar/templates/includes/header_basic.html b/src/registrar/templates/includes/header_basic.html
index 431f0131c..7d6196308 100644
--- a/src/registrar/templates/includes/header_basic.html
+++ b/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 usa-nav-container--widescreen tablet:padding-left--widescreen tablet:padding-right--widescreen">
+  <div class="usa-nav-container usa-nav-container--widescreen padding-left--widescreen padding-right--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>
diff --git a/src/registrar/templates/includes/header_extended.html b/src/registrar/templates/includes/header_extended.html
index 4706cfa23..5086a1ad3 100644
--- a/src/registrar/templates/includes/header_extended.html
+++ b/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 usa-navbar--widescreen tablet:padding-left--widescreen tablet:padding-right--widescreen">
+    <div class="usa-navbar usa-navbar--widescreen padding-left--widescreen padding-right--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 usa-nav__inner--widescreen tablet:padding-left--widescreen tablet:padding-right--widescreen">
+    <div class="usa-nav__inner usa-nav__inner--widescreen padding-left--widescreen padding-right--widescreen">
         <button type="button" class="usa-nav__close">
             <img src="{%static 'img/usa-icons/close.svg'%}" role="img" alt="Close" />
         </button>
diff --git a/src/registrar/templates/portfolio_base.html b/src/registrar/templates/portfolio_base.html
index 1963d7cca..c8d722ba6 100644
--- a/src/registrar/templates/portfolio_base.html
+++ b/src/registrar/templates/portfolio_base.html
@@ -8,22 +8,25 @@
             {% 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 is_widescreen_left_justified %} max-width--grid-container {% endif %}">
+              <div class="tablet:grid-col-11 desktop:grid-col-10 {% if not is_widescreen_left_justified %} 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%}
diff --git a/src/registrar/templates/portfolio_members.html b/src/registrar/templates/portfolio_members.html
index 332d1c16c..324645b61 100644
--- a/src/registrar/templates/portfolio_members.html
+++ b/src/registrar/templates/portfolio_members.html
@@ -12,7 +12,7 @@
 
 <div id="main-content">
   <div id="toggleable-alert" class="usa-alert usa-alert--slim margin-bottom-2 display-none">
-    <div class="usa-alert__body usa-alert__body--widescreen">
+    <div class="usa-alert__body {% if is_widescreen_mode %} usa-alert__body--widescreen {% endif %}">
       <p class="usa-alert__text ">
         <!-- alert message will be conditionally populated by javascript -->
       </p>
diff --git a/src/registrar/templates/profile.html b/src/registrar/templates/profile.html
index e87e53896..9426439b5 100644
--- a/src/registrar/templates/profile.html
+++ b/src/registrar/templates/profile.html
@@ -11,90 +11,92 @@
 {% endblock %}
 
 {% block content %}
-<main id="main-content" class="grid-container grid-container--widescreen tablet:padding-left-6">
-  <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 %}
+<main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
+    <div class="grid-row {% if is_widescreen_left_justified %} 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>
-        </div>
-    {% endif %}
+            {% endif %}
 
-   
+        
 
-{% endblock content %}
+        {% endblock content %}
 
-{% block content_bottom %}
-  {% include "includes/profile_form.html" with form=form %}
-  </div>
+        {% block content_bottom %}
+        {% include "includes/profile_form.html" with form=form %}
+        </div>
+    </div>
 </main>
 {% endblock content_bottom %}
 

From f8d7cfdb6a963e8562018f4a76075e17937f1953 Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Wed, 18 Dec 2024 23:33:21 -0700
Subject: [PATCH 18/42] linted

---
 src/registrar/config/settings.py    |  2 +-
 src/registrar/context_processors.py | 29 ++++++++++++++---------------
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/registrar/config/settings.py b/src/registrar/config/settings.py
index a3c55126d..f5d158ad3 100644
--- a/src/registrar/config/settings.py
+++ b/src/registrar/config/settings.py
@@ -252,7 +252,7 @@
                 "registrar.context_processors.add_path_to_context",
                 "registrar.context_processors.portfolio_permissions",
                 "registrar.context_processors.is_widescreen_mode",
-                "registrar.context_processors.is_widescreen_left_justified"
+                "registrar.context_processors.is_widescreen_left_justified",
             ],
         },
     },
diff --git a/src/registrar/context_processors.py b/src/registrar/context_processors.py
index 047cfcfa5..66ba90218 100644
--- a/src/registrar/context_processors.py
+++ b/src/registrar/context_processors.py
@@ -101,24 +101,19 @@ def portfolio_permissions(request):
 def is_widescreen_mode(request):
     widescreen_paths = [
         "/domain-request/",
-        ]  # If this list is meant to include specific paths, populate it.
+    ]  # If this list is meant to include specific paths, populate it.
     portfolio_widescreen_paths = [
         "/domains/",
         "/requests/",
         "/no-organization-requests/",
         "/no-organization-domains/",
-        "/members/"
+        "/members/",
     ]
     # widescreen_paths can be a bear as it trickles down sub-urls. exclude_paths gives us a way out.
-    exclude_paths = [
-        "/domains/edit",
-        "/admin/"
-    ]
+    exclude_paths = ["/domains/edit", "/admin/"]
 
     # 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_widescreen = any(path in request.path for path in widescreen_paths) or request.path == "/"
 
     # Check if the user is an organization user and the path matches portfolio paths.
     is_portfolio_widescreen = (
@@ -130,22 +125,25 @@ def is_widescreen_mode(request):
     is_excluded = any(exclude_path in request.path for exclude_path in exclude_paths)
 
     # Return a dictionary with the widescreen mode status.
-    return {"is_widescreen_mode": (is_widescreen or is_portfolio_widescreen or get_is_widescreen_left_justified(request)) and not is_excluded}
+    return {
+        "is_widescreen_mode": (is_widescreen or is_portfolio_widescreen or get_is_widescreen_left_justified(request))
+        and not is_excluded
+    }
+
 
 def get_is_widescreen_left_justified(request):
     include_paths = [
         "/user-profile",
         "/request/",
         "/domain/",
-        ]
+    ]
     portfolio_include_paths = [
         "/organization/",
         "/senior-official/",
         "/member/",
         "/members/new-member",
     ]
-    exclude_paths = [
-    ]
+    exclude_paths = []
 
     is_excluded = any(exclude_path in request.path for exclude_path in exclude_paths)
 
@@ -161,7 +159,8 @@ def get_is_widescreen_left_justified(request):
 
     return (is_widescreen_left_justified or is_portfolio_widescreen_left_justified) and not is_excluded
 
+
 def is_widescreen_left_justified(request):
-    
+
     # Return a dictionary with the widescreen mode status.
-    return {"is_widescreen_left_justified": get_is_widescreen_left_justified(request)}
\ No newline at end of file
+    return {"is_widescreen_left_justified": get_is_widescreen_left_justified(request)}

From fde44c246c7b4af727df8fad2e050734209eb885 Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Thu, 19 Dec 2024 21:47:48 -0700
Subject: [PATCH 19/42] Refactored to check for centered pages instead of
 left-justified pages.  Simplified global application of widescreen in context
 processor. Fixed unformatted pages.

---
 .../assets/src/sass/_theme/_containers.scss   |   2 +-
 src/registrar/config/settings.py              |   2 +-
 src/registrar/context_processors.py           |  60 +--
 src/registrar/templates/401.html              |   2 +-
 src/registrar/templates/403.html              |   2 +-
 src/registrar/templates/404.html              |   2 +-
 src/registrar/templates/500.html              |   2 +-
 src/registrar/templates/domain_base.html      |   2 +-
 .../templates/domain_request_form.html        |   2 +-
 .../templates/domain_request_intro.html       |  63 +--
 .../domain_request_withdraw_confirmation.html |  18 +-
 src/registrar/templates/home.html             |   2 +-
 .../domain_request_status_manage.html         | 424 +++++++++---------
 .../includes/request_status_manage.html       | 416 ++++++++---------
 src/registrar/templates/portfolio_base.html   |   4 +-
 src/registrar/templates/profile.html          |   2 +-
 16 files changed, 487 insertions(+), 518 deletions(-)

diff --git a/src/registrar/assets/src/sass/_theme/_containers.scss b/src/registrar/assets/src/sass/_theme/_containers.scss
index 740c0f998..02a338b5d 100644
--- a/src/registrar/assets/src/sass/_theme/_containers.scss
+++ b/src/registrar/assets/src/sass/_theme/_containers.scss
@@ -19,7 +19,7 @@
 // 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_left_justified is used in the html).
+// where is_widescreen_centered is used in the html).
 .max-width--grid-container {
   max-width: 64rem;
 }
\ No newline at end of file
diff --git a/src/registrar/config/settings.py b/src/registrar/config/settings.py
index f5d158ad3..8f8ad1530 100644
--- a/src/registrar/config/settings.py
+++ b/src/registrar/config/settings.py
@@ -252,7 +252,7 @@
                 "registrar.context_processors.add_path_to_context",
                 "registrar.context_processors.portfolio_permissions",
                 "registrar.context_processors.is_widescreen_mode",
-                "registrar.context_processors.is_widescreen_left_justified",
+                "registrar.context_processors.is_widescreen_centered",
             ],
         },
     },
diff --git a/src/registrar/context_processors.py b/src/registrar/context_processors.py
index 66ba90218..b30719cd0 100644
--- a/src/registrar/context_processors.py
+++ b/src/registrar/context_processors.py
@@ -99,68 +99,30 @@ def portfolio_permissions(request):
 
 
 def is_widescreen_mode(request):
-    widescreen_paths = [
-        "/domain-request/",
-    ]  # If this list is meant to include specific paths, populate it.
-    portfolio_widescreen_paths = [
-        "/domains/",
-        "/requests/",
-        "/no-organization-requests/",
-        "/no-organization-domains/",
-        "/members/",
-    ]
-    # widescreen_paths can be a bear as it trickles down sub-urls. exclude_paths gives us a way out.
-    exclude_paths = ["/domains/edit", "/admin/"]
-
-    # 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 == "/"
-
-    # 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)
-    )
+    exclude_paths = ["/admin/"]
 
+    # Widescreen is now global for all pages EXCEPT admin
     is_excluded = any(exclude_path in request.path for exclude_path in exclude_paths)
 
     # Return a dictionary with the widescreen mode status.
     return {
-        "is_widescreen_mode": (is_widescreen or is_portfolio_widescreen or get_is_widescreen_left_justified(request))
-        and not is_excluded
+        "is_widescreen_mode": not is_excluded
     }
 
-
-def get_is_widescreen_left_justified(request):
+def is_widescreen_centered(request):
     include_paths = [
-        "/user-profile",
-        "/request/",
-        "/domain/",
+        "/domains/",
+        "/requests/",
+        "/members/",
     ]
-    portfolio_include_paths = [
-        "/organization/",
-        "/senior-official/",
-        "/member/",
-        "/members/new-member",
+    exclude_paths = [
+        "/domains/edit",
     ]
-    exclude_paths = []
 
     is_excluded = 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_left_justified = any(path in request.path for path in include_paths)
-
-    # Check if the user is an organization user and the path matches portfolio_only paths.
-    is_portfolio_widescreen_left_justified = (
-        hasattr(request.user, "is_org_user")
-        and request.user.is_org_user(request)
-        and any(path in request.path for path in portfolio_include_paths)
-    )
-
-    return (is_widescreen_left_justified or is_portfolio_widescreen_left_justified) and not is_excluded
-
-
-def is_widescreen_left_justified(request):
+    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_left_justified": get_is_widescreen_left_justified(request)}
+    return {"is_widescreen_centered": is_widescreen_centered and not is_excluded}
diff --git a/src/registrar/templates/401.html b/src/registrar/templates/401.html
index 23e40f649..9ea4a5397 100644
--- a/src/registrar/templates/401.html
+++ b/src/registrar/templates/401.html
@@ -6,7 +6,7 @@
 
 {% block content %}
 <main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
-  <div class="grid-row grow-gap {% if is_widescreen_left_justified %} max-width--grid-container {% endif %}"> 
+  <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" %}
diff --git a/src/registrar/templates/403.html b/src/registrar/templates/403.html
index 524e51c94..9e37e29a8 100644
--- a/src/registrar/templates/403.html
+++ b/src/registrar/templates/403.html
@@ -6,7 +6,7 @@
 
 {% block content %}
 <main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
-  <div class="grid-row grow-gap {% if is_widescreen_left_justified %} max-width--grid-container {% endif %}"> 
+  <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." %}
diff --git a/src/registrar/templates/404.html b/src/registrar/templates/404.html
index bd8604a3a..11f2b982f 100644
--- a/src/registrar/templates/404.html
+++ b/src/registrar/templates/404.html
@@ -6,7 +6,7 @@
 
 {% block content %}
 <main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
-  <div class="grid-row grid-gap {% if is_widescreen_left_justified %} max-width--grid-container {% endif %}">
+  <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" %}
diff --git a/src/registrar/templates/500.html b/src/registrar/templates/500.html
index 465e3a637..f37b6f94f 100644
--- a/src/registrar/templates/500.html
+++ b/src/registrar/templates/500.html
@@ -6,7 +6,7 @@
 
 {% block content %}
 <main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
-  <div class="grid-row grid-gap {% if is_widescreen_left_justified %} max-width--grid-container {% endif %}">
+  <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." %}
diff --git a/src/registrar/templates/domain_base.html b/src/registrar/templates/domain_base.html
index 3769bf08f..5f22c60a7 100644
--- a/src/registrar/templates/domain_base.html
+++ b/src/registrar/templates/domain_base.html
@@ -6,7 +6,7 @@
 {% block content %}
 <div class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
 
-  <div class="grid-row grid-gap {% if is_widescreen_left_justified %} max-width--grid-container {% endif %}">
+  <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"
diff --git a/src/registrar/templates/domain_request_form.html b/src/registrar/templates/domain_request_form.html
index aa01d2a15..bcd20ccb8 100644
--- a/src/registrar/templates/domain_request_form.html
+++ b/src/registrar/templates/domain_request_form.html
@@ -4,7 +4,7 @@
 {% block title %}{{form_titles|get_item:steps.current}} | Request a .gov | {% endblock %}
 {% block content %}
 <div class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
-  <div class="grid-row grid-gap {% if is_widescreen_left_justified %} max-width--grid-container {% endif %}">
+  <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>
diff --git a/src/registrar/templates/domain_request_intro.html b/src/registrar/templates/domain_request_intro.html
index dd5b7ec6e..4f0103449 100644
--- a/src/registrar/templates/domain_request_intro.html
+++ b/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 {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
+    <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 %}
diff --git a/src/registrar/templates/domain_request_withdraw_confirmation.html b/src/registrar/templates/domain_request_withdraw_confirmation.html
index e1a5f0c2a..d8a4bb977 100644
--- a/src/registrar/templates/domain_request_withdraw_confirmation.html
+++ b/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 {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
+  <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 %}
diff --git a/src/registrar/templates/home.html b/src/registrar/templates/home.html
index b00c57b5c..d41e19cd5 100644
--- a/src/registrar/templates/home.html
+++ b/src/registrar/templates/home.html
@@ -10,7 +10,7 @@
 {# 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 %}
diff --git a/src/registrar/templates/includes/domain_request_status_manage.html b/src/registrar/templates/includes/domain_request_status_manage.html
index 2a254df4b..078d4e853 100644
--- a/src/registrar/templates/includes/domain_request_status_manage.html
+++ b/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 {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
+    <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" }}
+            {% 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">
+                {% 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>
-        </div>
-        </div>
-        <br>
-        {% endblock status_summary %}
-        
-        {% block status_metadata %}
-
-        {% if portfolio %}
-            {% if DomainRequest.creator %}
+            {% endwith %}
+            {% elif DomainRequest.status == statuses.SUBMITTED %}
             <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 }}
+                <b class="review__step__name">Submitted on:</b> {{last_submitted|default:first_submitted }}
             </p>
-            {% else %}
+            <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">No creator found:</b> this is an error, please email <a href="mailto:help@get.gov" class="usa-link">help@get.gov</a>.
+                <b class="review__step__name">Submitted on:</b> {{last_submitted|default:first_submitted }}
             </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">
-            {% 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>
-        {% 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>
+            <p class="margin-top-1">
+                <b class="review__step__name">Last updated on:</b> {{DomainRequest.updated_at|date:"F j, Y"}}
             </p>
-        {% endif %}
-        {% endblock modify_request %}
-    </div>
+            {% 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 %}
 
-    <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 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>
 
-        {% 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 %}
+        <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 %}
+            {% 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.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 %}
 
-            {% if DomainRequest.federally_recognized_tribe %}
-                <p>Federally-recognized tribe</p>
             {% endif %}
 
-            {% if DomainRequest.state_recognized_tribe %}
-                <p>State-recognized tribe</p>
+            {% 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 %}
 
-        {% 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.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.organization_name %}
+                {% include "includes/summary_item.html" with title='Organization' value=DomainRequest  address='true' 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%}
+            {% 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>
\ No newline at end of file
diff --git a/src/registrar/templates/includes/request_status_manage.html b/src/registrar/templates/includes/request_status_manage.html
index fc2fd8f12..760d9e607 100644
--- a/src/registrar/templates/includes/request_status_manage.html
+++ b/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 {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
+    <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>
-            {% 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>
+                {% url 'domain-requests' as url %}
             {% 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>
+                {% 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">
+                {% 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 %}
-        {% 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 %}
+            {% 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">
+                {% 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>
+            {% endwith %}
+            {% elif DomainRequest.status == statuses.SUBMITTED %}
             <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 }}
+                <b class="review__step__name">Submitted on:</b> {{last_submitted|default:first_submitted }}
             </p>
-            {% else %}
+            <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">No creator found:</b> this is an error, please email <a href="mailto:help@get.gov" class="usa-link">help@get.gov</a>.
+                <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 %}
-        {% endif %}
+            {% endwith %}
+            {% endblock status_metadata %}
 
-        {% 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">
-            {% 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>
-        {% 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 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>
+                </p>
+            {% endif %}
+            {% endblock modify_request %}
+        </div>
 
-        {% 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%}
 
-    <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 %}
+            {% 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.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.federally_recognized_tribe %}
+                        <p>Federally-recognized tribe</p>
+                    {% endif %}
 
-                {% if DomainRequest.state_recognized_tribe %}
-                    <p>State-recognized tribe</p>
-                {% endif %}
+                    {% if DomainRequest.state_recognized_tribe %}
+                        <p>State-recognized tribe</p>
+                    {% endif %}
 
-            {% 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.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.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.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.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.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.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.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.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.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.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 %}
+                {% 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%}
+                {# 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>
\ No newline at end of file
diff --git a/src/registrar/templates/portfolio_base.html b/src/registrar/templates/portfolio_base.html
index c8d722ba6..4e8670eb2 100644
--- a/src/registrar/templates/portfolio_base.html
+++ b/src/registrar/templates/portfolio_base.html
@@ -8,8 +8,8 @@
             {% if user.is_authenticated %}
             {# the entire logged in page goes here #}
             
-            <div class="grid-row {% if is_widescreen_left_justified %} max-width--grid-container {% endif %}">
-              <div class="tablet:grid-col-11 desktop:grid-col-10 {% if not is_widescreen_left_justified %} tablet:grid-offset-1 {% endif %}">
+            <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 %}
diff --git a/src/registrar/templates/profile.html b/src/registrar/templates/profile.html
index 9426439b5..cfd6d3c5f 100644
--- a/src/registrar/templates/profile.html
+++ b/src/registrar/templates/profile.html
@@ -12,7 +12,7 @@
 
 {% block content %}
 <main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
-    <div class="grid-row {% if is_widescreen_left_justified %} max-width--grid-container {% endif %}">
+    <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 %}

From 0ca3a1bfa944e10ae7fe9934aa173bb8556c55b2 Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Thu, 19 Dec 2024 21:56:46 -0700
Subject: [PATCH 20/42] strip out extra spaces in html css class if/else
 statements. Add member page is left-justified.

---
 src/registrar/context_processors.py                       | 1 +
 src/registrar/templates/401.html                          | 4 ++--
 src/registrar/templates/403.html                          | 4 ++--
 src/registrar/templates/404.html                          | 4 ++--
 src/registrar/templates/500.html                          | 4 ++--
 src/registrar/templates/admin/app_list.html               | 2 +-
 src/registrar/templates/admin/fieldset.html               | 2 +-
 src/registrar/templates/admin/transfer_user.html          | 2 +-
 src/registrar/templates/base.html                         | 2 +-
 src/registrar/templates/dashboard_base.html               | 2 +-
 .../templates/django/admin/includes/details_button.html   | 2 +-
 .../templates/django/admin/includes/domain_fieldset.html  | 2 +-
 .../django/admin/multiple_choice_list_filter.html         | 4 ++--
 src/registrar/templates/domain_base.html                  | 4 ++--
 src/registrar/templates/domain_request_form.html          | 4 ++--
 src/registrar/templates/domain_request_intro.html         | 6 +++---
 .../templates/domain_request_withdraw_confirmation.html   | 6 +++---
 src/registrar/templates/domain_sidebar.html               | 2 +-
 src/registrar/templates/home.html                         | 4 ++--
 src/registrar/templates/includes/banner-error.html        | 2 +-
 src/registrar/templates/includes/banner-info.html         | 2 +-
 .../templates/includes/banner-non-production-alert.html   | 2 +-
 .../templates/includes/banner-service-disruption.html     | 2 +-
 src/registrar/templates/includes/banner-site-alert.html   | 2 +-
 .../templates/includes/banner-system-outage.html          | 2 +-
 src/registrar/templates/includes/banner-warning.html      | 2 +-
 .../templates/includes/domain_request_status_manage.html  | 8 ++++----
 .../templates/includes/domain_requests_table.html         | 6 +++---
 src/registrar/templates/includes/domains_table.html       | 2 +-
 src/registrar/templates/includes/members_table.html       | 2 +-
 .../templates/includes/request_status_manage.html         | 8 ++++----
 src/registrar/templates/includes/required_fields.html     | 2 +-
 src/registrar/templates/portfolio_base.html               | 6 +++---
 src/registrar/templates/portfolio_members.html            | 2 +-
 src/registrar/templates/profile.html                      | 4 ++--
 35 files changed, 58 insertions(+), 57 deletions(-)

diff --git a/src/registrar/context_processors.py b/src/registrar/context_processors.py
index b30719cd0..2dbc30abf 100644
--- a/src/registrar/context_processors.py
+++ b/src/registrar/context_processors.py
@@ -117,6 +117,7 @@ def is_widescreen_centered(request):
     ]
     exclude_paths = [
         "/domains/edit",
+        "members/new-member/",
     ]
 
     is_excluded = any(exclude_path in request.path for exclude_path in exclude_paths)
diff --git a/src/registrar/templates/401.html b/src/registrar/templates/401.html
index 9ea4a5397..848d9901a 100644
--- a/src/registrar/templates/401.html
+++ b/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 {% if not is_widescreen_centered %} max-width--grid-container {% endif %}"> 
+<main id="main-content" class="grid-container {% if is_widescreen_mode %}grid-container--widescreen{% endif %}">
+  <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" %}
diff --git a/src/registrar/templates/403.html b/src/registrar/templates/403.html
index 9e37e29a8..5f0faa5a5 100644
--- a/src/registrar/templates/403.html
+++ b/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 {% if not is_widescreen_centered %} max-width--grid-container {% endif %}"> 
+<main id="main-content" class="grid-container {% if is_widescreen_mode %}grid-container--widescreen{% endif %}">
+  <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." %}
diff --git a/src/registrar/templates/404.html b/src/registrar/templates/404.html
index 11f2b982f..4747ae846 100644
--- a/src/registrar/templates/404.html
+++ b/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 {% if not is_widescreen_centered %} max-width--grid-container {% endif %}">
+<main id="main-content" class="grid-container {% if is_widescreen_mode %}grid-container--widescreen{% endif %}">
+  <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" %}
diff --git a/src/registrar/templates/500.html b/src/registrar/templates/500.html
index f37b6f94f..661bae9f9 100644
--- a/src/registrar/templates/500.html
+++ b/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 {% if not is_widescreen_centered %} max-width--grid-container {% endif %}">
+<main id="main-content" class="grid-container {% if is_widescreen_mode %}grid-container--widescreen{% endif %}">
+  <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." %}
diff --git a/src/registrar/templates/admin/app_list.html b/src/registrar/templates/admin/app_list.html
index 49fb59e79..aaf3dc423 100644
--- a/src/registrar/templates/admin/app_list.html
+++ b/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 %}
diff --git a/src/registrar/templates/admin/fieldset.html b/src/registrar/templates/admin/fieldset.html
index 40cd98ca8..20b76217b 100644
--- a/src/registrar/templates/admin/fieldset.html
+++ b/src/registrar/templates/admin/fieldset.html
@@ -61,7 +61,7 @@ <h2>{{ fieldset.name }}</h2>
                     {% 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 %}
diff --git a/src/registrar/templates/admin/transfer_user.html b/src/registrar/templates/admin/transfer_user.html
index 3ba136b93..61444b173 100644
--- a/src/registrar/templates/admin/transfer_user.html
+++ b/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 %}
diff --git a/src/registrar/templates/base.html b/src/registrar/templates/base.html
index 18e8c0e78..68c57f9d9 100644
--- a/src/registrar/templates/base.html
+++ b/src/registrar/templates/base.html
@@ -166,7 +166,7 @@
     <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 %}
diff --git a/src/registrar/templates/dashboard_base.html b/src/registrar/templates/dashboard_base.html
index 6dd2ce8fd..b5c2cf6a5 100644
--- a/src/registrar/templates/dashboard_base.html
+++ b/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 %}
diff --git a/src/registrar/templates/django/admin/includes/details_button.html b/src/registrar/templates/django/admin/includes/details_button.html
index 73748f170..65c6d768b 100644
--- a/src/registrar/templates/django/admin/includes/details_button.html
+++ b/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 %}
diff --git a/src/registrar/templates/django/admin/includes/domain_fieldset.html b/src/registrar/templates/django/admin/includes/domain_fieldset.html
index d5f5bc1af..c621deaac 100644
--- a/src/registrar/templates/django/admin/includes/domain_fieldset.html
+++ b/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 %}
diff --git a/src/registrar/templates/django/admin/multiple_choice_list_filter.html b/src/registrar/templates/django/admin/multiple_choice_list_filter.html
index 66643f4ec..167059594 100644
--- a/src/registrar/templates/django/admin/multiple_choice_list_filter.html
+++ b/src/registrar/templates/django/admin/multiple_choice_list_filter.html
@@ -6,14 +6,14 @@ <h3>{% blocktrans with filter_title=title %} By {{ filter_title }} {% endblocktr
 <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">
diff --git a/src/registrar/templates/domain_base.html b/src/registrar/templates/domain_base.html
index 5f22c60a7..b96be578f 100644
--- a/src/registrar/templates/domain_base.html
+++ b/src/registrar/templates/domain_base.html
@@ -4,9 +4,9 @@
 {% block title %}{{ domain.name }} | {% endblock %}
 
 {% block content %}
-<div class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
+<div class="grid-container {% if is_widescreen_mode %}grid-container--widescreen{% endif %}">
 
-  <div class="grid-row grid-gap {% if not is_widescreen_centered %} max-width--grid-container {% endif %}">
+  <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"
diff --git a/src/registrar/templates/domain_request_form.html b/src/registrar/templates/domain_request_form.html
index bcd20ccb8..732ce80f4 100644
--- a/src/registrar/templates/domain_request_form.html
+++ b/src/registrar/templates/domain_request_form.html
@@ -3,8 +3,8 @@
 
 {% block title %}{{form_titles|get_item:steps.current}} | Request a .gov | {% endblock %}
 {% block content %}
-<div class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
-  <div class="grid-row grid-gap {% if not is_widescreen_centered %} max-width--grid-container {% endif %}">
+<div class="grid-container {% if is_widescreen_mode %}grid-container--widescreen{% endif %}">
+  <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>
diff --git a/src/registrar/templates/domain_request_intro.html b/src/registrar/templates/domain_request_intro.html
index 4f0103449..eeaea9a01 100644
--- a/src/registrar/templates/domain_request_intro.html
+++ b/src/registrar/templates/domain_request_intro.html
@@ -4,9 +4,9 @@
 {% block title %} Start a request | {% endblock %}
 
 {% block content %}
-<main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
-    <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">
+<main id="main-content" class="grid-container {% if is_widescreen_mode %}grid-container--widescreen{% endif %}">
+    <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 %}
diff --git a/src/registrar/templates/domain_request_withdraw_confirmation.html b/src/registrar/templates/domain_request_withdraw_confirmation.html
index d8a4bb977..c88e0e48d 100644
--- a/src/registrar/templates/domain_request_withdraw_confirmation.html
+++ b/src/registrar/templates/domain_request_withdraw_confirmation.html
@@ -8,9 +8,9 @@
 {% endblock wrapperdiv %}
 
 {% block content %}
-<div class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
-  <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">
+<div class="grid-container {% if is_widescreen_mode %}grid-container--widescreen{% endif %}">
+  <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>
diff --git a/src/registrar/templates/domain_sidebar.html b/src/registrar/templates/domain_sidebar.html
index 289f544ce..99ca1bfb7 100644
--- a/src/registrar/templates/domain_sidebar.html
+++ b/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 %}
diff --git a/src/registrar/templates/home.html b/src/registrar/templates/home.html
index d41e19cd5..a8de5cc9b 100644
--- a/src/registrar/templates/home.html
+++ b/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 {% if is_widescreen_mode %}grid-container--widescreen{% endif %}">
 {% if user.is_authenticated %}
 {# the entire logged in page goes here #}
 
 {% block homepage_content %}
-  <div class="tablet:grid-col-11 desktop:grid-col-10 {% if is_widescreen_centered %} tablet:grid-offset-1 {% 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 %}
diff --git a/src/registrar/templates/includes/banner-error.html b/src/registrar/templates/includes/banner-error.html
index 00aaee219..7b5c32ed1 100644
--- a/src/registrar/templates/includes/banner-error.html
+++ b/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 {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
         <h4 class="usa-alert__heading">
           Header
         </h4>
diff --git a/src/registrar/templates/includes/banner-info.html b/src/registrar/templates/includes/banner-info.html
index 494aa40e7..e5d54e483 100644
--- a/src/registrar/templates/includes/banner-info.html
+++ b/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 {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
         <h4 class="usa-alert__heading">
           Header
         </h4>
diff --git a/src/registrar/templates/includes/banner-non-production-alert.html b/src/registrar/templates/includes/banner-non-production-alert.html
index cbf7a0c13..61d4eed51 100644
--- a/src/registrar/templates/includes/banner-non-production-alert.html
+++ b/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 %} {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
             <p class="usa-alert__text maxw-none">
                 <strong>Attention:</strong> You are on a test site.
             </p>
diff --git a/src/registrar/templates/includes/banner-service-disruption.html b/src/registrar/templates/includes/banner-service-disruption.html
index 022978144..fc89ee65d 100644
--- a/src/registrar/templates/includes/banner-service-disruption.html
+++ b/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 {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
         <h3 class="usa-alert__heading">
             Service disruption
         </h3>
diff --git a/src/registrar/templates/includes/banner-site-alert.html b/src/registrar/templates/includes/banner-site-alert.html
index d3854b034..52256f46b 100644
--- a/src/registrar/templates/includes/banner-site-alert.html
+++ b/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 {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
         <h3 class="usa-alert__heading">
             Header here
         </h3>
diff --git a/src/registrar/templates/includes/banner-system-outage.html b/src/registrar/templates/includes/banner-system-outage.html
index 7cb31bbf4..911fa4487 100644
--- a/src/registrar/templates/includes/banner-system-outage.html
+++ b/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 {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
         <h3 class="usa-alert__heading">
             System outage
         </h3>
diff --git a/src/registrar/templates/includes/banner-warning.html b/src/registrar/templates/includes/banner-warning.html
index ae1b01138..6838aef7b 100644
--- a/src/registrar/templates/includes/banner-warning.html
+++ b/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 {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
         <h4 class="usa-alert__heading">
           Header
         </h4>
diff --git a/src/registrar/templates/includes/domain_request_status_manage.html b/src/registrar/templates/includes/domain_request_status_manage.html
index 078d4e853..d9164f148 100644
--- a/src/registrar/templates/includes/domain_request_status_manage.html
+++ b/src/registrar/templates/includes/domain_request_status_manage.html
@@ -1,8 +1,8 @@
 {% load custom_filters %}
 {% load static url_helpers %}
-<main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
-    <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">
+<main id="main-content" class="grid-container {% if is_widescreen_mode %}grid-container--widescreen{% endif %}">
+    <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 %}
                 {% url 'domain-requests' as url %}
@@ -140,7 +140,7 @@ <h1>Domain request for {{ DomainRequest.requested_domain.name }}</h1>
             {% endblock modify_request %}
         </div>
 
-        <div class="grid-col {% if is_widescreen_centered %} desktop:grid-offset-2 maxw-tablet{% 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%}
diff --git a/src/registrar/templates/includes/domain_requests_table.html b/src/registrar/templates/includes/domain_requests_table.html
index 8a919e795..4f72e8ced 100644
--- a/src/registrar/templates/includes/domain_requests_table.html
+++ b/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 @@ <h2 id="domain-requests-header" class="display-inline-block">Domain requests</h2
         <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 {% if portfolio %}mobile:grid-col-12 desktop:grid-col-6{% endif %} {% if is_widescreen_mode %}section-outlined__search--widescreen{% 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 %}
diff --git a/src/registrar/templates/includes/domains_table.html b/src/registrar/templates/includes/domains_table.html
index 42b4a186d..bce6f4083 100644
--- a/src/registrar/templates/includes/domains_table.html
+++ b/src/registrar/templates/includes/domains_table.html
@@ -13,7 +13,7 @@ <h2 id="domains-header" class="display-inline-block">Domains</h2>
       <!-- 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 {% if portfolio %} mobile:grid-col-12 desktop:grid-col-6{% endif %} {% if is_widescreen_mode %}section-outlined__search--widescreen{% endif %}">
       <section aria-label="Domains search component" class="margin-top-2">
         <form class="usa-search usa-search--small" method="POST" role="search">
           {% csrf_token %}
diff --git a/src/registrar/templates/includes/members_table.html b/src/registrar/templates/includes/members_table.html
index d141dbaa6..9e6a0965b 100644
--- a/src/registrar/templates/includes/members_table.html
+++ b/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 {% if is_widescreen_mode %}section-outlined__search--widescreen{% endif %}">
         <section aria-label="Members search component" class="margin-top-2">
           <form class="usa-search usa-search--small" method="POST" role="search">
             {% csrf_token %}
diff --git a/src/registrar/templates/includes/request_status_manage.html b/src/registrar/templates/includes/request_status_manage.html
index 760d9e607..94714f2a4 100644
--- a/src/registrar/templates/includes/request_status_manage.html
+++ b/src/registrar/templates/includes/request_status_manage.html
@@ -1,8 +1,8 @@
 {% load custom_filters %}
 {% load static url_helpers %}
-<main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
-    <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 %}">
+<main id="main-content" class="grid-container {% if is_widescreen_mode %}grid-container--widescreen{% endif %}">
+    <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 %}
                 {% url 'domain-requests' as url %}
@@ -140,7 +140,7 @@ <h1>Domain request for {{ DomainRequest.requested_domain.name }}</h1>
             {% endblock modify_request %}
         </div>
 
-        <div class="grid-col {% if is_widescreen_centered %} desktop:grid-offset-2 maxw-tablet{% 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%}
diff --git a/src/registrar/templates/includes/required_fields.html b/src/registrar/templates/includes/required_fields.html
index be0395979..a9d860f24 100644
--- a/src/registrar/templates/includes/required_fields.html
+++ b/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>
diff --git a/src/registrar/templates/portfolio_base.html b/src/registrar/templates/portfolio_base.html
index 4e8670eb2..083e27533 100644
--- a/src/registrar/templates/portfolio_base.html
+++ b/src/registrar/templates/portfolio_base.html
@@ -4,12 +4,12 @@
   <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 {% if is_widescreen_mode %}grid-container--widescreen{% endif %}">
             {% if user.is_authenticated %}
             {# the entire logged in page goes here #}
             
-            <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 %}">
+            <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 %}
diff --git a/src/registrar/templates/portfolio_members.html b/src/registrar/templates/portfolio_members.html
index 324645b61..d6cc4df7c 100644
--- a/src/registrar/templates/portfolio_members.html
+++ b/src/registrar/templates/portfolio_members.html
@@ -12,7 +12,7 @@
 
 <div id="main-content">
   <div id="toggleable-alert" class="usa-alert usa-alert--slim margin-bottom-2 display-none">
-    <div class="usa-alert__body {% if is_widescreen_mode %} usa-alert__body--widescreen {% endif %}">
+    <div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
       <p class="usa-alert__text ">
         <!-- alert message will be conditionally populated by javascript -->
       </p>
diff --git a/src/registrar/templates/profile.html b/src/registrar/templates/profile.html
index cfd6d3c5f..0be9aca8f 100644
--- a/src/registrar/templates/profile.html
+++ b/src/registrar/templates/profile.html
@@ -11,8 +11,8 @@
 {% endblock %}
 
 {% block content %}
-<main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
-    <div class="grid-row {% if not is_widescreen_centered %} max-width--grid-container {% endif %}">
+<main id="main-content" class="grid-container {% if is_widescreen_mode %}grid-container--widescreen{% endif %}">
+    <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 %}

From 7a491aa25114427765c6519de2738692d58e528d Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Thu, 19 Dec 2024 21:58:03 -0700
Subject: [PATCH 21/42] linted

---
 src/registrar/context_processors.py | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/registrar/context_processors.py b/src/registrar/context_processors.py
index 2dbc30abf..deebc739b 100644
--- a/src/registrar/context_processors.py
+++ b/src/registrar/context_processors.py
@@ -105,9 +105,8 @@ def is_widescreen_mode(request):
     is_excluded = any(exclude_path in request.path for exclude_path in exclude_paths)
 
     # Return a dictionary with the widescreen mode status.
-    return {
-        "is_widescreen_mode": not is_excluded
-    }
+    return {"is_widescreen_mode": not is_excluded}
+
 
 def is_widescreen_centered(request):
     include_paths = [
@@ -123,7 +122,7 @@ def is_widescreen_centered(request):
     is_excluded = 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=="/"
+    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_centered": is_widescreen_centered and not is_excluded}

From 1b813cabf8e7bbb5d75e59abd6161394683e3b69 Mon Sep 17 00:00:00 2001
From: David Kennedy <david.kennedy@associates.cisa.dhs.gov>
Date: Mon, 23 Dec 2024 09:16:24 -0500
Subject: [PATCH 22/42] table sort on icon only

---
 src/registrar/assets/src/js/getgov/table-base.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/registrar/assets/src/js/getgov/table-base.js b/src/registrar/assets/src/js/getgov/table-base.js
index e526c6b5f..e9830ca0e 100644
--- a/src/registrar/assets/src/js/getgov/table-base.js
+++ b/src/registrar/assets/src/js/getgov/table-base.js
@@ -495,8 +495,10 @@ export class BaseTable {
   // Add event listeners to table headers for sorting
   initializeTableHeaders() {
     this.tableHeaders.forEach(header => {
-      header.addEventListener('click', () => {
-        const sortBy = header.getAttribute('data-sortable');
+      const sortBy = header.getAttribute('data-sortable');
+      // add event listener to respond to clicks on the button
+      let button = header.querySelector('.usa-table__header__button')
+      button.addEventListener('click', () => {
         let order = 'asc';
         // sort order will be ascending, unless the currently sorted column is ascending, and the user
         // is selecting the same column to sort in descending order

From f817dbdf18c2d2aceb148a310373ad6e98638c96 Mon Sep 17 00:00:00 2001
From: David Kennedy <david.kennedy@associates.cisa.dhs.gov>
Date: Mon, 23 Dec 2024 09:32:58 -0500
Subject: [PATCH 23/42] simulate button click outside button

---
 src/registrar/assets/src/js/getgov/table-base.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/registrar/assets/src/js/getgov/table-base.js b/src/registrar/assets/src/js/getgov/table-base.js
index e9830ca0e..8f47ca53a 100644
--- a/src/registrar/assets/src/js/getgov/table-base.js
+++ b/src/registrar/assets/src/js/getgov/table-base.js
@@ -495,10 +495,12 @@ export class BaseTable {
   // Add event listeners to table headers for sorting
   initializeTableHeaders() {
     this.tableHeaders.forEach(header => {
-      const sortBy = header.getAttribute('data-sortable');
+      
       // add event listener to respond to clicks on the button
-      let button = header.querySelector('.usa-table__header__button')
-      button.addEventListener('click', () => {
+      
+      header.addEventListener('click', function(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
         // is selecting the same column to sort in descending order
@@ -507,6 +509,11 @@ export class BaseTable {
         }
         // load the results with the updated sort
         this.loadTable(1, sortBy, order);
+        // Check if the click occurred outside the button
+        if (!button.contains(event.target)) {
+            // Simulate a button click
+            button.click();
+        }
       });
     });
   }

From ebe8aa7f782bc56882e6da8902280177a6392559 Mon Sep 17 00:00:00 2001
From: David Kennedy <david.kennedy@associates.cisa.dhs.gov>
Date: Mon, 23 Dec 2024 09:41:14 -0500
Subject: [PATCH 24/42] header click updates button

---
 src/registrar/assets/src/js/getgov/table-base.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/registrar/assets/src/js/getgov/table-base.js b/src/registrar/assets/src/js/getgov/table-base.js
index 8f47ca53a..97c256734 100644
--- a/src/registrar/assets/src/js/getgov/table-base.js
+++ b/src/registrar/assets/src/js/getgov/table-base.js
@@ -495,10 +495,7 @@ export class BaseTable {
   // Add event listeners to table headers for sorting
   initializeTableHeaders() {
     this.tableHeaders.forEach(header => {
-      
-      // add event listener to respond to clicks on the button
-      
-      header.addEventListener('click', function(event) {
+      header.addEventListener('click', event => {
         let button = header.querySelector('.usa-table__header__button')
         const sortBy = header.getAttribute('data-sortable');
         let order = 'asc';
@@ -509,7 +506,9 @@ export class BaseTable {
         }
         // load the results with the updated sort
         this.loadTable(1, sortBy, order);
-        // Check if the click occurred outside the button
+        // 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();

From 549f099c53013a861ae88181857942c7b0f1e7ec Mon Sep 17 00:00:00 2001
From: David Kennedy <david.kennedy@associates.cisa.dhs.gov>
Date: Mon, 23 Dec 2024 10:10:35 -0500
Subject: [PATCH 25/42] fix sort on creator column in domain request table

---
 src/registrar/views/domain_requests_json.py | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/registrar/views/domain_requests_json.py b/src/registrar/views/domain_requests_json.py
index d0e673adf..6dffc534e 100644
--- a/src/registrar/views/domain_requests_json.py
+++ b/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)

From fcf842853f6219afb02f54dfc00809a770364e38 Mon Sep 17 00:00:00 2001
From: David Kennedy <david.kennedy@associates.cisa.dhs.gov>
Date: Mon, 23 Dec 2024 10:56:19 -0500
Subject: [PATCH 26/42] initial implementation of scss changes for arrow
 spacing

---
 src/registrar/assets/src/sass/_theme/_tables.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/registrar/assets/src/sass/_theme/_tables.scss b/src/registrar/assets/src/sass/_theme/_tables.scss
index 45f0b5245..9c5cf8884 100644
--- a/src/registrar/assets/src/sass/_theme/_tables.scss
+++ b/src/registrar/assets/src/sass/_theme/_tables.scss
@@ -91,5 +91,13 @@ th {
     th[data-sortable]:not([aria-sort]) .usa-table__header__button {
       right: auto;
     }
+
+    th[data-sortable][aria-sort=ascending] .usa-table__header__button {
+      right: auto;
+    }
+
+    th[data-sortable][aria-sort=descending] .usa-table__header__button {
+      right: auto;
+    }
   }
 }

From e2cc041feec92cef6146a00cd472ebaddac81eff Mon Sep 17 00:00:00 2001
From: David Kennedy <david.kennedy@associates.cisa.dhs.gov>
Date: Mon, 23 Dec 2024 10:57:53 -0500
Subject: [PATCH 27/42] condensed version

---
 .../assets/src/sass/_theme/_tables.scss          | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/registrar/assets/src/sass/_theme/_tables.scss b/src/registrar/assets/src/sass/_theme/_tables.scss
index 9c5cf8884..ea160396e 100644
--- a/src/registrar/assets/src/sass/_theme/_tables.scss
+++ b/src/registrar/assets/src/sass/_theme/_tables.scss
@@ -88,16 +88,14 @@ th {
   }
 
   @include at-media(tablet-lg) {
-    th[data-sortable]:not([aria-sort]) .usa-table__header__button {
-      right: auto;
-    }
-
-    th[data-sortable][aria-sort=ascending] .usa-table__header__button {
-      right: auto;
-    }
-
-    th[data-sortable][aria-sort=descending] .usa-table__header__button {
+    th[data-sortable] .usa-table__header__button {
       right: auto;
+  
+      &[aria-sort=ascending],
+      &[aria-sort=descending],
+      &:not([aria-sort]) {
+        right: auto;
+      }
     }
   }
 }

From 09763c6b8979e5939a0941f86495f0c0f4a4ff14 Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Mon, 23 Dec 2024 13:16:32 -0700
Subject: [PATCH 28/42] some cleanup

---
 .../assets/src/sass/_theme/_alerts.scss         | 17 +++++------------
 .../assets/src/sass/_theme/_containers.scss     |  3 ++-
 src/registrar/templates/domain_base.html        |  2 +-
 .../templates/domain_request_form.html          |  2 +-
 4 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/src/registrar/assets/src/sass/_theme/_alerts.scss b/src/registrar/assets/src/sass/_theme/_alerts.scss
index 41bead00e..8bac7dfc7 100644
--- a/src/registrar/assets/src/sass/_theme/_alerts.scss
+++ b/src/registrar/assets/src/sass/_theme/_alerts.scss
@@ -5,17 +5,14 @@
 /*----------------
    Alert Layout
 -----------------*/
-// NOTE: !important is used because _font.scss overrides this
-@media (min-width: 64em) {
-  .usa-alert__body--widescreen {
-    max-width: $widescreen-max-width !important;
-  }
-}
-
 
 // The icon was off center for some reason
 // Fixes that issue
 @media (min-width: 64em){
+  // 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;
@@ -40,14 +37,10 @@
 // for usa-alert alert elements
 .usa-alert {
   .usa-alert__heading.larger-font-sizing {
-    font-size: units(3);
+    font-size: 1.5rem;
   }
 }
 
-.usa-alert__text.measure-none {
-  max-width: measure(none);
-}
-
 /*----------------
   Alert Coloring
 -----------------*/
diff --git a/src/registrar/assets/src/sass/_theme/_containers.scss b/src/registrar/assets/src/sass/_theme/_containers.scss
index 02a338b5d..cdff8efe4 100644
--- a/src/registrar/assets/src/sass/_theme/_containers.scss
+++ b/src/registrar/assets/src/sass/_theme/_containers.scss
@@ -8,7 +8,8 @@
 }
 
 
-// NOTE: !important is used because _font.scss overrides this
+// NOTE: !important is used because we are overriding default
+// USWDS paddings in a few locations
 @media (min-width: 64em) {
     .grid-container--widescreen {
       padding-left: $widescreen-left-padding !important;
diff --git a/src/registrar/templates/domain_base.html b/src/registrar/templates/domain_base.html
index b96be578f..35cd6409d 100644
--- a/src/registrar/templates/domain_base.html
+++ b/src/registrar/templates/domain_base.html
@@ -19,7 +19,7 @@
       {% endif %}
     </div>
 
-    <div class="tablet:grid-col-9">
+    <div class="tablet:grid-col-9 maxw-fit-content">
       <main id="main-content">
       {% if not domain.domain_info %}
         <div class="usa-alert usa-alert--error margin-bottom-2">
diff --git a/src/registrar/templates/domain_request_form.html b/src/registrar/templates/domain_request_form.html
index 732ce80f4..1c3f2508e 100644
--- a/src/registrar/templates/domain_request_form.html
+++ b/src/registrar/templates/domain_request_form.html
@@ -8,7 +8,7 @@
     <div class="tablet:grid-col-3">
       {% include 'domain_request_sidebar.html' %}
     </div>
-    <div class="tablet:grid-col-9">
+    <div class="tablet:grid-col-9 maxw-fit-content">
       <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 %}

From 03835050cc348f58310f1d7114744b2f8086fd79 Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Mon, 23 Dec 2024 18:14:05 -0700
Subject: [PATCH 29/42] more cleanup

---
 src/registrar/assets/src/sass/_theme/_containers.scss | 2 +-
 src/registrar/templates/domain_base.html              | 4 ++--
 src/registrar/templates/domain_detail.html            | 2 +-
 src/registrar/templates/domain_request_form.html      | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/registrar/assets/src/sass/_theme/_containers.scss b/src/registrar/assets/src/sass/_theme/_containers.scss
index cdff8efe4..f7345c83e 100644
--- a/src/registrar/assets/src/sass/_theme/_containers.scss
+++ b/src/registrar/assets/src/sass/_theme/_containers.scss
@@ -22,5 +22,5 @@
 // regular grid-container within a widescreen (see instances
 // where is_widescreen_centered is used in the html).
 .max-width--grid-container {
-  max-width: 64rem;
+  max-width: 960px;
 }
\ No newline at end of file
diff --git a/src/registrar/templates/domain_base.html b/src/registrar/templates/domain_base.html
index 35cd6409d..0ed4dd666 100644
--- a/src/registrar/templates/domain_base.html
+++ b/src/registrar/templates/domain_base.html
@@ -19,8 +19,8 @@
       {% endif %}
     </div>
 
-    <div class="tablet:grid-col-9 maxw-fit-content">
-      <main id="main-content">
+    <div class="tablet:grid-col-9">
+      <main id="main-content" class="grid-container">
       {% if not domain.domain_info %}
         <div class="usa-alert usa-alert--error margin-bottom-2">
           <div class="usa-alert__body">
diff --git a/src/registrar/templates/domain_detail.html b/src/registrar/templates/domain_detail.html
index 2c1108c0c..add7ca725 100644
--- a/src/registrar/templates/domain_detail.html
+++ b/src/registrar/templates/domain_detail.html
@@ -20,7 +20,7 @@
   {% endblock breadcrumb %}
 
   {{ block.super }}
-  <div class="margin-top-4 tablet:grid-col-10 maxw-fit-content">
+  <div class="margin-top-4 tablet:grid-col-10">
     <h2 class="text-bold text-primary-dark domain-name-wrap">{{ domain.name }}</h2>
     <div
         class="usa-summary-box dotgov-status-box padding-bottom-0 margin-top-3 padding-left-2{% if not domain.is_expired %}{% if domain.state == domain.State.UNKNOWN or domain.state == domain.State.DNS_NEEDED %} dotgov-status-box--action-need{% endif %}{% endif %}"
diff --git a/src/registrar/templates/domain_request_form.html b/src/registrar/templates/domain_request_form.html
index 1c3f2508e..732ce80f4 100644
--- a/src/registrar/templates/domain_request_form.html
+++ b/src/registrar/templates/domain_request_form.html
@@ -8,7 +8,7 @@
     <div class="tablet:grid-col-3">
       {% include 'domain_request_sidebar.html' %}
     </div>
-    <div class="tablet:grid-col-9 maxw-fit-content">
+    <div class="tablet:grid-col-9">
       <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 %}

From 76ebec01ce0e0220904b2d4705c5341e4b33c5fe Mon Sep 17 00:00:00 2001
From: David Kennedy <david.kennedy@associates.cisa.dhs.gov>
Date: Tue, 24 Dec 2024 12:46:02 -0500
Subject: [PATCH 30/42] refactored domain request form modal to remove hidden
 input

---
 .../src/js/getgov/domain-request-form.js      | 12 ++++++++++
 src/registrar/assets/src/js/getgov/helpers.js | 14 +++++++++++
 src/registrar/assets/src/js/getgov/main.js    |  3 +++
 .../templates/domain_request_form.html        | 14 ++++++++++-
 src/registrar/templates/includes/modal.html   | 24 ++++++++++++++++---
 src/registrar/views/domain_request.py         | 13 ----------
 6 files changed, 63 insertions(+), 17 deletions(-)
 create mode 100644 src/registrar/assets/src/js/getgov/domain-request-form.js

diff --git a/src/registrar/assets/src/js/getgov/domain-request-form.js b/src/registrar/assets/src/js/getgov/domain-request-form.js
new file mode 100644
index 000000000..d9b660a50
--- /dev/null
+++ b/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");
+            });
+        } 
+    });
+}
\ No newline at end of file
diff --git a/src/registrar/assets/src/js/getgov/helpers.js b/src/registrar/assets/src/js/getgov/helpers.js
index 1afd84520..4b893ae7c 100644
--- a/src/registrar/assets/src/js/getgov/helpers.js
+++ b/src/registrar/assets/src/js/getgov/helpers.js
@@ -75,3 +75,17 @@ 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) {
+        console.log("submitting form");
+        form.submit();
+    } else {
+        console.error("Form '" + form_id + "' not found.");
+    }
+}
diff --git a/src/registrar/assets/src/js/getgov/main.js b/src/registrar/assets/src/js/getgov/main.js
index f5ebc83a3..cee28e7a0 100644
--- a/src/registrar/assets/src/js/getgov/main.js
+++ b/src/registrar/assets/src/js/getgov/main.js
@@ -11,6 +11,7 @@ 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';
 
 initDomainValidators();
 
@@ -36,6 +37,8 @@ initMembersTable();
 initMemberDomainsTable();
 initEditMemberDomainsTable();
 
+initDomainRequestForm();
+
 // Init the portfolio new member page
 initPortfolioMemberPageRadio();
 initPortfolioNewMemberPageToggle();
diff --git a/src/registrar/templates/domain_request_form.html b/src/registrar/templates/domain_request_form.html
index a076220cb..aeae9fb34 100644
--- a/src/registrar/templates/domain_request_form.html
+++ b/src/registrar/templates/domain_request_form.html
@@ -130,9 +130,21 @@ <h1> {{form_titles|get_item:steps.current}} </h1>
           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 %}
+            {% 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" %}
+              {% include 'includes/modal.html' %}
+            {% endwith %}
+          {% else %}
+            {% 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 %}
+              {% include 'includes/modal.html' %}
+            {% endwith %}
+          {% endif %}
         </div>
 
+        <form method="post" id="submit-domain-request-form">
+          {% csrf_token %}
+        </form>
+
 {% block after_form_content %}{% endblock %}
 
       </main>
diff --git a/src/registrar/templates/includes/modal.html b/src/registrar/templates/includes/modal.html
index 625044585..72a989484 100644
--- a/src/registrar/templates/includes/modal.html
+++ b/src/registrar/templates/includes/modal.html
@@ -24,8 +24,26 @@ <h2 class="usa-modal__heading">
         <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="usa-button"
+                            data-close-modal
+                        >
+                        {% if modal_button_text %}
+                            {{ modal_button_text }}
+                        {% else %}
+                            Cancel
+                        {% endif %}
+                    </button>
+                    {% elif modal_button_id and modal_button_text %}
+                        <button
+                            id="{{ modal_button_id }}"
+                            type="button"
+                            class="usa-button"
+                        >
+                            {{ modal_button_text }}
+                        </button>
                     {% elif modal_button_url and modal_button_text %}
                         <a
                             href="{{ modal_button_url }}"
@@ -56,7 +74,7 @@ <h2 class="usa-modal__heading">
                                 Cancel
                             </button>
                         </form>
-                    {% elif not is_domain_request_form or review_form_is_complete %}
+                    {% elif not cancel_button_only %}
                         <button
                             type="button"
                             class="usa-button usa-button--unstyled padding-105 text-center"
diff --git a/src/registrar/views/domain_request.py b/src/registrar/views/domain_request.py
index 85f7576d0..9754b0d0c 100644
--- a/src/registrar/views/domain_request.py
+++ b/src/registrar/views/domain_request.py
@@ -448,34 +448,21 @@ def get_context_data(self):
         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,

From ed674e2ea78302f6a386740eda4e7c3ea36c7f5b Mon Sep 17 00:00:00 2001
From: David Kennedy <david.kennedy@associates.cisa.dhs.gov>
Date: Tue, 24 Dec 2024 16:01:21 -0500
Subject: [PATCH 31/42] fixed focus trap on modal in domain managers (remove)
 modal

---
 .../assets/src/js/getgov/domain-managers.js   | 20 ++++++++++++++++
 src/registrar/assets/src/js/getgov/main.js    |  2 ++
 src/registrar/templates/domain_users.html     | 24 ++++++++++---------
 src/registrar/templates/includes/modal.html   |  7 +++---
 src/registrar/templatetags/custom_filters.py  |  5 ++++
 src/registrar/views/domain.py                 | 23 ------------------
 6 files changed, 44 insertions(+), 37 deletions(-)
 create mode 100644 src/registrar/assets/src/js/getgov/domain-managers.js

diff --git a/src/registrar/assets/src/js/getgov/domain-managers.js b/src/registrar/assets/src/js/getgov/domain-managers.js
new file mode 100644
index 000000000..26eccd8cd
--- /dev/null
+++ b/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
+                });
+            });
+        } 
+    });
+}
\ No newline at end of file
diff --git a/src/registrar/assets/src/js/getgov/main.js b/src/registrar/assets/src/js/getgov/main.js
index cee28e7a0..0706639c4 100644
--- a/src/registrar/assets/src/js/getgov/main.js
+++ b/src/registrar/assets/src/js/getgov/main.js
@@ -12,6 +12,7 @@ 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';
 
 initDomainValidators();
 
@@ -38,6 +39,7 @@ initMemberDomainsTable();
 initEditMemberDomainsTable();
 
 initDomainRequestForm();
+initDomainManagersPage();
 
 // Init the portfolio new member page
 initPortfolioMemberPageRadio();
diff --git a/src/registrar/templates/domain_users.html b/src/registrar/templates/domain_users.html
index af292d9d5..f42e738e1 100644
--- a/src/registrar/templates/domain_users.html
+++ b/src/registrar/templates/domain_users.html
@@ -49,7 +49,7 @@ <h1>Domain managers</h1>
   </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 @@ <h2 class> Domain managers </h2>
             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 @@ <h2 class> Domain managers </h2>
               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 
diff --git a/src/registrar/templates/includes/modal.html b/src/registrar/templates/includes/modal.html
index 72a989484..c07a76ed9 100644
--- a/src/registrar/templates/includes/modal.html
+++ b/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">
@@ -27,7 +28,7 @@ <h2 class="usa-modal__heading">
                     {% if cancel_button_only %}
                         <button
                             type="button"
-                            class="usa-button"
+                            class="{{ modal_button_class|button_class }}"
                             data-close-modal
                         >
                         {% if modal_button_text %}
@@ -40,7 +41,7 @@ <h2 class="usa-modal__heading">
                         <button
                             id="{{ modal_button_id }}"
                             type="button"
-                            class="usa-button"
+                            class="{{ modal_button_class|button_class }}"
                         >
                             {{ modal_button_text }}
                         </button>
@@ -48,7 +49,7 @@ <h2 class="usa-modal__heading">
                         <a
                             href="{{ modal_button_url }}"
                             type="button"
-                            class="usa-button"
+                            class="{{ modal_button_class|button_class }}"
                         >
                             {{ modal_button_text }}
                         </a>
diff --git a/src/registrar/templatetags/custom_filters.py b/src/registrar/templatetags/custom_filters.py
index 6140130c8..bee130da2 100644
--- a/src/registrar/templatetags/custom_filters.py
+++ b/src/registrar/templatetags/custom_filters.py
@@ -290,3 +290,8 @@ 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
diff --git a/src/registrar/views/domain.py b/src/registrar/views/domain.py
index cb3da1f83..54689e3ce 100644
--- a/src/registrar/views/domain.py
+++ b/src/registrar/views/domain.py
@@ -1050,9 +1050,6 @@ def get_context_data(self, **kwargs):
         # 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 +1146,6 @@ def _add_booleans_to_context(self, context):
         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.

From 05de74dc9e128a6239fa2e71fe91fe5285404864 Mon Sep 17 00:00:00 2001
From: David Kennedy <david.kennedy@associates.cisa.dhs.gov>
Date: Thu, 26 Dec 2024 06:52:42 -0500
Subject: [PATCH 32/42] fixed modal focustrap in ds data form modal

---
 .../assets/src/js/getgov/domain-dsdata.js     | 27 +++++++++++++++++++
 src/registrar/assets/src/js/getgov/main.js    |  2 ++
 src/registrar/templates/domain_dsdata.html    | 12 +++++++--
 src/registrar/views/domain.py                 |  9 -------
 4 files changed, 39 insertions(+), 11 deletions(-)
 create mode 100644 src/registrar/assets/src/js/getgov/domain-dsdata.js

diff --git a/src/registrar/assets/src/js/getgov/domain-dsdata.js b/src/registrar/assets/src/js/getgov/domain-dsdata.js
new file mode 100644
index 000000000..7c0871bec
--- /dev/null
+++ b/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");
+                });
+            } 
+        }
+    });
+}
\ No newline at end of file
diff --git a/src/registrar/assets/src/js/getgov/main.js b/src/registrar/assets/src/js/getgov/main.js
index 0706639c4..d7d19e745 100644
--- a/src/registrar/assets/src/js/getgov/main.js
+++ b/src/registrar/assets/src/js/getgov/main.js
@@ -13,6 +13,7 @@ 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';
 
 initDomainValidators();
 
@@ -40,6 +41,7 @@ initEditMemberDomainsTable();
 
 initDomainRequestForm();
 initDomainManagersPage();
+initDomainDSData();
 
 // Init the portfolio new member page
 initPortfolioMemberPageRadio();
diff --git a/src/registrar/templates/domain_dsdata.html b/src/registrar/templates/domain_dsdata.html
index 0f60235e1..5ebb264c4 100644
--- a/src/registrar/templates/domain_dsdata.html
+++ b/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 @@ <h2 class="margin-top-0">DS data record {{forloop.counter}}</h2>
     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 #}
diff --git a/src/registrar/views/domain.py b/src/registrar/views/domain.py
index 54689e3ce..c84551fe0 100644
--- a/src/registrar/views/domain.py
+++ b/src/registrar/views/domain.py
@@ -906,15 +906,6 @@ def post(self, request, *args, **kwargs):
             # 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:

From 4f5767815680aa0caff12fb268836daf7fe4266a Mon Sep 17 00:00:00 2001
From: David Kennedy <david.kennedy@associates.cisa.dhs.gov>
Date: Thu, 26 Dec 2024 07:11:19 -0500
Subject: [PATCH 33/42] fix for focustrap on dnssec modal

---
 .../assets/src/js/getgov/domain-dnssec.js         | 15 +++++++++++++++
 src/registrar/assets/src/js/getgov/main.js        |  2 ++
 src/registrar/templates/domain_dnssec.html        |  8 ++++++--
 src/registrar/views/domain.py                     |  9 ---------
 4 files changed, 23 insertions(+), 11 deletions(-)
 create mode 100644 src/registrar/assets/src/js/getgov/domain-dnssec.js

diff --git a/src/registrar/assets/src/js/getgov/domain-dnssec.js b/src/registrar/assets/src/js/getgov/domain-dnssec.js
new file mode 100644
index 000000000..860359fe0
--- /dev/null
+++ b/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");
+                });
+            }
+        }
+    });
+}
\ No newline at end of file
diff --git a/src/registrar/assets/src/js/getgov/main.js b/src/registrar/assets/src/js/getgov/main.js
index d7d19e745..3ba64bed8 100644
--- a/src/registrar/assets/src/js/getgov/main.js
+++ b/src/registrar/assets/src/js/getgov/main.js
@@ -14,6 +14,7 @@ import { initPortfolioNewMemberPageToggle, initAddNewMemberPageListeners, initPo
 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';
 
 initDomainValidators();
 
@@ -42,6 +43,7 @@ initEditMemberDomainsTable();
 initDomainRequestForm();
 initDomainManagersPage();
 initDomainDSData();
+initDomainDNSSEC();
 
 // Init the portfolio new member page
 initPortfolioMemberPageRadio();
diff --git a/src/registrar/templates/domain_dnssec.html b/src/registrar/templates/domain_dnssec.html
index cfec053c2..2dd306d7d 100644
--- a/src/registrar/templates/domain_dnssec.html
+++ b/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 @@ <h2>DNSSEC is enabled on your domain</h2>
     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 #}
diff --git a/src/registrar/views/domain.py b/src/registrar/views/domain.py
index c84551fe0..45f1e6ad2 100644
--- a/src/registrar/views/domain.py
+++ b/src/registrar/views/domain.py
@@ -805,15 +805,6 @@ def get_context_data(self, **kwargs):
         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)
 

From 962e760c115ffa74bd776ecaf96fe989f0aec438 Mon Sep 17 00:00:00 2001
From: David Kennedy <david.kennedy@associates.cisa.dhs.gov>
Date: Thu, 26 Dec 2024 07:32:28 -0500
Subject: [PATCH 34/42] fix for focustrap on dnssec modal

---
 src/registrar/templates/domain_dnssec.html   |  4 +-
 src/registrar/templates/includes/modal.html  | 49 ++++++++------------
 src/registrar/templatetags/custom_filters.py |  3 +-
 3 files changed, 23 insertions(+), 33 deletions(-)

diff --git a/src/registrar/templates/domain_dnssec.html b/src/registrar/templates/domain_dnssec.html
index 2dd306d7d..a795fb2fc 100644
--- a/src/registrar/templates/domain_dnssec.html
+++ b/src/registrar/templates/domain_dnssec.html
@@ -78,9 +78,9 @@ <h2>DNSSEC is enabled on your domain</h2>
     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_id="disable_dnssec_button" modal_button_text="Confirm" modal_button_class="usa-button--secondary" %}
+      {% 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">
+  <form method="post" id="disable-dnssec-form">
     {% csrf_token %}
     <input type="hidden" name="disable_dnssec" value="1">
   </form>
diff --git a/src/registrar/templates/includes/modal.html b/src/registrar/templates/includes/modal.html
index c07a76ed9..0540e9530 100644
--- a/src/registrar/templates/includes/modal.html
+++ b/src/registrar/templates/includes/modal.html
@@ -53,28 +53,20 @@ <h2 class="usa-modal__heading">
                         >
                             {{ 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>
+                        <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"
@@ -91,20 +83,17 @@ <h2 class="usa-modal__heading">
     {% 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"
diff --git a/src/registrar/templatetags/custom_filters.py b/src/registrar/templatetags/custom_filters.py
index bee130da2..b750af599 100644
--- a/src/registrar/templatetags/custom_filters.py
+++ b/src/registrar/templatetags/custom_filters.py
@@ -291,7 +291,8 @@ def get_dict_value(dictionary, key):
         return dictionary.get(key, "")
     return ""
 
+
 @register.filter
-def  button_class(custom_class):
+def button_class(custom_class):
     default_class = "usa-button"
     return f"{default_class} {custom_class}" if custom_class else default_class

From 6e602b95c86650d5ee1297f6ced053e0d7a73b6c Mon Sep 17 00:00:00 2001
From: David Kennedy <david.kennedy@associates.cisa.dhs.gov>
Date: Thu, 26 Dec 2024 10:53:22 -0500
Subject: [PATCH 35/42] form level error handling with focus

---
 .../assets/src/js/getgov/form-errors.js       | 19 +++++++++++++++++++
 src/registrar/assets/src/js/getgov/main.js    |  3 +++
 .../templates/includes/form_errors.html       |  6 ++++--
 3 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 src/registrar/assets/src/js/getgov/form-errors.js

diff --git a/src/registrar/assets/src/js/getgov/form-errors.js b/src/registrar/assets/src/js/getgov/form-errors.js
new file mode 100644
index 000000000..e992d8eef
--- /dev/null
+++ b/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) {
+      // Focus on the error summary for screen reader users
+      errorSummary.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+
+  });
+}
\ No newline at end of file
diff --git a/src/registrar/assets/src/js/getgov/main.js b/src/registrar/assets/src/js/getgov/main.js
index f5ebc83a3..c63773d35 100644
--- a/src/registrar/assets/src/js/getgov/main.js
+++ b/src/registrar/assets/src/js/getgov/main.js
@@ -11,6 +11,7 @@ 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 { initFormErrorHandling } from './form-errors.js';
 
 initDomainValidators();
 
@@ -36,6 +37,8 @@ initMembersTable();
 initMemberDomainsTable();
 initEditMemberDomainsTable();
 
+initFormErrorHandling();
+
 // Init the portfolio new member page
 initPortfolioMemberPageRadio();
 initPortfolioNewMemberPageToggle();
diff --git a/src/registrar/templates/includes/form_errors.html b/src/registrar/templates/includes/form_errors.html
index dbbecae36..52c82aaf0 100644
--- a/src/registrar/templates/includes/form_errors.html
+++ b/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 %}

From f2c3ae703044bcb4cd21f9cbfa09091b2ed611f9 Mon Sep 17 00:00:00 2001
From: David Kennedy <david.kennedy@associates.cisa.dhs.gov>
Date: Thu, 26 Dec 2024 11:17:12 -0500
Subject: [PATCH 36/42] ignore

---
 src/registrar/assets/src/js/getgov/main.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/registrar/assets/src/js/getgov/main.js b/src/registrar/assets/src/js/getgov/main.js
index f5ebc83a3..3b9ae758f 100644
--- a/src/registrar/assets/src/js/getgov/main.js
+++ b/src/registrar/assets/src/js/getgov/main.js
@@ -40,3 +40,4 @@ initEditMemberDomainsTable();
 initPortfolioMemberPageRadio();
 initPortfolioNewMemberPageToggle();
 initAddNewMemberPageListeners();
+//ignore, testing why test fails in pipeline

From d51c022ec67877470c6a4f55bc25b77ca5dcf3df Mon Sep 17 00:00:00 2001
From: matthewswspence <Matthewswspence@gmail.com>
Date: Mon, 30 Dec 2024 10:38:53 -0600
Subject: [PATCH 37/42] minor additional fix

---
 src/registrar/templates/portfolio_organization.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/registrar/templates/portfolio_organization.html b/src/registrar/templates/portfolio_organization.html
index 712d1a6ca..ce32555a5 100644
--- a/src/registrar/templates/portfolio_organization.html
+++ b/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 @@ <h1>Organization</h1>
                 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 %}

From 3474b35b4ff44c9cbacfcfd560b17519308681b2 Mon Sep 17 00:00:00 2001
From: David Kennedy <david.kennedy@associates.cisa.dhs.gov>
Date: Tue, 31 Dec 2024 10:24:39 -0500
Subject: [PATCH 38/42] adding comments, removing logs

---
 src/registrar/assets/src/js/getgov/form-errors.js | 2 +-
 src/registrar/assets/src/js/getgov/helpers.js     | 1 -
 src/registrar/templates/domain_request_form.html  | 8 ++------
 src/registrar/templates/includes/modal.html       | 2 ++
 4 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/registrar/assets/src/js/getgov/form-errors.js b/src/registrar/assets/src/js/getgov/form-errors.js
index e992d8eef..ec1faaccf 100644
--- a/src/registrar/assets/src/js/getgov/form-errors.js
+++ b/src/registrar/assets/src/js/getgov/form-errors.js
@@ -11,7 +11,7 @@ export function initFormErrorHandling() {
         firstErrorField.focus();
       }, 50);
     } else if (errorSummary) {
-      // Focus on the error summary for screen reader users
+      // Scroll to the error summary
       errorSummary.scrollIntoView({ behavior: 'smooth', block: 'center' });
     }
 
diff --git a/src/registrar/assets/src/js/getgov/helpers.js b/src/registrar/assets/src/js/getgov/helpers.js
index 4b893ae7c..93c25ee45 100644
--- a/src/registrar/assets/src/js/getgov/helpers.js
+++ b/src/registrar/assets/src/js/getgov/helpers.js
@@ -83,7 +83,6 @@ export function getCsrfToken() {
 export function submitForm(form_id) {
     let form = document.getElementById(form_id);
     if (form) {
-        console.log("submitting form");
         form.submit();
     } else {
         console.error("Form '" + form_id + "' not found.");
diff --git a/src/registrar/templates/domain_request_form.html b/src/registrar/templates/domain_request_form.html
index aeae9fb34..2c2716a3c 100644
--- a/src/registrar/templates/domain_request_form.html
+++ b/src/registrar/templates/domain_request_form.html
@@ -131,13 +131,9 @@ <h1> {{form_titles|get_item:steps.current}} </h1>
           data-force-action
         >
           {% if review_form_is_complete %}
-            {% 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" %}
-              {% include 'includes/modal.html' %}
-            {% endwith %}
+            {% 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 %}
-            {% 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 %}
-              {% include 'includes/modal.html' %}
-            {% endwith %}
+            {% 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>
 
diff --git a/src/registrar/templates/includes/modal.html b/src/registrar/templates/includes/modal.html
index 0540e9530..643878eb0 100644
--- a/src/registrar/templates/includes/modal.html
+++ b/src/registrar/templates/includes/modal.html
@@ -38,6 +38,8 @@ <h2 class="usa-modal__heading">
                         {% 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"

From 6b13a8f93f709e08a33680008f25bd98605624ed Mon Sep 17 00:00:00 2001
From: Rachid Mrad <rachid.mrad@ecstech.com>
Date: Tue, 31 Dec 2024 13:16:14 -0500
Subject: [PATCH 39/42] footer and header adjustemnts

---
 src/registrar/assets/src/sass/_theme/_containers.scss | 2 +-
 src/registrar/templates/base.html                     | 2 +-
 src/registrar/templates/includes/footer.html          | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/registrar/assets/src/sass/_theme/_containers.scss b/src/registrar/assets/src/sass/_theme/_containers.scss
index f7345c83e..7ba4e829f 100644
--- a/src/registrar/assets/src/sass/_theme/_containers.scss
+++ b/src/registrar/assets/src/sass/_theme/_containers.scss
@@ -10,7 +10,7 @@
 
 // NOTE: !important is used because we are overriding default
 // USWDS paddings in a few locations
-@media (min-width: 64em) {
+@include at-media(desktop) {
     .grid-container--widescreen {
       padding-left: $widescreen-left-padding !important;
       padding-right: $widescreen-right-padding !important;
diff --git a/src/registrar/templates/base.html b/src/registrar/templates/base.html
index 68c57f9d9..4f73a26ab 100644
--- a/src/registrar/templates/base.html
+++ b/src/registrar/templates/base.html
@@ -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-left--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"
diff --git a/src/registrar/templates/includes/footer.html b/src/registrar/templates/includes/footer.html
index b948bd49b..ce65137af 100644
--- a/src/registrar/templates/includes/footer.html
+++ b/src/registrar/templates/includes/footer.html
@@ -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">

From 540b355cace00a10c7def70c534742fad9a37aea Mon Sep 17 00:00:00 2001
From: Rachid Mrad <rachid.mrad@ecstech.com>
Date: Tue, 31 Dec 2024 13:39:30 -0500
Subject: [PATCH 40/42] remove widescreen context processor

---
 src/registrar/assets/src/sass/_theme/_admin.scss       |  9 +++++++++
 src/registrar/assets/src/sass/_theme/_alerts.scss      |  2 +-
 src/registrar/assets/src/sass/_theme/_base.scss        |  2 +-
 src/registrar/config/settings.py                       |  1 -
 src/registrar/context_processors.py                    | 10 ----------
 src/registrar/templates/401.html                       |  2 +-
 src/registrar/templates/403.html                       |  2 +-
 src/registrar/templates/404.html                       |  2 +-
 src/registrar/templates/500.html                       |  2 +-
 src/registrar/templates/domain_base.html               |  2 +-
 src/registrar/templates/domain_request_form.html       |  2 +-
 src/registrar/templates/domain_request_intro.html      |  2 +-
 .../domain_request_withdraw_confirmation.html          |  2 +-
 src/registrar/templates/home.html                      |  2 +-
 src/registrar/templates/includes/banner-error.html     |  2 +-
 src/registrar/templates/includes/banner-info.html      |  2 +-
 .../includes/banner-non-production-alert.html          |  2 +-
 .../templates/includes/banner-service-disruption.html  |  2 +-
 .../templates/includes/banner-site-alert.html          |  2 +-
 .../templates/includes/banner-system-outage.html       |  2 +-
 src/registrar/templates/includes/banner-warning.html   |  2 +-
 .../includes/domain_request_status_manage.html         |  2 +-
 .../templates/includes/domain_requests_table.html      |  2 +-
 src/registrar/templates/includes/domains_table.html    |  6 +++---
 src/registrar/templates/includes/members_table.html    |  2 +-
 .../templates/includes/request_status_manage.html      |  2 +-
 src/registrar/templates/portfolio_base.html            |  2 +-
 src/registrar/templates/portfolio_members.html         |  2 +-
 src/registrar/templates/profile.html                   |  2 +-
 29 files changed, 37 insertions(+), 39 deletions(-)

diff --git a/src/registrar/assets/src/sass/_theme/_admin.scss b/src/registrar/assets/src/sass/_theme/_admin.scss
index 58ce1e4df..5bb523cac 100644
--- a/src/registrar/assets/src/sass/_theme/_admin.scss
+++ b/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,
diff --git a/src/registrar/assets/src/sass/_theme/_alerts.scss b/src/registrar/assets/src/sass/_theme/_alerts.scss
index 8bac7dfc7..b27fa8806 100644
--- a/src/registrar/assets/src/sass/_theme/_alerts.scss
+++ b/src/registrar/assets/src/sass/_theme/_alerts.scss
@@ -8,7 +8,7 @@
 
 // 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;
diff --git a/src/registrar/assets/src/sass/_theme/_base.scss b/src/registrar/assets/src/sass/_theme/_base.scss
index 65dc51154..8cde4dc1a 100644
--- a/src/registrar/assets/src/sass/_theme/_base.scss
+++ b/src/registrar/assets/src/sass/_theme/_base.scss
@@ -257,7 +257,7 @@ abbr[title] {
 
 // 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
-@media (min-width: 64em) {
+@include at-media(desktop) {
   .padding-left--widescreen {
     padding-left: $widescreen-left-padding !important;
   }
diff --git a/src/registrar/config/settings.py b/src/registrar/config/settings.py
index 8f8ad1530..0111245a1 100644
--- a/src/registrar/config/settings.py
+++ b/src/registrar/config/settings.py
@@ -251,7 +251,6 @@
                 "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",
             ],
         },
diff --git a/src/registrar/context_processors.py b/src/registrar/context_processors.py
index 5c120a8d8..b3d9c3727 100644
--- a/src/registrar/context_processors.py
+++ b/src/registrar/context_processors.py
@@ -109,16 +109,6 @@ def portfolio_permissions(request):
         return portfolio_context
 
 
-def is_widescreen_mode(request):
-    exclude_paths = ["/admin/"]
-
-    # Widescreen is now global for all pages EXCEPT admin
-    is_excluded = any(exclude_path in request.path for exclude_path in exclude_paths)
-
-    # Return a dictionary with the widescreen mode status.
-    return {"is_widescreen_mode": not is_excluded}
-
-
 def is_widescreen_centered(request):
     include_paths = [
         "/domains/",
diff --git a/src/registrar/templates/401.html b/src/registrar/templates/401.html
index 848d9901a..7698c4f82 100644
--- a/src/registrar/templates/401.html
+++ b/src/registrar/templates/401.html
@@ -5,7 +5,7 @@
 {% block title %}{% translate "Unauthorized | " %}{% 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">
   <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>
diff --git a/src/registrar/templates/403.html b/src/registrar/templates/403.html
index 5f0faa5a5..a04453fe9 100644
--- a/src/registrar/templates/403.html
+++ b/src/registrar/templates/403.html
@@ -5,7 +5,7 @@
 {% block title %}{% translate "Forbidden | " %}{% 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">
   <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>
diff --git a/src/registrar/templates/404.html b/src/registrar/templates/404.html
index 4747ae846..2bf9ecf02 100644
--- a/src/registrar/templates/404.html
+++ b/src/registrar/templates/404.html
@@ -5,7 +5,7 @@
 {% block title %}{% translate "Page not found | " %}{% 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">
   <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>
diff --git a/src/registrar/templates/500.html b/src/registrar/templates/500.html
index 661bae9f9..fad909ddb 100644
--- a/src/registrar/templates/500.html
+++ b/src/registrar/templates/500.html
@@ -5,7 +5,7 @@
 {% block title %}{% translate "Server error | " %}{% 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">
   <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>
diff --git a/src/registrar/templates/domain_base.html b/src/registrar/templates/domain_base.html
index 0ed4dd666..b65e9399b 100644
--- a/src/registrar/templates/domain_base.html
+++ b/src/registrar/templates/domain_base.html
@@ -4,7 +4,7 @@
 {% block title %}{{ domain.name }} | {% endblock %}
 
 {% block content %}
-<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 {% if not is_widescreen_centered %}max-width--grid-container{% endif %}">
     <div class="tablet:grid-col-3 ">
diff --git a/src/registrar/templates/domain_request_form.html b/src/registrar/templates/domain_request_form.html
index fae64af1f..59a2474b8 100644
--- a/src/registrar/templates/domain_request_form.html
+++ b/src/registrar/templates/domain_request_form.html
@@ -3,7 +3,7 @@
 
 {% block title %}{{form_titles|get_item:steps.current}} | Request a .gov | {% endblock %}
 {% block content %}
-<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 {% if not is_widescreen_centered %}max-width--grid-container{% endif %}">
     <div class="tablet:grid-col-3">
       {% include 'domain_request_sidebar.html' %}
diff --git a/src/registrar/templates/domain_request_intro.html b/src/registrar/templates/domain_request_intro.html
index eeaea9a01..d66d019e6 100644
--- a/src/registrar/templates/domain_request_intro.html
+++ b/src/registrar/templates/domain_request_intro.html
@@ -4,7 +4,7 @@
 {% block title %} Start a request | {% 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">
     <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">
 
diff --git a/src/registrar/templates/domain_request_withdraw_confirmation.html b/src/registrar/templates/domain_request_withdraw_confirmation.html
index c88e0e48d..cc426eeaf 100644
--- a/src/registrar/templates/domain_request_withdraw_confirmation.html
+++ b/src/registrar/templates/domain_request_withdraw_confirmation.html
@@ -8,7 +8,7 @@
 {% endblock wrapperdiv %}
 
 {% block content %}
-<div class="grid-container {% if is_widescreen_mode %}grid-container--widescreen{% endif %}">
+<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">
     
diff --git a/src/registrar/templates/home.html b/src/registrar/templates/home.html
index a8de5cc9b..de4d9e712 100644
--- a/src/registrar/templates/home.html
+++ b/src/registrar/templates/home.html
@@ -5,7 +5,7 @@
 {% 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 #}
 
diff --git a/src/registrar/templates/includes/banner-error.html b/src/registrar/templates/includes/banner-error.html
index 7b5c32ed1..10582e268 100644
--- a/src/registrar/templates/includes/banner-error.html
+++ b/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>
diff --git a/src/registrar/templates/includes/banner-info.html b/src/registrar/templates/includes/banner-info.html
index e5d54e483..cf379c50d 100644
--- a/src/registrar/templates/includes/banner-info.html
+++ b/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>
diff --git a/src/registrar/templates/includes/banner-non-production-alert.html b/src/registrar/templates/includes/banner-non-production-alert.html
index 61d4eed51..7b66d543b 100644
--- a/src/registrar/templates/includes/banner-non-production-alert.html
+++ b/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>
diff --git a/src/registrar/templates/includes/banner-service-disruption.html b/src/registrar/templates/includes/banner-service-disruption.html
index fc89ee65d..6ee4b976b 100644
--- a/src/registrar/templates/includes/banner-service-disruption.html
+++ b/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>
diff --git a/src/registrar/templates/includes/banner-site-alert.html b/src/registrar/templates/includes/banner-site-alert.html
index 52256f46b..8dd657267 100644
--- a/src/registrar/templates/includes/banner-site-alert.html
+++ b/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>
diff --git a/src/registrar/templates/includes/banner-system-outage.html b/src/registrar/templates/includes/banner-system-outage.html
index 911fa4487..60fc4eb03 100644
--- a/src/registrar/templates/includes/banner-system-outage.html
+++ b/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>
diff --git a/src/registrar/templates/includes/banner-warning.html b/src/registrar/templates/includes/banner-warning.html
index 6838aef7b..762d0b47c 100644
--- a/src/registrar/templates/includes/banner-warning.html
+++ b/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>
diff --git a/src/registrar/templates/includes/domain_request_status_manage.html b/src/registrar/templates/includes/domain_request_status_manage.html
index d9164f148..1c6ca081e 100644
--- a/src/registrar/templates/includes/domain_request_status_manage.html
+++ b/src/registrar/templates/includes/domain_request_status_manage.html
@@ -1,6 +1,6 @@
 {% load custom_filters %}
 {% load static url_helpers %}
-<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">
     <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 %}
diff --git a/src/registrar/templates/includes/domain_requests_table.html b/src/registrar/templates/includes/domain_requests_table.html
index 71f7a2e84..c48e2c9a6 100644
--- a/src/registrar/templates/includes/domain_requests_table.html
+++ b/src/registrar/templates/includes/domain_requests_table.html
@@ -13,7 +13,7 @@ <h2 id="domain-requests-header" class="display-inline-block">Domain requests</h2
         <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 %}
diff --git a/src/registrar/templates/includes/domains_table.html b/src/registrar/templates/includes/domains_table.html
index 3a599e9a3..f9f8b4c9f 100644
--- a/src/registrar/templates/includes/domains_table.html
+++ b/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 @@ <h2 id="domains-header" class="display-inline-block">Domains</h2>
       <!-- 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 @@ <h2 id="domains-header" class="display-inline-block">Domains</h2>
   {% 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>
diff --git a/src/registrar/templates/includes/members_table.html b/src/registrar/templates/includes/members_table.html
index 9e6a0965b..19320a4ae 100644
--- a/src/registrar/templates/includes/members_table.html
+++ b/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 %}
diff --git a/src/registrar/templates/includes/request_status_manage.html b/src/registrar/templates/includes/request_status_manage.html
index 94714f2a4..502ac0569 100644
--- a/src/registrar/templates/includes/request_status_manage.html
+++ b/src/registrar/templates/includes/request_status_manage.html
@@ -1,6 +1,6 @@
 {% load custom_filters %}
 {% load static url_helpers %}
-<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">
     <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 %}
diff --git a/src/registrar/templates/portfolio_base.html b/src/registrar/templates/portfolio_base.html
index 083e27533..4cafd3f84 100644
--- a/src/registrar/templates/portfolio_base.html
+++ b/src/registrar/templates/portfolio_base.html
@@ -4,7 +4,7 @@
   <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 #}
             
diff --git a/src/registrar/templates/portfolio_members.html b/src/registrar/templates/portfolio_members.html
index d6cc4df7c..332d1c16c 100644
--- a/src/registrar/templates/portfolio_members.html
+++ b/src/registrar/templates/portfolio_members.html
@@ -12,7 +12,7 @@
 
 <div id="main-content">
   <div id="toggleable-alert" class="usa-alert usa-alert--slim margin-bottom-2 display-none">
-    <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 ">
         <!-- alert message will be conditionally populated by javascript -->
       </p>
diff --git a/src/registrar/templates/profile.html b/src/registrar/templates/profile.html
index 0be9aca8f..cbd2811d1 100644
--- a/src/registrar/templates/profile.html
+++ b/src/registrar/templates/profile.html
@@ -11,7 +11,7 @@
 {% 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">
     <div class="grid-row {% if not is_widescreen_centered %}max-width--grid-container{% endif %}">
         <div class="desktop:grid-col-8">
             {% if messages %}

From 0597eac1757ca919560e1415f544d52ca8c4eae7 Mon Sep 17 00:00:00 2001
From: Rachid Mrad <rachid.mrad@ecstech.com>
Date: Tue, 31 Dec 2024 13:46:36 -0500
Subject: [PATCH 41/42] simplify left and right to x padding

---
 src/registrar/assets/src/sass/_theme/_base.scss       | 11 ++++-------
 src/registrar/assets/src/sass/_theme/_containers.scss |  4 ++--
 src/registrar/assets/src/sass/_theme/_header.scss     |  2 +-
 src/registrar/templates/base.html                     |  4 ++--
 src/registrar/templates/includes/footer.html          |  6 +++---
 src/registrar/templates/includes/header_basic.html    |  2 +-
 src/registrar/templates/includes/header_extended.html |  4 ++--
 7 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/registrar/assets/src/sass/_theme/_base.scss b/src/registrar/assets/src/sass/_theme/_base.scss
index 8cde4dc1a..23f6b6978 100644
--- a/src/registrar/assets/src/sass/_theme/_base.scss
+++ b/src/registrar/assets/src/sass/_theme/_base.scss
@@ -2,8 +2,7 @@
 @use "cisa_colors" as *;
 
 $widescreen-max-width: 1920px;
-$widescreen-left-padding: 4.5rem;
-$widescreen-right-padding: 4.5rem;
+$widescreen-x-padding: 4.5rem;
 
 $hot-pink: #FFC3F9;
 
@@ -258,11 +257,9 @@ abbr[title] {
 // 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-left--widescreen {
-    padding-left: $widescreen-left-padding !important;
-  }
-  .padding-right--widescreen {
-    padding-right: $widescreen-right-padding !important;
+  .padding-x--widescreen {
+    padding-left: $widescreen-x-padding !important;
+    padding-right: $widescreen-x-padding !important;
   }
 }
 
diff --git a/src/registrar/assets/src/sass/_theme/_containers.scss b/src/registrar/assets/src/sass/_theme/_containers.scss
index 7ba4e829f..24ad480f2 100644
--- a/src/registrar/assets/src/sass/_theme/_containers.scss
+++ b/src/registrar/assets/src/sass/_theme/_containers.scss
@@ -12,8 +12,8 @@
 // USWDS paddings in a few locations
 @include at-media(desktop) {
     .grid-container--widescreen {
-      padding-left: $widescreen-left-padding !important;
-      padding-right: $widescreen-right-padding !important;
+      padding-left: $widescreen-x-padding !important;
+      padding-right: $widescreen-x-padding !important;
     }
 }
 
diff --git a/src/registrar/assets/src/sass/_theme/_header.scss b/src/registrar/assets/src/sass/_theme/_header.scss
index 573413d4e..ffb880a7b 100644
--- a/src/registrar/assets/src/sass/_theme/_header.scss
+++ b/src/registrar/assets/src/sass/_theme/_header.scss
@@ -111,7 +111,7 @@
         }
         .usa-nav__secondary {
             right: 1rem;
-            padding-right: $widescreen-right-padding;
+            padding-right: $widescreen-x-padding;
             color: color('white');
             bottom: 4.3rem;
             .usa-nav-link,
diff --git a/src/registrar/templates/base.html b/src/registrar/templates/base.html
index 4f73a26ab..dd6417ccb 100644
--- a/src/registrar/templates/base.html
+++ b/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 usa-banner__inner--widescreen padding-left--widescreen padding-right--widescreen">
+        <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 padding-left--widescreen margin-x-0" 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"
diff --git a/src/registrar/templates/includes/footer.html b/src/registrar/templates/includes/footer.html
index ce65137af..92ff09407 100644
--- a/src/registrar/templates/includes/footer.html
+++ b/src/registrar/templates/includes/footer.html
@@ -51,7 +51,7 @@
       class="usa-identifier__section usa-identifier__section--masthead"
       aria-label="Agency identifier"
     >
-      <div class="usa-identifier__container usa-identifier__container--widescreen padding-left--widescreen padding-right--widescreen">
+      <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 usa-identifier__container--widescreen padding-left--widescreen padding-right--widescreen">
+      <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 usa-identifier__container--widescreen padding-left--widescreen padding-right--widescreen">
+      <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>
diff --git a/src/registrar/templates/includes/header_basic.html b/src/registrar/templates/includes/header_basic.html
index 7d6196308..9bed4929b 100644
--- a/src/registrar/templates/includes/header_basic.html
+++ b/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 usa-nav-container--widescreen padding-left--widescreen padding-right--widescreen">
+  <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>
diff --git a/src/registrar/templates/includes/header_extended.html b/src/registrar/templates/includes/header_extended.html
index 5086a1ad3..1e40a508d 100644
--- a/src/registrar/templates/includes/header_extended.html
+++ b/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 usa-navbar--widescreen padding-left--widescreen padding-right--widescreen">
+    <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 usa-nav__inner--widescreen padding-left--widescreen padding-right--widescreen">
+    <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>

From b4cfb746dc6b1153c9fc642a4c7667cba545a20d Mon Sep 17 00:00:00 2001
From: CuriousX <nicolle.leclair@gmail.com>
Date: Tue, 31 Dec 2024 15:12:18 -0700
Subject: [PATCH 42/42] Revert "#3074 - Change (margin/padding) responsive
 layouts - [AB]"

---
 .../assets/src/sass/_theme/_admin.scss        |   9 -
 .../assets/src/sass/_theme/_alerts.scss       |  42 +-
 .../assets/src/sass/_theme/_base.scss         |  15 -
 .../assets/src/sass/_theme/_containers.scss   |  18 -
 .../assets/src/sass/_theme/_header.scss       |   4 +-
 src/registrar/config/settings.py              |   2 +-
 src/registrar/context_processors.py           |  26 +-
 src/registrar/templates/401.html              |   4 +-
 src/registrar/templates/403.html              |   4 +-
 src/registrar/templates/404.html              |   4 +-
 src/registrar/templates/500.html              |   4 +-
 src/registrar/templates/admin/app_list.html   |   2 +-
 src/registrar/templates/admin/fieldset.html   |   2 +-
 .../templates/admin/transfer_user.html        |   2 +-
 src/registrar/templates/base.html             |   8 +-
 src/registrar/templates/dashboard_base.html   |   2 +-
 .../django/admin/includes/details_button.html |   2 +-
 .../admin/includes/domain_fieldset.html       |   2 +-
 .../admin/multiple_choice_list_filter.html    |   4 +-
 src/registrar/templates/domain_base.html      |   6 +-
 .../templates/domain_request_form.html        |   6 +-
 .../templates/domain_request_intro.html       |  63 ++-
 .../domain_request_withdraw_confirmation.html |  18 +-
 src/registrar/templates/domain_sidebar.html   |   2 +-
 src/registrar/templates/home.html             |   4 +-
 .../templates/includes/banner-error.html      |   2 +-
 .../templates/includes/banner-info.html       |   2 +-
 .../includes/banner-non-production-alert.html |   2 +-
 .../includes/banner-service-disruption.html   |   2 +-
 .../templates/includes/banner-site-alert.html |   2 +-
 .../includes/banner-system-outage.html        |   2 +-
 .../templates/includes/banner-warning.html    |   2 +-
 .../domain_request_status_manage.html         | 424 +++++++++---------
 .../includes/domain_requests_table.html       |   6 +-
 .../templates/includes/domains_table.html     |   6 +-
 src/registrar/templates/includes/footer.html  |  10 +-
 .../templates/includes/header_basic.html      |   2 +-
 .../templates/includes/header_extended.html   |   4 +-
 .../templates/includes/members_table.html     |   2 +-
 .../includes/request_status_manage.html       | 416 +++++++++--------
 .../templates/includes/required_fields.html   |   2 +-
 src/registrar/templates/portfolio_base.html   |  25 +-
 src/registrar/templates/profile.html          | 156 ++++---
 43 files changed, 632 insertions(+), 690 deletions(-)

diff --git a/src/registrar/assets/src/sass/_theme/_admin.scss b/src/registrar/assets/src/sass/_theme/_admin.scss
index 5bb523cac..58ce1e4df 100644
--- a/src/registrar/assets/src/sass/_theme/_admin.scss
+++ b/src/registrar/assets/src/sass/_theme/_admin.scss
@@ -176,16 +176,7 @@ 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,
diff --git a/src/registrar/assets/src/sass/_theme/_alerts.scss b/src/registrar/assets/src/sass/_theme/_alerts.scss
index b27fa8806..9579cc057 100644
--- a/src/registrar/assets/src/sass/_theme/_alerts.scss
+++ b/src/registrar/assets/src/sass/_theme/_alerts.scss
@@ -1,18 +1,21 @@
 @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);
+  }
+}
 
-/*----------------
-   Alert Layout
------------------*/
+.usa-alert__text.measure-none {
+  max-width: measure(none);
+}
 
 // The icon was off center for some reason
 // Fixes that issue
-@include at-media(desktop) {
-  // NOTE: !important is used because _font.scss overrides this
-  .usa-alert__body--widescreen {
-    max-width: $widescreen-max-width !important;
-  }
+@media (min-width: 64em){
   .usa-alert--warning{
     .usa-alert__body::before {
       left: 1rem !important;
@@ -21,29 +24,13 @@
   .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;
-  }
 }
 
-/*----------------
-   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;
-  }
+// NOTE: !important is used because _font.scss overrides this
+.usa-alert__body--widescreen {
+  max-width: $widescreen-max-width !important;
 }
 
-/*----------------
-  Alert Coloring
------------------*/
 .usa-site-alert--hot-pink {
   .usa-alert {
     background-color: $hot-pink;
@@ -60,4 +47,3 @@
     background-color: color('base-darkest');
   }
 }
-
diff --git a/src/registrar/assets/src/sass/_theme/_base.scss b/src/registrar/assets/src/sass/_theme/_base.scss
index 23f6b6978..62f9f436e 100644
--- a/src/registrar/assets/src/sass/_theme/_base.scss
+++ b/src/registrar/assets/src/sass/_theme/_base.scss
@@ -2,8 +2,6 @@
 @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. */
@@ -254,15 +252,6 @@ 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;
 }
@@ -276,8 +265,4 @@ abbr[title] {
   margin: 0;
   height: 1.5em;
   width: 1.5em;
-}
-
-.maxw-fit-content {
-  max-width: fit-content;
 }
\ No newline at end of file
diff --git a/src/registrar/assets/src/sass/_theme/_containers.scss b/src/registrar/assets/src/sass/_theme/_containers.scss
index 24ad480f2..7473615ad 100644
--- a/src/registrar/assets/src/sass/_theme/_containers.scss
+++ b/src/registrar/assets/src/sass/_theme/_containers.scss
@@ -6,21 +6,3 @@
 .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;
-}
\ No newline at end of file
diff --git a/src/registrar/assets/src/sass/_theme/_header.scss b/src/registrar/assets/src/sass/_theme/_header.scss
index ffb880a7b..53eab90d8 100644
--- a/src/registrar/assets/src/sass/_theme/_header.scss
+++ b/src/registrar/assets/src/sass/_theme/_header.scss
@@ -110,8 +110,8 @@
             }
         }
         .usa-nav__secondary {
-            right: 1rem;
-            padding-right: $widescreen-x-padding;
+            // I don't know why USWDS has this at 2 rem, which puts it out of alignment
+            right: 3rem;
             color: color('white');
             bottom: 4.3rem;
             .usa-nav-link,
diff --git a/src/registrar/config/settings.py b/src/registrar/config/settings.py
index 0111245a1..050950c9b 100644
--- a/src/registrar/config/settings.py
+++ b/src/registrar/config/settings.py
@@ -251,7 +251,7 @@
                 "registrar.context_processors.org_user_status",
                 "registrar.context_processors.add_path_to_context",
                 "registrar.context_processors.portfolio_permissions",
-                "registrar.context_processors.is_widescreen_centered",
+                "registrar.context_processors.is_widescreen_mode",
             ],
         },
     },
diff --git a/src/registrar/context_processors.py b/src/registrar/context_processors.py
index b3d9c3727..7230b04c6 100644
--- a/src/registrar/context_processors.py
+++ b/src/registrar/context_processors.py
@@ -109,21 +109,31 @@ def portfolio_permissions(request):
         return portfolio_context
 
 
-def is_widescreen_centered(request):
-    include_paths = [
+def is_widescreen_mode(request):
+    widescreen_paths = []  # If this list is meant to include specific paths, populate it.
+    portfolio_widescreen_paths = [
         "/domains/",
         "/requests/",
-        "/members/",
+        "/request/",
+        "/no-organization-requests/",
+        "/no-organization-domains/",
+        "/domain-request/",
     ]
+    # 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/",
     ]
 
-    is_excluded = any(exclude_path in request.path for exclude_path in exclude_paths)
+    # 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 == "/"
 
-    # 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 == "/"
+    # 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)
+    )
 
     # Return a dictionary with the widescreen mode status.
-    return {"is_widescreen_centered": is_widescreen_centered and not is_excluded}
+    return {"is_widescreen_mode": is_widescreen or is_portfolio_widescreen}
diff --git a/src/registrar/templates/401.html b/src/registrar/templates/401.html
index 7698c4f82..d7c7f83ae 100644
--- a/src/registrar/templates/401.html
+++ b/src/registrar/templates/401.html
@@ -5,8 +5,8 @@
 {% block title %}{% translate "Unauthorized | " %}{% endblock %}
 
 {% block content %}
-<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 %}"> 
+<main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen{% endif %}">
+  <div class="grid-row grow-gap"> 
     <div class="tablet:grid-col-6 usa-prose margin-bottom-3">
       <h1>
         {% translate "You are not authorized to view this page" %}
diff --git a/src/registrar/templates/403.html b/src/registrar/templates/403.html
index a04453fe9..999d5f98e 100644
--- a/src/registrar/templates/403.html
+++ b/src/registrar/templates/403.html
@@ -5,8 +5,8 @@
 {% block title %}{% translate "Forbidden | " %}{% endblock %}
 
 {% block content %}
-<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 %}"> 
+<main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen{% endif %}">
+  <div class="grid-row grow-gap"> 
     <div class="tablet:grid-col-6 usa-prose margin-bottom-3">
       <h1>
         {% translate "You're not authorized to view this page." %}
diff --git a/src/registrar/templates/404.html b/src/registrar/templates/404.html
index 2bf9ecf02..471575558 100644
--- a/src/registrar/templates/404.html
+++ b/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 grid-container--widescreen">
-  <div class="grid-row grid-gap {% if not is_widescreen_centered %}max-width--grid-container{% endif %}">
+<main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen{% endif %}">
+  <div class="grid-row grid-gap">
     <div class="tablet:grid-col-6 usa-prose margin-bottom-3">
       <h1>
         {% translate "We couldn’t find that page" %}
diff --git a/src/registrar/templates/500.html b/src/registrar/templates/500.html
index fad909ddb..a0663816b 100644
--- a/src/registrar/templates/500.html
+++ b/src/registrar/templates/500.html
@@ -5,8 +5,8 @@
 {% block title %}{% translate "Server error | " %}{% endblock %}
 
 {% block content %}
-<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 %}">
+<main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen{% endif %}">
+  <div class="grid-row grid-gap">
     <div class="tablet:grid-col-6 usa-prose margin-bottom-3">
       <h1>
         {% translate "We're having some trouble." %}
diff --git a/src/registrar/templates/admin/app_list.html b/src/registrar/templates/admin/app_list.html
index aaf3dc423..49fb59e79 100644
--- a/src/registrar/templates/admin/app_list.html
+++ b/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 %}
diff --git a/src/registrar/templates/admin/fieldset.html b/src/registrar/templates/admin/fieldset.html
index 20b76217b..40cd98ca8 100644
--- a/src/registrar/templates/admin/fieldset.html
+++ b/src/registrar/templates/admin/fieldset.html
@@ -61,7 +61,7 @@ <h2>{{ fieldset.name }}</h2>
                     {% 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 %}
diff --git a/src/registrar/templates/admin/transfer_user.html b/src/registrar/templates/admin/transfer_user.html
index 61444b173..3ba136b93 100644
--- a/src/registrar/templates/admin/transfer_user.html
+++ b/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 %}
diff --git a/src/registrar/templates/base.html b/src/registrar/templates/base.html
index dd6417ccb..de257f52c 100644
--- a/src/registrar/templates/base.html
+++ b/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 usa-banner__inner--widescreen padding-x--widescreen">
+        <div class="usa-banner__inner {% if is_widescreen_mode %} usa-banner__inner--widescreen {% endif %}">
           <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 padding-x--widescreen margin-x-0" id="gov-banner-default">
+      <div class="usa-banner__content usa-accordion__content" 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" class="wrapper--padding-top-6">
+  <div id="wrapper">
   {% 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 %}
diff --git a/src/registrar/templates/dashboard_base.html b/src/registrar/templates/dashboard_base.html
index b5c2cf6a5..6dd2ce8fd 100644
--- a/src/registrar/templates/dashboard_base.html
+++ b/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 %}
diff --git a/src/registrar/templates/django/admin/includes/details_button.html b/src/registrar/templates/django/admin/includes/details_button.html
index 65c6d768b..73748f170 100644
--- a/src/registrar/templates/django/admin/includes/details_button.html
+++ b/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 %}
diff --git a/src/registrar/templates/django/admin/includes/domain_fieldset.html b/src/registrar/templates/django/admin/includes/domain_fieldset.html
index c621deaac..d5f5bc1af 100644
--- a/src/registrar/templates/django/admin/includes/domain_fieldset.html
+++ b/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 %}
diff --git a/src/registrar/templates/django/admin/multiple_choice_list_filter.html b/src/registrar/templates/django/admin/multiple_choice_list_filter.html
index 167059594..66643f4ec 100644
--- a/src/registrar/templates/django/admin/multiple_choice_list_filter.html
+++ b/src/registrar/templates/django/admin/multiple_choice_list_filter.html
@@ -6,14 +6,14 @@ <h3>{% blocktrans with filter_title=title %} By {{ filter_title }} {% endblocktr
 <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">
diff --git a/src/registrar/templates/domain_base.html b/src/registrar/templates/domain_base.html
index b65e9399b..9f7e8d2e6 100644
--- a/src/registrar/templates/domain_base.html
+++ b/src/registrar/templates/domain_base.html
@@ -4,10 +4,10 @@
 {% block title %}{{ domain.name }} | {% endblock %}
 
 {% block content %}
-<div class="grid-container grid-container--widescreen">
+<div class="grid-container">
 
-  <div class="grid-row grid-gap {% if not is_widescreen_centered %}max-width--grid-container{% endif %}">
-    <div class="tablet:grid-col-3 ">
+  <div class="grid-row grid-gap">
+    <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"
       >
diff --git a/src/registrar/templates/domain_request_form.html b/src/registrar/templates/domain_request_form.html
index 59a2474b8..2c2716a3c 100644
--- a/src/registrar/templates/domain_request_form.html
+++ b/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 grid-container--widescreen">
-  <div class="grid-row grid-gap {% if not is_widescreen_centered %}max-width--grid-container{% endif %}">
+<div class="grid-container">
+  <div class="grid-row grid-gap">
     <div class="tablet:grid-col-3">
       {% include 'domain_request_sidebar.html' %}
     </div>
     <div class="tablet:grid-col-9">
-      <main id="main-content" class="register-form-step">
+      <main id="main-content" class="grid-container 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 %}
diff --git a/src/registrar/templates/domain_request_intro.html b/src/registrar/templates/domain_request_intro.html
index d66d019e6..dd5b7ec6e 100644
--- a/src/registrar/templates/domain_request_intro.html
+++ b/src/registrar/templates/domain_request_intro.html
@@ -4,42 +4,41 @@
 {% block title %} Start a request | {% endblock %}
 
 {% block content %}
-<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">
+<main id="main-content" class="grid-container">
+    <div class="grid-col desktop:grid-offset-2 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 %}
diff --git a/src/registrar/templates/domain_request_withdraw_confirmation.html b/src/registrar/templates/domain_request_withdraw_confirmation.html
index cc426eeaf..e1a5f0c2a 100644
--- a/src/registrar/templates/domain_request_withdraw_confirmation.html
+++ b/src/registrar/templates/domain_request_withdraw_confirmation.html
@@ -8,20 +8,18 @@
 {% endblock wrapperdiv %}
 
 {% block content %}
-<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">
-    
+<div class="grid-container">
+<div class="grid-col desktop:grid-offset-2 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 %}
diff --git a/src/registrar/templates/domain_sidebar.html b/src/registrar/templates/domain_sidebar.html
index 99ca1bfb7..289f544ce 100644
--- a/src/registrar/templates/domain_sidebar.html
+++ b/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 %}
diff --git a/src/registrar/templates/home.html b/src/registrar/templates/home.html
index de4d9e712..b1c3775df 100644
--- a/src/registrar/templates/home.html
+++ b/src/registrar/templates/home.html
@@ -5,12 +5,12 @@
 {% block title %} Home | {% endblock %}
 
 {% block content %}
-<main id="main-content" class="grid-container grid-container--widescreen">
+<main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen{% endif %}">
 {% if user.is_authenticated %}
 {# the entire logged in page goes here #}
 
 {% block homepage_content %}
-  <div class="tablet:grid-col-11 desktop:grid-col-10 {% if is_widescreen_centered %}tablet:grid-offset-1{% endif %}">
+  <div class="tablet:grid-col-11 desktop:grid-col-10 tablet:grid-offset-1">
     {% block messages %}
       {% include "includes/form_messages.html" %}
     {% endblock %}
diff --git a/src/registrar/templates/includes/banner-error.html b/src/registrar/templates/includes/banner-error.html
index 10582e268..7b5c32ed1 100644
--- a/src/registrar/templates/includes/banner-error.html
+++ b/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 usa-alert__body--widescreen">
+      <div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
         <h4 class="usa-alert__heading">
           Header
         </h4>
diff --git a/src/registrar/templates/includes/banner-info.html b/src/registrar/templates/includes/banner-info.html
index cf379c50d..e5d54e483 100644
--- a/src/registrar/templates/includes/banner-info.html
+++ b/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 usa-alert__body--widescreen">
+      <div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
         <h4 class="usa-alert__heading">
           Header
         </h4>
diff --git a/src/registrar/templates/includes/banner-non-production-alert.html b/src/registrar/templates/includes/banner-non-production-alert.html
index 7b66d543b..61d4eed51 100644
--- a/src/registrar/templates/includes/banner-non-production-alert.html
+++ b/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 %} usa-alert__body--widescreen">
+        <div class="usa-alert__body {% if add_body_class %}{{ add_body_class }}{% endif %} {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
             <p class="usa-alert__text maxw-none">
                 <strong>Attention:</strong> You are on a test site.
             </p>
diff --git a/src/registrar/templates/includes/banner-service-disruption.html b/src/registrar/templates/includes/banner-service-disruption.html
index 6ee4b976b..fc89ee65d 100644
--- a/src/registrar/templates/includes/banner-service-disruption.html
+++ b/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 usa-alert__body--widescreen">
+      <div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
         <h3 class="usa-alert__heading">
             Service disruption
         </h3>
diff --git a/src/registrar/templates/includes/banner-site-alert.html b/src/registrar/templates/includes/banner-site-alert.html
index 8dd657267..52256f46b 100644
--- a/src/registrar/templates/includes/banner-site-alert.html
+++ b/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 usa-alert__body--widescreen">
+      <div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
         <h3 class="usa-alert__heading">
             Header here
         </h3>
diff --git a/src/registrar/templates/includes/banner-system-outage.html b/src/registrar/templates/includes/banner-system-outage.html
index 60fc4eb03..911fa4487 100644
--- a/src/registrar/templates/includes/banner-system-outage.html
+++ b/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 usa-alert__body--widescreen">
+      <div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
         <h3 class="usa-alert__heading">
             System outage
         </h3>
diff --git a/src/registrar/templates/includes/banner-warning.html b/src/registrar/templates/includes/banner-warning.html
index 762d0b47c..6838aef7b 100644
--- a/src/registrar/templates/includes/banner-warning.html
+++ b/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 usa-alert__body--widescreen">
+      <div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
         <h4 class="usa-alert__heading">
           Header
         </h4>
diff --git a/src/registrar/templates/includes/domain_request_status_manage.html b/src/registrar/templates/includes/domain_request_status_manage.html
index 1c6ca081e..2a254df4b 100644
--- a/src/registrar/templates/includes/domain_request_status_manage.html
+++ b/src/registrar/templates/includes/domain_request_status_manage.html
@@ -1,238 +1,236 @@
 {% load custom_filters %}
 {% load static url_helpers %}
-<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 %}
+<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">
             {% if portfolio %}
-                {% url 'domain-requests' as url %}
+                <a href="{{ url }}" class="usa-breadcrumb__link"><span>Domain requests</span></a>
             {% else %}
-                {% url 'home' as url %}
+                <a href="{{ url }}" class="usa-breadcrumb__link"><span>Manage your domains</span></a>
             {% endif %}
-            <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 %}
+            </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 %}
 
-            {% 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">
-                {% 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>
-            {% 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}}
+        {% 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>
-            {% elif DomainRequest.status == statuses.WITHDRAWN %}
+        </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">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}}
+                <b class="review__step__name">Created by:</b> {{DomainRequest.creator.email|default:DomainRequest.creator.get_formatted_name }}
             </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 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 %}
-            {% 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>
-                </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 %}
-            {% 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 %}
+        {% 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">
+            {% 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>
+        {% 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>
+            </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 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%}
 
-            {% 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 %}
+            {% if DomainRequest.federally_recognized_tribe %}
+                <p>Federally-recognized tribe</p>
             {% endif %}
 
-            {% if DomainRequest.purpose %}
-                {% include "includes/summary_item.html" with title='Purpose of your domain' value=DomainRequest.purpose heading_level=heading_level %}
+            {% if DomainRequest.state_recognized_tribe %}
+                <p>State-recognized tribe</p>
             {% endif %}
 
-            {% if DomainRequest.creator %}
-                {% include "includes/summary_item.html" with title='Your contact information' value=DomainRequest.creator contact='true' heading_level=heading_level %}
-            {% endif %}
+        {% 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 %}
+        {% 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 %}
 
-            {# 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>
+        {% 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>
 </main>
\ No newline at end of file
diff --git a/src/registrar/templates/includes/domain_requests_table.html b/src/registrar/templates/includes/domain_requests_table.html
index c48e2c9a6..56cdc2cec 100644
--- a/src/registrar/templates/includes/domain_requests_table.html
+++ b/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 @@ <h2 id="domain-requests-header" class="display-inline-block">Domain requests</h2
         <span id="portfolio-js-value" data-portfolio="{{ portfolio.id }}"></span>
         {% endif %}
 
-        <div class="section-outlined__search section-outlined__search--widescreen {% if portfolio %}mobile:grid-col-12 desktop:grid-col-6{% 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 %}">
             <section aria-label="Domain requests search component" class="margin-top-2">
                 <form class="usa-search usa-search--small" method="POST" role="search">
                     {% csrf_token %}
diff --git a/src/registrar/templates/includes/domains_table.html b/src/registrar/templates/includes/domains_table.html
index f9f8b4c9f..15becea7a 100644
--- a/src/registrar/templates/includes/domains_table.html
+++ b/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 usa-alert__body--widescreen">
+    <div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
       <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 @@ <h2 id="domains-header" class="display-inline-block">Domains</h2>
       <!-- Embedding the portfolio value in a data attribute -->
       <span id="portfolio-js-value" data-portfolio="{{ portfolio.id }}"></span>
     {% endif %}
-    <div class="section-outlined__search section-outlined__search--widescreen {% if portfolio %}mobile:grid-col-12 desktop:grid-col-6{% 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 %}">
       <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 @@ <h2 id="domains-header" class="display-inline-block">Domains</h2>
   {% 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 usa-alert__body--widescreen">
+      <div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
         <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>
diff --git a/src/registrar/templates/includes/footer.html b/src/registrar/templates/includes/footer.html
index 92ff09407..74ef3dc50 100644
--- a/src/registrar/templates/includes/footer.html
+++ b/src/registrar/templates/includes/footer.html
@@ -3,7 +3,7 @@
 
 <footer class="usa-footer">
     <div class="usa-footer__secondary-section">
-      <div class="grid-container grid-container--widescreen">
+      <div class="grid-container {% if is_widescreen_mode %} grid-container--widescreen{% endif %}">
         <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 maxw-none">
+            <address class="usa-footer__address">
               <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 usa-identifier__container--widescreen padding-x--widescreen">
+      <div class="usa-identifier__container {% if is_widescreen_mode %} usa-identifier__container--widescreen {% endif %}">
         <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 usa-identifier__container--widescreen padding-x--widescreen">
+      <div class="usa-identifier__container {% if is_widescreen_mode %} usa-identifier__container--widescreen {% endif %}">
         <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 usa-identifier__container--widescreen padding-x--widescreen">
+      <div class="usa-identifier__container {% if is_widescreen_mode %} usa-identifier__container--widescreen {% endif %}">
         <div class="usa-identifier__usagov-description">
           Looking for U.S. government information and services?
         </div>
diff --git a/src/registrar/templates/includes/header_basic.html b/src/registrar/templates/includes/header_basic.html
index 9bed4929b..3f8b4a2fb 100644
--- a/src/registrar/templates/includes/header_basic.html
+++ b/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 usa-nav-container--widescreen padding-x--widescreen">
+  <div class="usa-nav-container {% if is_widescreen_mode %} usa-nav-container--widescreen {% endif %}">
     <div class="usa-navbar">
         {% include "includes/gov_extended_logo.html" with logo_clickable=logo_clickable %}
       <button type="button" class="usa-menu-btn">Menu</button>
diff --git a/src/registrar/templates/includes/header_extended.html b/src/registrar/templates/includes/header_extended.html
index 1e40a508d..831b8b958 100644
--- a/src/registrar/templates/includes/header_extended.html
+++ b/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 usa-navbar--widescreen padding-x--widescreen">
+    <div class="usa-navbar {% if is_widescreen_mode %} usa-navbar--widescreen {% endif %}">
         {% 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 usa-nav__inner--widescreen padding-x--widescreen">
+    <div class="usa-nav__inner {% if is_widescreen_mode %} usa-nav__inner--widescreen {% endif %}">
         <button type="button" class="usa-nav__close">
             <img src="{%static 'img/usa-icons/close.svg'%}" role="img" alt="Close" />
         </button>
diff --git a/src/registrar/templates/includes/members_table.html b/src/registrar/templates/includes/members_table.html
index 19320a4ae..d141dbaa6 100644
--- a/src/registrar/templates/includes/members_table.html
+++ b/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 section-outlined__search--widescreen">
+      <div class="section-outlined__search mobile:grid-col-12 desktop:grid-col-6 {% if is_widescreen_mode %} section-outlined__search--widescreen {% endif %}">
         <section aria-label="Members search component" class="margin-top-2">
           <form class="usa-search usa-search--small" method="POST" role="search">
             {% csrf_token %}
diff --git a/src/registrar/templates/includes/request_status_manage.html b/src/registrar/templates/includes/request_status_manage.html
index 502ac0569..fc2fd8f12 100644
--- a/src/registrar/templates/includes/request_status_manage.html
+++ b/src/registrar/templates/includes/request_status_manage.html
@@ -1,242 +1,240 @@
 {% load custom_filters %}
 {% load static url_helpers %}
-<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 %}
+<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">
             {% if portfolio %}
-                {% url 'domain-requests' as url %}
+                <a href="{{ url }}" class="usa-breadcrumb__link"><span>Domain requests</span></a>
             {% 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">
-                {% 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 %}
+                <a href="{{ url }}" class="usa-breadcrumb__link"><span>Manage your domains</span></a>
             {% 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">
-                {% 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>
-            {% 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}}
+            </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>
-            {% elif DomainRequest.status == statuses.WITHDRAWN %}
+        </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">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}}
+                <b class="review__step__name">Created by:</b> {{DomainRequest.creator.email|default:DomainRequest.creator.get_formatted_name }}
             </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 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 %}
-            {% 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>
-                </p>
-            {% endif %}
-            {% endblock modify_request %}
-        </div>
+        {% 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%}
+        {% 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">
+            {% 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>
+        {% 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 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 %}
+        {% 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.tribe_name %}
-                    {% include "includes/summary_item.html" with title='Tribal government' value=DomainRequest.tribe_name heading_level=heading_level %}
+        {% 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.federally_recognized_tribe %}
-                        <p>Federally-recognized tribe</p>
-                    {% endif %}
+    <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.state_recognized_tribe %}
-                        <p>State-recognized tribe</p>
-                    {% endif %}
+            {% 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.get_federal_type_display %}
-                    {% include "includes/summary_item.html" with title='Federal government branch' value=DomainRequest.get_federal_type_display heading_level=heading_level %}
+                {% if DomainRequest.state_recognized_tribe %}
+                    <p>State-recognized tribe</p>
                 {% 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 %}
+            {% endif %}
 
-                {% if DomainRequest.organization_name %}
-                    {% include "includes/summary_item.html" with title='Organization' value=DomainRequest  address='true' heading_level=heading_level %}
-                {% 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.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.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.senior_official %}
-                    {% include "includes/summary_item.html" with title='Senior official' value=DomainRequest.senior_official contact='true' heading_level=heading_level %}
-                {% endif %}
+            {% if DomainRequest.organization_name %}
+                {% include "includes/summary_item.html" with title='Organization' value=DomainRequest  address='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.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.requested_domain %}
-                    {% include "includes/summary_item.html" with title='.gov domain' value=DomainRequest.requested_domain 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.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.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.purpose %}
-                    {% include "includes/summary_item.html" with title='Purpose of your domain' value=DomainRequest.purpose 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.creator %}
-                    {% include "includes/summary_item.html" with title='Your contact information' value=DomainRequest.creator contact='true' 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.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 %}
+            {% if DomainRequest.purpose %}
+                {% include "includes/summary_item.html" with title='Purpose of your domain' value=DomainRequest.purpose 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>
+            {% 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>
 </main>
\ No newline at end of file
diff --git a/src/registrar/templates/includes/required_fields.html b/src/registrar/templates/includes/required_fields.html
index a9d860f24..be0395979 100644
--- a/src/registrar/templates/includes/required_fields.html
+++ b/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>
diff --git a/src/registrar/templates/portfolio_base.html b/src/registrar/templates/portfolio_base.html
index 4cafd3f84..c2a60b7ba 100644
--- a/src/registrar/templates/portfolio_base.html
+++ b/src/registrar/templates/portfolio_base.html
@@ -4,29 +4,26 @@
   <div id="wrapper" class="{% block wrapper_class %}wrapper--padding-top-6{% endblock %}">
     {% block content %}
         
-        <main class="grid-container grid-container--widescreen">
+        <main class="grid-container {% if is_widescreen_mode %} grid-container--widescreen{% endif %}">
             {% if user.is_authenticated %}
             {# the entire logged in page goes here #}
             
-            <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 %}">
+            <div class="tablet:grid-col-11 desktop:grid-col-10 tablet:grid-offset-1">
                 {% 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>
-           
+            </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 %}
         </main>
 
       {% endblock content%}
diff --git a/src/registrar/templates/profile.html b/src/registrar/templates/profile.html
index cbd2811d1..7d365d9c1 100644
--- a/src/registrar/templates/profile.html
+++ b/src/registrar/templates/profile.html
@@ -11,92 +11,90 @@
 {% endblock %}
 
 {% block content %}
-<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 %}
+<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 %}
 
-            {% 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">
+    {% 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
+                                >
                                 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
-                                        >
-                                        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>
+                                </button>
+                            </li>     
+                        </ul>
                     </div>
                 </div>
-            {% endif %}
+                <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>
+    {% endif %}
 
-        
+   
 
-        {% endblock content %}
+{% endblock content %}
 
-        {% block content_bottom %}
-        {% include "includes/profile_form.html" with form=form %}
-        </div>
-    </div>
+{% block content_bottom %}
+  {% include "includes/profile_form.html" with form=form %}
+  </div>
 </main>
 {% endblock content_bottom %}