Merge branch 'main' into za/3025-add-new-suborgs

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,

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

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;
 }
@@ -277,7 +266,3 @@ abbr[title] {
   height: 1.5em;
   width: 1.5em;
 }
-
-.maxw-fit-content {
-  max-width: fit-content;
-}

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;
-}

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

@@ -110,8 +110,8 @@
             }
         }
         .usa-nav__secondary {
-            right: 1rem;
+            // I don't know why USWDS has this at 2 rem, which puts it out of alignment
-            padding-right: $widescreen-x-padding;
+            right: 3rem;
             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_centered",
+                "registrar.context_processors.is_widescreen_mode",
             ],
         },
     },

src/registrar/context_processors.py

@@ -109,21 +109,31 @@ def portfolio_permissions(request):
         return portfolio_context
 
 
-def is_widescreen_centered(request):
+def is_widescreen_mode(request):
-    include_paths = [
+    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.
+    # Check if the user is an organization user and the path matches portfolio paths.
-    is_widescreen_centered = any(path in request.path for path in include_paths) or request.path == "/"
+    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}

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">
+<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="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" %}

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">
+<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="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." %}

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">
+<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="grid-row grid-gap">
     <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 grid-container--widescreen">
+<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="grid-row grid-gap">
     <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 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 %}

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 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="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"

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-container">
-  <div class="grid-row grid-gap {% if not is_widescreen_centered %}max-width--grid-container{% endif %}">
+  <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 %}

src/registrar/templates/domain_request_intro.html

@@ -4,9 +4,8 @@
 {% block title %} Start a request | {% endblock %}
 
 {% block content %}
-<main id="main-content" class="grid-container grid-container--widescreen">
+<main id="main-content" class="grid-container">
-    <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">
-      <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 %}

src/registrar/templates/domain_request_withdraw_confirmation.html

@@ -8,9 +8,8 @@
 {% endblock wrapperdiv %}
 
 {% block content %}
-<div class="grid-container grid-container--widescreen">
+<div class="grid-container">
-  <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">
-    <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>
@@ -21,7 +20,6 @@
   <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 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 %}

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>

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>

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>

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>

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>

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>

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>

src/registrar/templates/includes/domain_request_status_manage.html

@@ -1,8 +1,7 @@
 {% load custom_filters %}
 {% load static url_helpers %}
-<main id="main-content" class="grid-container grid-container--widescreen">
+<main id="main-content" class="grid-container">
-    <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">
-        <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 +139,7 @@
         {% endblock modify_request %}
     </div>
 
-        <div class="grid-col {% if is_widescreen_centered %}desktop:grid-offset-2 maxw-tablet{% 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%}
@@ -234,5 +233,4 @@
     {% endwith %}
     {% endblock request_summary%}
     </div>
-    </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 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 %}

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 @@
       <!-- 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 @@
   {% 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>

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>

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>

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>

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 %}

src/registrar/templates/includes/request_status_manage.html

@@ -1,8 +1,7 @@
 {% load custom_filters %}
 {% load static url_helpers %}
-<main id="main-content" class="grid-container grid-container--widescreen">
+<main id="main-content" class="grid-container">
-    <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">
-        <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 +139,7 @@
         {% endblock modify_request %}
     </div>
 
-        <div class="grid-col {% if is_widescreen_centered %}desktop:grid-offset-2 maxw-tablet{% 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%}
@@ -238,5 +237,4 @@
     {% endif %}
     {% endblock request_summary%}
     </div>
-    </div>
 </main>

src/registrar/templates/portfolio_base.html

@@ -4,12 +4,11 @@
   <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 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 %}
@@ -25,8 +24,6 @@
             </a></p>
             
             {% endif %}
-            </div>
-           
         </main>
 
       {% endblock content%}

src/registrar/templates/profile.html

@@ -11,9 +11,8 @@ Edit your User Profile |
 {% endblock %}
 
 {% block content %}
-<main id="main-content" class="grid-container grid-container--widescreen">
+<main id="main-content" class="grid-container">
-    <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">
-        <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">
@@ -96,7 +95,6 @@ Edit your User Profile |
 {% block content_bottom %}
   {% include "includes/profile_form.html" with form=form %}
   </div>
-    </div>
 </main>
 {% endblock content_bottom %}