Added widescreen mode to error pages (the misalignment was annoying me), Also updated widescreen variable, added home page to widescreen whitelist, combined _navigation.scss into _header.scss

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

@@ -1,3 +1,5 @@
+@use "base" as *;
+
 // Fixes some font size disparities with the Figma
 // for usa-alert alert elements
 .usa-alert {
@@ -22,3 +24,7 @@
     margin-left: 0.5rem!important;
   }
 }
+
+.usa-alert__body--widescreen {
+  max-width: $widescreen-max-width;
+}

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

@@ -1,9 +1,7 @@
 @use "uswds-core" as *;
 @use "cisa_colors" as *;
 
-:root {
-  --widescreen-max-width: 1920px;
-}
+$widescreen-max-width: 1920px;
 
 /* Styles for making visible to screen reader / AT users only. */
 .sr-only {
@@ -106,6 +104,24 @@ body {
   }
 }
 
+/*
+This is a hack to keep the "Export" button on Domain Requests page inline
+with the searchbar in widescreen mode. 
+
+EXPLANATION:  The existing frontend implementation puts the searchbar and export
+button in two separate columns in a grid, which creates a solid wrap-around effect
+for mobile divices.  The searchbar had a max-width that exactly equaled the max width
+of its parent column (for non-widescreens), so there wasn't any issue at this time of 
+implementation.
+However, during immplementation of widescreen mode this small max-width caused the searchbar to
+no longer fill its parent grid column for larger screen sizes, creating a visual gap between 
+it and the adjacent export button.  To fix this, we will limit the width of the first 
+grid column to the max-width of the searchbar, which was calculated to be 33rem.
+*/
+.section-outlined__search--widescreen {
+  max-width: 33rem;
+}
+
 .break-word {
   word-break: break-word;
 }
@@ -224,8 +240,10 @@ abbr[title] {
 // Boost this USWDS utility class for the accordions in the portfolio requests table
 .left-auto {
   left: auto!important;
+}
+
 .usa-banner__inner--widescreen  {
-  max-width: var(--widescreen-max-width);
+  max-width: $widescreen-max-width;
 }
 
 .margin-right-neg-4px {

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

@@ -211,10 +211,6 @@ a.usa-button--unstyled:visited {
     align-items: center;
 }
 
-.usa-button--justify-right {
-  justify-content: right;
-}
-
 
 .dotgov-table a,
 .usa-link--icon {

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

@@ -1,6 +1,7 @@
 @use "uswds-core" as *;
+@use "base" as *;
 
 .grid-container--widescreen,
 .usa-identifier__container--widescreen {
-    max-width: var(--widescreen-max-width) !important;
+    max-width: $widescreen-max-width !important;
 }

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

@@ -1,5 +1,6 @@
 @use "uswds-core" as *;
 @use "cisa_colors" as *;
+@use "base" as *;
 
 // Define some styles for the .gov header/logo
 .usa-logo button {
@@ -129,6 +130,7 @@
 }
 
 .usa-nav__inner--widescreen,
-.usa-navbar--widescreen  {
-    max-width: var(--widescreen-max-width) !important;
+.usa-navbar--widescreen,
+.usa-nav-container--widescreen  {
+    max-width: $widescreen-max-width !important;
 }

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

@@ -1,6 +0,0 @@
-@use "uswds-core" as *;
-
-.usa-nav__inner--widescreen,
-.usa-navbar--widescreen  {
-    max-width: var(--widescreen-max-width) !important;
-}

src/registrar/context_processors.py

@@ -104,5 +104,5 @@ def portfolio_permissions(request):
 def is_widescreen_mode(request):
     widescreen_paths = ["/domains/", "/requests/"]
     return {
-        "is_widescreen_mode": any(path in request.path for path in widescreen_paths)
-    }  # any(path in request.path for path in widescreen_paths)
+        "is_widescreen_mode": any(path in request.path for path in widescreen_paths) or request.path ==  "/"
+    }

src/registrar/templates/401.html

@@ -5,7 +5,7 @@
 {% block title %}{% translate "Unauthorized | " %}{% endblock %}
 
 {% block content %}
-<main id="main-content" class="grid-container">
+<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>

src/registrar/templates/403.html

@@ -5,7 +5,7 @@
 {% block title %}{% translate "Forbidden | " %}{% endblock %}
 
 {% block content %}
-<main id="main-content" class="grid-container">
+<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>

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

src/registrar/templates/500.html

@@ -5,7 +5,7 @@
 {% block title %}{% translate "Server error | " %}{% endblock %}
 
 {% block content %}
-<main id="main-content" class="grid-container">
+<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>

src/registrar/templates/home.html

@@ -5,7 +5,7 @@
 {% block title %} Home | {% endblock %}
 
 {% block content %}
-<main id="main-content" class="grid-container">
+<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 #}
 

src/registrar/templates/includes/domains_table.html

@@ -13,7 +13,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 %}">
+      <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 %}

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">
+  <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/non-production-alert.html

@@ -1,6 +1,6 @@
 <div class="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 add_body_class %}{{ add_body_class }}{% endif %}">
+        <div class="usa-alert__body {% if add_body_class %}{{ add_body_class }}{% endif %} {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
             <b>Attention:</b> You are on a test site.
             {% if has_profile_feature_flag %}
             The profile_feature flag is active.