Merge pull request #3284 from cisagov/nl/3074-responsive-layouts-widescreen

(restored PR) #3074 - Change (margin/padding) responsive layouts - [NL]

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

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

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

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

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

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

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

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

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

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

src/registrar/config/settings.py

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

src/registrar/context_processors.py

@@ -109,31 +109,21 @@ def portfolio_permissions(request):
         return portfolio_context
 
 
-def is_widescreen_mode(request):
+def is_widescreen_centered(request):
-    widescreen_paths = []  # If this list is meant to include specific paths, populate it.
+    include_paths = [
-    portfolio_widescreen_paths = [
         "/domains/",
         "/requests/",
-        "/request/",
+        "/members/",
-        "/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/",
     ]
 
-    # Check if the current path matches a widescreen path or the root path.
+    is_excluded = any(exclude_path in request.path for exclude_path in exclude_paths)
-    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.
+    # Check if the current path matches a path in included_paths or the root path.
-    is_portfolio_widescreen = (
+    is_widescreen_centered = any(path in request.path for path in include_paths) or request.path == "/"
-        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_mode": is_widescreen or is_portfolio_widescreen}
+    return {"is_widescreen_centered": is_widescreen_centered and not is_excluded}

src/registrar/templates/401.html

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

src/registrar/templates/403.html

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

src/registrar/templates/404.html

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

src/registrar/templates/500.html

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

src/registrar/templates/admin/app_list.html

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

src/registrar/templates/admin/fieldset.html

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

src/registrar/templates/admin/transfer_user.html

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

src/registrar/templates/base.html

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

src/registrar/templates/dashboard_base.html

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

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

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

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

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

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

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

src/registrar/templates/domain_base.html

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

src/registrar/templates/domain_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">
+<div class="grid-container grid-container--widescreen">
-  <div class="grid-row grid-gap">
+  <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>

src/registrar/templates/domain_request_intro.html

@@ -4,7 +4,8 @@
 {% block title %} Start a request | {% endblock %}
 
 {% block content %}
-<main id="main-content" class="grid-container">
+<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-offset-2 desktop:grid-col-8">
 
       <form class="usa-form usa-form--extra-large" method="post" novalidate>

src/registrar/templates/domain_request_withdraw_confirmation.html

@@ -8,7 +8,8 @@
 {% endblock wrapperdiv %}
 
 {% block content %}
-<div class="grid-container">
+<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 desktop:grid-offset-2 desktop:grid-col-8">
     
 
@@ -20,6 +21,7 @@
       <a href="{% url 'domain-request-status' DomainRequest.id %}">Cancel</a></p>
 
     </div>
+  </div>
 
 </div>
 {% endblock %}

src/registrar/templates/domain_sidebar.html

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

src/registrar/templates/home.html

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/registrar/templates/includes/domain_request_status_manage.html

@@ -1,236 +0,0 @@
-{% 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">
-            {% 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 %}
-
-        {% 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>
-
-    <div class="grid-col desktop:grid-offset-2 maxw-tablet">
-        {% block request_summary_header %}
-        <h2 class="text-primary-darker"> Summary of your domain request </h2> 
-        {% endblock request_summary_header%}
-
-        {% block request_summary %}
-        {% with heading_level='h3' %}
-        {% with org_type=DomainRequest.get_generic_org_type_display %}
-        {% include "includes/summary_item.html" with title='Type of organization' value=org_type heading_level=heading_level %}
-        {% endwith %}
-
-        {% if DomainRequest.tribe_name %}
-            {% include "includes/summary_item.html" with title='Tribal government' value=DomainRequest.tribe_name heading_level=heading_level %}
-
-            {% if DomainRequest.federally_recognized_tribe %}
-                <p>Federally-recognized tribe</p>
-            {% endif %}
-
-            {% if DomainRequest.state_recognized_tribe %}
-                <p>State-recognized tribe</p>
-            {% endif %}
-
-        {% endif %}
-
-        {% if DomainRequest.get_federal_type_display %}
-            {% include "includes/summary_item.html" with title='Federal government branch' value=DomainRequest.get_federal_type_display heading_level=heading_level %}
-        {% endif %}
-
-        {% if DomainRequest.is_election_board %}
-            {% with value=DomainRequest.is_election_board|yesno:"Yes,No,Incomplete" %}
-                {% include "includes/summary_item.html" with title='Election office' value=value heading_level=heading_level %}
-            {% endwith %}
-        {% endif %}
-
-        {% 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="header--body text-primary-dark margin-bottom-0">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="header--body text-primary-dark margin-bottom-0">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>

src/registrar/templates/includes/domain_requests_table.html

@@ -13,7 +13,7 @@
         <span id="portfolio-js-value" data-portfolio="{{ portfolio.id }}"></span>
         {% endif %}
 
-        <div class="section-outlined__search {% if portfolio %} mobile:grid-col-12 desktop:grid-col-6{% endif %} {% if is_widescreen_mode %} section-outlined__search--widescreen {% endif %}">
+        <div class="section-outlined__search section-outlined__search--widescreen {% if portfolio %}mobile:grid-col-12 desktop:grid-col-6{% endif %}">
             <section aria-label="Domain requests search component" class="margin-top-2">
                 <form class="usa-search usa-search--small" method="POST" role="search">
                     {% csrf_token %}

src/registrar/templates/includes/domains_table.html

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

src/registrar/templates/includes/footer.html

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

src/registrar/templates/includes/header_basic.html

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

src/registrar/templates/includes/header_extended.html

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

src/registrar/templates/includes/members_table.html

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

src/registrar/templates/includes/request_status_manage.html

@@ -1,7 +1,8 @@
 {% load custom_filters %}
 {% load static url_helpers %}
-<main id="main-content" class="grid-container">
+<main id="main-content" class="grid-container grid-container--widescreen">
-    <div class="grid-col desktop:grid-offset-2 desktop:grid-col-8">
+    <div class="{% if not is_widescreen_centered %}max-width--grid-container{% endif %}">
+        <div class="grid-col desktop:grid-col-8 desktop:grid-offset-2 ">
             {% block breadcrumb %}
             {% if portfolio %}
                 {% url 'domain-requests' as url %}
@@ -139,7 +140,7 @@
             {% endblock modify_request %}
         </div>
 
-    <div class="grid-col desktop:grid-offset-2 maxw-tablet">
+        <div class="grid-col maxw-fit-content desktop:grid-offset-2 ">
             {% block request_summary_header %}
             <h2 class="text-primary-darker"> Summary of your domain request </h2> 
             {% endblock request_summary_header%}
@@ -237,4 +238,5 @@
     {% endif %}
     {% endblock request_summary%}
         </div>
+    </div>
 </main>

src/registrar/templates/includes/senior_official.html

@@ -1,5 +1,9 @@
 {% load static field_helpers url_helpers %}
 
+<!-- Form messages -->
+{% block messages %}
+{% include "includes/form_messages.html" %}
+{% endblock messages%}
 {% if can_edit %}
     {% include "includes/form_errors.html" with form=form %}
 {% endif %}

src/registrar/templates/portfolio_base.html

@@ -4,14 +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 grid-container--widescreen">
             {% if user.is_authenticated %}
             {# the entire logged in page goes here #}
             
-            <div class="tablet:grid-col-11 desktop:grid-col-10 tablet:grid-offset-1">
+            <div class="grid-row {% if not is_widescreen_centered %}max-width--grid-container{% endif %}">
-                {% block messages %}
+              <div class="tablet:grid-col-11 desktop:grid-col-10 {% if is_widescreen_centered %}tablet:grid-offset-1{% endif %}">
-                    {% include "includes/form_messages.html" %}
-                {% endblock %}
             
                 {% block portfolio_content %}{% endblock %}
             
@@ -24,6 +22,8 @@
               </a></p>
               
               {% endif %}
+            </div>
+           
         </main>
 
       {% endblock content%}

src/registrar/templates/portfolio_domains.html

@@ -9,9 +9,11 @@
 {% endblock %}
 
 {% block portfolio_content %}
+
+<!-- Form messages -->
 {% block messages %}
   {% include "includes/form_messages.html" %}
-{% endblock %}
+{% endblock messages%}
 
 <div id="main-content">
     <h1 id="domains-header">Domains</h1>

src/registrar/templates/portfolio_member.html

@@ -8,7 +8,12 @@ Organization member
 {% load static %}
 
 {% block portfolio_content %}
-<div id="main-content">
+<div id="main-content" class="{% if not is_widescreen_centered %}desktop:grid-offset-2{% endif %}">
+  <!-- Form messages -->
+  {% include "includes/form_errors.html" with form=form %}
+  {% block messages %}
+    {% include "includes/form_messages.html" %}
+  {% endblock messages%}
 
   {% url 'members' as url %}
   <nav class="usa-breadcrumb padding-top-0 margin-bottom-3" aria-label="Portfolio member breadcrumb">

src/registrar/templates/portfolio_member_domains.html

@@ -6,7 +6,12 @@
 {% load static %}
 
 {% block portfolio_content %}
-<div id="main-content">
+<div id="main-content" class=" {% if not is_widescreen_centered %}desktop:grid-offset-2{% endif %}">
+    <!-- Form messages -->
+    {% include "includes/form_errors.html" with form=form %}
+    {% block messages %}
+      {% include "includes/form_messages.html" %}
+    {% endblock messages%}
 
     {% url 'members' as url %}
     {% if portfolio_permission %}

src/registrar/templates/portfolio_member_domains_edit.html

@@ -6,7 +6,12 @@
 {% load static %}
 
 {% block portfolio_content %}
-<div id="main-content">
+<div id="main-content" class=" {% if not is_widescreen_centered %}desktop:grid-offset-2{% endif %}">
+    <!-- Form messages -->
+    {% include "includes/form_errors.html" with form=form %}
+    {% block messages %}
+      {% include "includes/form_messages.html" %}
+    {% endblock messages%}
 
     {% url 'members' as url %}
     {% if portfolio_permission %}

src/registrar/templates/portfolio_member_permissions.html

@@ -11,6 +11,13 @@
 {% block portfolio_content %}
 {% include "includes/form_errors.html" with form=form %}
 
+<div id="main-content" class=" {% if not is_widescreen_centered %}desktop:grid-offset-2{% endif %}">
+  <!-- Form messages -->
+  {% include "includes/form_errors.html" with form=form %}
+  {% block messages %}
+    {% include "includes/form_messages.html" %}
+  {% endblock messages%}
+  
   <!-- Navigation breadcrumbs -->
   <nav class="usa-breadcrumb padding-top-0 bg-gray-1" aria-label="Domain request breadcrumb">
     <ol class="usa-breadcrumb__list">
@@ -129,4 +136,5 @@
       <button type="submit" class="usa-button">Update Member</button>
     </div>
   </form>
+</div>
 {% endblock portfolio_content%}

src/registrar/templates/portfolio_members.html

@@ -10,6 +10,11 @@
 
 {% block portfolio_content %}
 
+<!-- Form messages -->
+{% block messages %}
+  {% include "includes/form_messages.html" %}
+{% endblock messages%}
+
 <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">

src/registrar/templates/portfolio_members_add_new.html

@@ -10,7 +10,8 @@
 
 {% block portfolio_content %}
 
-<!-- Form mesages -->
+<div id="main-content" class=" {% if not is_widescreen_centered %}desktop:grid-offset-2{% endif %}">
+  <!-- Form messages -->
   {% include "includes/form_errors.html" with form=form %}
   {% block messages %}
     {% include "includes/form_messages.html" %}
@@ -171,6 +172,7 @@
           </button>
       </div>
   </div>
+</div>
 
 
 {% endblock portfolio_content%}

src/registrar/templates/portfolio_no_domains.html

@@ -4,8 +4,13 @@
 
 {% block title %} Domains | {% endblock %}
 
+<!-- Form messages -->
+{% block messages %}
+  {% include "includes/form_messages.html" %}
+{% endblock messages%}
+
 {% block portfolio_content %}
-<div id="main-content">
+<div id="main-content" class="{% if not is_widescreen_centered %}desktop:grid-offset-2{% endif %}">
     <h1 id="domains-header">Domains</h1>
     <section class="section-outlined">
         <div class="section-outlined__header margin-bottom-3">

src/registrar/templates/portfolio_no_requests.html

@@ -4,7 +4,13 @@
 
 {% block title %} Domain Requests | {% endblock %}
 
+<!-- Form messages -->
+{% block messages %}
+  {% include "includes/form_messages.html" %}
+{% endblock messages%}
+
 {% block portfolio_content %}
+<div id="main-content" class="{% if not is_widescreen_centered %}desktop:grid-offset-2{% endif %}">
     <h1 id="domains-header">Domain requests</h1>
     <section class="section-outlined">
         <div class="section-outlined__header margin-bottom-3">
@@ -27,4 +33,5 @@
             {% endif %}
         </div>
     </section>
+</div>
 {% endblock %}

src/registrar/templates/portfolio_organization.html

@@ -18,12 +18,11 @@
     </div>
 
     <div class="tablet:grid-col-9" id="main-content">
-
+        <!-- Form messages -->
+        {% include "includes/form_errors.html" with form=form %}
         {% block messages %}
           {% include "includes/form_messages.html" %}
-        {% endblock %}
+        {% endblock messages%}
-
-        {% include "includes/form_errors.html" with form=form %}
 
         <h1>Organization</h1>
 

src/registrar/templates/portfolio_requests.html

@@ -9,9 +9,11 @@
 {% endblock %}
 
 {% block portfolio_content %}
+
+<!-- Form messages -->
 {% block messages %}
   {% include "includes/form_messages.html" %}
-{% endblock %}
+{% endblock messages%}
 
 <div id="main-content">
     <h1 id="domain-requests-header" class="margin-bottom-1">Domain requests</h1>

src/registrar/templates/portfolio_senior_official.html

@@ -6,9 +6,6 @@
 {% load static %}
 
 {% block portfolio_content %}
-{% block messages %}
-  {% include "includes/form_messages.html" %}
-{% endblock %}
 
 <div class="grid-row grid-gap">
     <div class="tablet:grid-col-3">

src/registrar/templates/profile.html

@@ -11,8 +11,9 @@ Edit your User Profile |
 {% endblock %}
 
 {% block content %}
-<main id="main-content" class="grid-container">
+<main id="main-content" class="grid-container grid-container--widescreen">
-  <div class="grid-col desktop:grid-offset-2 desktop:grid-col-8">
+    <div class="{% if not is_widescreen_centered %}max-width--grid-container{% endif %}">
+        <div class="desktop:grid-col-8 desktop:grid-offset-2">
             {% if messages %}
             {% for message in messages %}
             <div class="usa-alert usa-alert--{{ message.tags }} usa-alert--slim margin-bottom-3">
@@ -95,6 +96,7 @@ Edit your User Profile |
         {% block content_bottom %}
         {% include "includes/profile_form.html" with form=form %}
         </div>
+    </div>
 </main>
 {% endblock content_bottom %}