From ecc1038c341d096516d08b2dbb772cd5b55a4559 Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Thu, 5 Sep 2024 21:27:41 -0600
Subject: [PATCH 01/18] Added widescreen detection and scss adjustments for
 Domains and Domain Request page

---
 src/registrar/assets/sass/_navigation.scss            | 6 ++++++
 src/registrar/assets/sass/_theme/_base.scss           | 4 ++++
 src/registrar/assets/sass/_theme/_containers.scss     | 6 ++++++
 src/registrar/assets/sass/_theme/styles.scss          | 2 ++
 src/registrar/config/settings.py                      | 1 +
 src/registrar/context_processors.py                   | 4 ++++
 src/registrar/templates/base.html                     | 2 +-
 src/registrar/templates/includes/footer.html          | 8 ++++----
 src/registrar/templates/includes/header_extended.html | 4 ++--
 src/registrar/templates/portfolio_base.html           | 2 +-
 10 files changed, 31 insertions(+), 8 deletions(-)
 create mode 100644 src/registrar/assets/sass/_navigation.scss
 create mode 100644 src/registrar/assets/sass/_theme/_containers.scss

diff --git a/src/registrar/assets/sass/_navigation.scss b/src/registrar/assets/sass/_navigation.scss
new file mode 100644
index 000000000..c87e78295
--- /dev/null
+++ b/src/registrar/assets/sass/_navigation.scss
@@ -0,0 +1,6 @@
+@use "uswds-core" as *;
+
+.usa-nav__inner--widescreen,
+.usa-navbar--widescreen  {
+    max-width: 1920px;
+}
\ No newline at end of file
diff --git a/src/registrar/assets/sass/_theme/_base.scss b/src/registrar/assets/sass/_theme/_base.scss
index 9f8a0cbb6..ecf8df0b8 100644
--- a/src/registrar/assets/sass/_theme/_base.scss
+++ b/src/registrar/assets/sass/_theme/_base.scss
@@ -192,3 +192,7 @@ abbr[title] {
     max-width: 50ch;
   }
 }
+
+.usa-banner__inner--widescreen  {
+  max-width: 1920px;
+}
\ No newline at end of file
diff --git a/src/registrar/assets/sass/_theme/_containers.scss b/src/registrar/assets/sass/_theme/_containers.scss
new file mode 100644
index 000000000..206fcdceb
--- /dev/null
+++ b/src/registrar/assets/sass/_theme/_containers.scss
@@ -0,0 +1,6 @@
+@use "uswds-core" as *;
+
+.grid-container--widescreen,
+.usa-identifier__container--widescreen {
+    max-width: 1920px;
+}
diff --git a/src/registrar/assets/sass/_theme/styles.scss b/src/registrar/assets/sass/_theme/styles.scss
index f9df015b4..710b0d193 100644
--- a/src/registrar/assets/sass/_theme/styles.scss
+++ b/src/registrar/assets/sass/_theme/styles.scss
@@ -24,6 +24,8 @@
 @forward "identifier";
 @forward "header";
 @forward "register-form";
+@forward "containers";
+@forward "navigation";
 
 /*--------------------------------------------------
 --- Admin ---------------------------------*/
diff --git a/src/registrar/config/settings.py b/src/registrar/config/settings.py
index 73aecad7a..9f855d0e9 100644
--- a/src/registrar/config/settings.py
+++ b/src/registrar/config/settings.py
@@ -244,6 +244,7 @@ TEMPLATES = [
                 "registrar.context_processors.add_path_to_context",
                 "registrar.context_processors.add_has_profile_feature_flag_to_context",
                 "registrar.context_processors.portfolio_permissions",
+                "registrar.context_processors.is_widescreen_mode",
             ],
         },
     },
diff --git a/src/registrar/context_processors.py b/src/registrar/context_processors.py
index ea04dca80..5c2fb6a54 100644
--- a/src/registrar/context_processors.py
+++ b/src/registrar/context_processors.py
@@ -95,3 +95,7 @@ def portfolio_permissions(request):
             "portfolio": None,
             "has_organization_feature_flag": False,
         }
+
+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)
\ No newline at end of file
diff --git a/src/registrar/templates/base.html b/src/registrar/templates/base.html
index e5bd1b0b9..b14dab2fa 100644
--- a/src/registrar/templates/base.html
+++ b/src/registrar/templates/base.html
@@ -78,7 +78,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">
+        <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>
diff --git a/src/registrar/templates/includes/footer.html b/src/registrar/templates/includes/footer.html
index fdf91a64e..c8d237821 100644
--- a/src/registrar/templates/includes/footer.html
+++ b/src/registrar/templates/includes/footer.html
@@ -3,7 +3,7 @@
 
 <footer class="usa-footer">
     <div class="usa-footer__secondary-section">
-      <div class="grid-container">
+      <div class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
         <div class="grid-row grid-gap">
           <div
             class="
@@ -51,7 +51,7 @@
       class="usa-identifier__section usa-identifier__section--masthead"
       aria-label="Agency identifier"
     >
-      <div class="usa-identifier__container">
+      <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">
+      <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">
+      <div class="usa-identifier__container {% if is_widescreen_mode %} usa-identifier__container--widescreen {% endif %}">
         <div class="usa-identifier__usagov-description">
           Looking for U.S. government information and services?
         </div>
diff --git a/src/registrar/templates/includes/header_extended.html b/src/registrar/templates/includes/header_extended.html
index 54ceb3a67..334ee604e 100644
--- a/src/registrar/templates/includes/header_extended.html
+++ b/src/registrar/templates/includes/header_extended.html
@@ -2,13 +2,13 @@
 {% load custom_filters %}
 
 <header class="usa-header usa-header--extended">
-    <div class="usa-navbar">
+    <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">
+    <div class="usa-nav__inner {% if is_widescreen_mode %} usa-nav__inner--widescreen {% endif %}">
         <button type="button" class="usa-nav__close">
             <img src="{%static 'img/usa-icons/close.svg'%}" role="img" alt="Close" />
         </button>
diff --git a/src/registrar/templates/portfolio_base.html b/src/registrar/templates/portfolio_base.html
index 2da33884c..7326781c9 100644
--- a/src/registrar/templates/portfolio_base.html
+++ b/src/registrar/templates/portfolio_base.html
@@ -4,7 +4,7 @@
   <div id="wrapper" class="dashboard--portfolio">
       {% 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 #}
             

From 40d6423bb6b3ca7eb034d53952ae94592ff9a475 Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Thu, 5 Sep 2024 21:46:38 -0600
Subject: [PATCH 02/18] linted

---
 src/registrar/context_processors.py | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/registrar/context_processors.py b/src/registrar/context_processors.py
index 5c2fb6a54..3ad010f89 100644
--- a/src/registrar/context_processors.py
+++ b/src/registrar/context_processors.py
@@ -96,6 +96,9 @@ def portfolio_permissions(request):
             "has_organization_feature_flag": False,
         }
 
+
 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)
\ No newline at end of file
+    return {
+        "is_widescreen_mode": any(path in request.path for path in widescreen_paths)
+    }  # any(path in request.path for path in widescreen_paths)

From 7a2963d712da3b9f820d7dcf7870883b13c3387f Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Thu, 5 Sep 2024 22:18:43 -0600
Subject: [PATCH 03/18] Added simple frontend test for widescreen mode

---
 src/registrar/tests/test_views_portfolio.py | 24 +++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/registrar/tests/test_views_portfolio.py b/src/registrar/tests/test_views_portfolio.py
index c5d1a9830..6d8ee7deb 100644
--- a/src/registrar/tests/test_views_portfolio.py
+++ b/src/registrar/tests/test_views_portfolio.py
@@ -532,3 +532,27 @@ class TestPortfolio(WebTest):
         self.assertEqual(response.status_code, 200)
         self.assertContains(response, "Domain name")
         permission.delete()
+
+    @less_console_noise_decorator
+    @override_flag("organization_feature", active=True)
+    def test_widescreen_css(self):
+        """Tests if class modifiers for widescreen mode are appropriately loaded into the DOM"""
+
+        self.client.force_login(self.user)
+
+        # Ensure that this user can see domains with the right permissions
+        permission, _ = UserPortfolioPermission.objects.get_or_create(
+            user=self.user, portfolio=self.portfolio, roles=[UserPortfolioRoleChoices.ORGANIZATION_MEMBER]
+        )
+        permission.additional_permissions = [UserPortfolioPermissionChoices.VIEW_ALL_DOMAINS]
+        permission.save()
+        permission.refresh_from_db()
+
+        response = self.client.get(reverse("domains"))
+        # Make sure that the page is loaded correctly
+        self.assertEqual(response.status_code, 200)
+
+        # Test for widescreen modifier
+        self.assertContains(
+            response, "--widescreen"
+        )
\ No newline at end of file

From 87bc704699649bf25f1bcd318c8b57fd882f8eb8 Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Thu, 5 Sep 2024 22:32:26 -0600
Subject: [PATCH 04/18] corrected location of file

---
 src/registrar/assets/sass/{ => _theme}/_navigation.scss | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/registrar/assets/sass/{ => _theme}/_navigation.scss (100%)

diff --git a/src/registrar/assets/sass/_navigation.scss b/src/registrar/assets/sass/_theme/_navigation.scss
similarity index 100%
rename from src/registrar/assets/sass/_navigation.scss
rename to src/registrar/assets/sass/_theme/_navigation.scss

From d0da6bf3e07b6010c6928284e53453c60f8b9c22 Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Fri, 6 Sep 2024 17:22:12 -0600
Subject: [PATCH 05/18] fixed bug where scss is getting overriden

---
 src/registrar/assets/sass/_theme/_containers.scss | 2 +-
 src/registrar/assets/sass/_theme/_navigation.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/registrar/assets/sass/_theme/_containers.scss b/src/registrar/assets/sass/_theme/_containers.scss
index 206fcdceb..43d5dba08 100644
--- a/src/registrar/assets/sass/_theme/_containers.scss
+++ b/src/registrar/assets/sass/_theme/_containers.scss
@@ -2,5 +2,5 @@
 
 .grid-container--widescreen,
 .usa-identifier__container--widescreen {
-    max-width: 1920px;
+    max-width: 1920px !important;
 }
diff --git a/src/registrar/assets/sass/_theme/_navigation.scss b/src/registrar/assets/sass/_theme/_navigation.scss
index c87e78295..82e58b20f 100644
--- a/src/registrar/assets/sass/_theme/_navigation.scss
+++ b/src/registrar/assets/sass/_theme/_navigation.scss
@@ -2,5 +2,5 @@
 
 .usa-nav__inner--widescreen,
 .usa-navbar--widescreen  {
-    max-width: 1920px;
+    max-width: 1920px !important;
 }
\ No newline at end of file

From b78e76a09857cfb18b7148dc814cfb54fcf7eb9a Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Sun, 8 Sep 2024 16:17:48 -0600
Subject: [PATCH 06/18] linted

---
 src/registrar/tests/test_views_portfolio.py | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/registrar/tests/test_views_portfolio.py b/src/registrar/tests/test_views_portfolio.py
index 6d8ee7deb..951222288 100644
--- a/src/registrar/tests/test_views_portfolio.py
+++ b/src/registrar/tests/test_views_portfolio.py
@@ -553,6 +553,4 @@ class TestPortfolio(WebTest):
         self.assertEqual(response.status_code, 200)
 
         # Test for widescreen modifier
-        self.assertContains(
-            response, "--widescreen"
-        )
\ No newline at end of file
+        self.assertContains(response, "--widescreen")

From be5dd260b2d2867a3ca6d98fbb93a75e8556214c Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Fri, 13 Sep 2024 14:37:35 -0600
Subject: [PATCH 07/18] fixed export button alignment

---
 src/registrar/assets/sass/_theme/_buttons.scss      | 4 ++++
 src/registrar/templates/includes/domains_table.html | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/registrar/assets/sass/_theme/_buttons.scss b/src/registrar/assets/sass/_theme/_buttons.scss
index 12eee9926..45482a2ad 100644
--- a/src/registrar/assets/sass/_theme/_buttons.scss
+++ b/src/registrar/assets/sass/_theme/_buttons.scss
@@ -211,6 +211,10 @@ a.usa-button--unstyled:visited {
     align-items: center;
 }
 
+.usa-button--justify-right {
+  justify-content: right;
+}
+
 
 .dotgov-table a,
 .usa-link--icon {
diff --git a/src/registrar/templates/includes/domains_table.html b/src/registrar/templates/includes/domains_table.html
index 62e9295dd..5f2288ba0 100644
--- a/src/registrar/templates/includes/domains_table.html
+++ b/src/registrar/templates/includes/domains_table.html
@@ -45,7 +45,7 @@
       {% if user_domain_count and user_domain_count > 0 %}
       <div class="section-outlined__utility-button mobile-lg:padding-right-105 {% if portfolio %} mobile:grid-col-12 desktop:grid-col-6 desktop:padding-left-3{% endif %}">
         <section aria-label="Domains report component" class="margin-top-205">
-          <a href="{% url 'export_data_type_user' %}" class="usa-button usa-button--unstyled usa-button--with-icon" role="button">
+          <a href="{% url 'export_data_type_user' %}" class="usa-button usa-button--unstyled usa-button--with-icon usa-button--justify-right" role="button">
             <svg class="usa-icon usa-icon--big" aria-hidden="true" focusable="false" role="img" width="24" height="24">
               <use xlink:href="{%static 'img/sprite.svg'%}#file_download"></use>
             </svg>Export as CSV

From 377f15f9c043d14edbca33b79e485ff13ecb3112 Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Tue, 17 Sep 2024 00:18:36 -0600
Subject: [PATCH 08/18] Implemented PR feedback

---
 src/registrar/assets/sass/_theme/_base.scss       | 7 ++++++-
 src/registrar/assets/sass/_theme/_containers.scss | 2 +-
 src/registrar/assets/sass/_theme/_header.scss     | 5 +++++
 src/registrar/assets/sass/_theme/_navigation.scss | 2 +-
 src/registrar/assets/sass/_theme/styles.scss      | 1 -
 src/registrar/templates/portfolio_base.html       | 2 +-
 6 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/registrar/assets/sass/_theme/_base.scss b/src/registrar/assets/sass/_theme/_base.scss
index b8bacae80..cfcfc46d0 100644
--- a/src/registrar/assets/sass/_theme/_base.scss
+++ b/src/registrar/assets/sass/_theme/_base.scss
@@ -1,6 +1,10 @@
 @use "uswds-core" as *;
 @use "cisa_colors" as *;
 
+:root {
+  --widescreen-max-width: 1920px;
+}
+
 /* Styles for making visible to screen reader / AT users only. */
 .sr-only {
   @include sr-only;
@@ -201,8 +205,9 @@ abbr[title] {
 }
 
 .usa-banner__inner--widescreen  {
-  max-width: 1920px;
+  max-width: var(--widescreen-max-width);
 }
+
 .margin-right-neg-4px {
   margin-right: -4px;
 }
diff --git a/src/registrar/assets/sass/_theme/_containers.scss b/src/registrar/assets/sass/_theme/_containers.scss
index 43d5dba08..2b0330b30 100644
--- a/src/registrar/assets/sass/_theme/_containers.scss
+++ b/src/registrar/assets/sass/_theme/_containers.scss
@@ -2,5 +2,5 @@
 
 .grid-container--widescreen,
 .usa-identifier__container--widescreen {
-    max-width: 1920px !important;
+    max-width: var(--widescreen-max-width) !important;
 }
diff --git a/src/registrar/assets/sass/_theme/_header.scss b/src/registrar/assets/sass/_theme/_header.scss
index 3d72a09cf..abc01a55c 100644
--- a/src/registrar/assets/sass/_theme/_header.scss
+++ b/src/registrar/assets/sass/_theme/_header.scss
@@ -119,3 +119,8 @@
         }
     }
 }
+
+.usa-nav__inner--widescreen,
+.usa-navbar--widescreen  {
+    max-width: var(--widescreen-max-width) !important;
+}
diff --git a/src/registrar/assets/sass/_theme/_navigation.scss b/src/registrar/assets/sass/_theme/_navigation.scss
index 82e58b20f..8d684e1f2 100644
--- a/src/registrar/assets/sass/_theme/_navigation.scss
+++ b/src/registrar/assets/sass/_theme/_navigation.scss
@@ -2,5 +2,5 @@
 
 .usa-nav__inner--widescreen,
 .usa-navbar--widescreen  {
-    max-width: 1920px !important;
+    max-width: var(--widescreen-max-width) !important;
 }
\ No newline at end of file
diff --git a/src/registrar/assets/sass/_theme/styles.scss b/src/registrar/assets/sass/_theme/styles.scss
index cda5c0ad6..8c38ae0b4 100644
--- a/src/registrar/assets/sass/_theme/styles.scss
+++ b/src/registrar/assets/sass/_theme/styles.scss
@@ -24,7 +24,6 @@
 @forward "header";
 @forward "register-form";
 @forward "containers";
-@forward "navigation";
 
 /*--------------------------------------------------
 --- Admin ---------------------------------*/
diff --git a/src/registrar/templates/portfolio_base.html b/src/registrar/templates/portfolio_base.html
index ac5bb0a20..054118468 100644
--- a/src/registrar/templates/portfolio_base.html
+++ b/src/registrar/templates/portfolio_base.html
@@ -4,7 +4,7 @@
   <div id="wrapper" class="{% block wrapper_class %}dashboard--portfolio{% endblock %}">
     {% block content %}
         
-        <main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
+        <main class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
             {% if user.is_authenticated %}
             {# the entire logged in page goes here #}
             

From 228b56002fe5a119e43439d4e6d0c9b7a2781d84 Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Wed, 18 Sep 2024 19:23:01 -0600
Subject: [PATCH 09/18] 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 |  6 +++++
 src/registrar/assets/sass/_theme/_base.scss   | 26 ++++++++++++++++---
 .../assets/sass/_theme/_buttons.scss          |  4 ---
 .../assets/sass/_theme/_containers.scss       |  3 ++-
 src/registrar/assets/sass/_theme/_header.scss |  6 +++--
 .../assets/sass/_theme/_navigation.scss       |  6 -----
 src/registrar/context_processors.py           |  4 +--
 src/registrar/templates/401.html              |  2 +-
 src/registrar/templates/403.html              |  2 +-
 src/registrar/templates/404.html              |  2 +-
 src/registrar/templates/500.html              |  2 +-
 src/registrar/templates/home.html             |  2 +-
 .../templates/includes/domains_table.html     |  2 +-
 .../templates/includes/header_basic.html      |  2 +-
 .../includes/non-production-alert.html        |  2 +-
 15 files changed, 44 insertions(+), 27 deletions(-)
 delete mode 100644 src/registrar/assets/sass/_theme/_navigation.scss

diff --git a/src/registrar/assets/sass/_theme/_alerts.scss b/src/registrar/assets/sass/_theme/_alerts.scss
index 163f243d3..04ae5ef51 100644
--- a/src/registrar/assets/sass/_theme/_alerts.scss
+++ b/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;
+}
diff --git a/src/registrar/assets/sass/_theme/_base.scss b/src/registrar/assets/sass/_theme/_base.scss
index bf40b03e2..806261810 100644
--- a/src/registrar/assets/sass/_theme/_base.scss
+++ b/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 {
diff --git a/src/registrar/assets/sass/_theme/_buttons.scss b/src/registrar/assets/sass/_theme/_buttons.scss
index e89e1b0de..9537e3cce 100644
--- a/src/registrar/assets/sass/_theme/_buttons.scss
+++ b/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 {
diff --git a/src/registrar/assets/sass/_theme/_containers.scss b/src/registrar/assets/sass/_theme/_containers.scss
index 2b0330b30..9981f5ef2 100644
--- a/src/registrar/assets/sass/_theme/_containers.scss
+++ b/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;
 }
diff --git a/src/registrar/assets/sass/_theme/_header.scss b/src/registrar/assets/sass/_theme/_header.scss
index 534812a3e..53eab90d8 100644
--- a/src/registrar/assets/sass/_theme/_header.scss
+++ b/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;
 }
diff --git a/src/registrar/assets/sass/_theme/_navigation.scss b/src/registrar/assets/sass/_theme/_navigation.scss
deleted file mode 100644
index 8d684e1f2..000000000
--- a/src/registrar/assets/sass/_theme/_navigation.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@use "uswds-core" as *;
-
-.usa-nav__inner--widescreen,
-.usa-navbar--widescreen  {
-    max-width: var(--widescreen-max-width) !important;
-}
\ No newline at end of file
diff --git a/src/registrar/context_processors.py b/src/registrar/context_processors.py
index f2bba3ed2..53a0d63d8 100644
--- a/src/registrar/context_processors.py
+++ b/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 ==  "/"
+    }
diff --git a/src/registrar/templates/401.html b/src/registrar/templates/401.html
index dd1801cc5..20ca0420e 100644
--- a/src/registrar/templates/401.html
+++ b/src/registrar/templates/401.html
@@ -5,7 +5,7 @@
 {% block title %}{% translate "Unauthorized | " %}{% endblock %}
 
 {% block content %}
-<main id="main-content" class="grid-container">
+<main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
   <div class="grid-row grow-gap"> 
     <div class="tablet:grid-col-6 usa-prose margin-bottom-3">
       <h1>
diff --git a/src/registrar/templates/403.html b/src/registrar/templates/403.html
index 660e5d34c..ef910a191 100644
--- a/src/registrar/templates/403.html
+++ b/src/registrar/templates/403.html
@@ -5,7 +5,7 @@
 {% block title %}{% translate "Forbidden | " %}{% endblock %}
 
 {% block content %}
-<main id="main-content" class="grid-container">
+<main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
   <div class="grid-row grow-gap"> 
     <div class="tablet:grid-col-6 usa-prose margin-bottom-3">
       <h1>
diff --git a/src/registrar/templates/404.html b/src/registrar/templates/404.html
index cf6983c60..024c2803b 100644
--- a/src/registrar/templates/404.html
+++ b/src/registrar/templates/404.html
@@ -5,7 +5,7 @@
 {% block title %}{% translate "Page not found | " %}{% endblock %}
 
 {% block content %}
-<main id="main-content" class="grid-container">
+<main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
   <div class="grid-row grid-gap">
     <div class="tablet:grid-col-6 usa-prose margin-bottom-3">
       <h1>
diff --git a/src/registrar/templates/500.html b/src/registrar/templates/500.html
index dfbd90142..95c17e069 100644
--- a/src/registrar/templates/500.html
+++ b/src/registrar/templates/500.html
@@ -5,7 +5,7 @@
 {% block title %}{% translate "Server error | " %}{% endblock %}
 
 {% block content %}
-<main id="main-content" class="grid-container">
+<main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
   <div class="grid-row grid-gap">
     <div class="tablet:grid-col-6 usa-prose margin-bottom-3">
       <h1>
diff --git a/src/registrar/templates/home.html b/src/registrar/templates/home.html
index 63924bc1d..65c52ec9e 100644
--- a/src/registrar/templates/home.html
+++ b/src/registrar/templates/home.html
@@ -5,7 +5,7 @@
 {% block title %} Home | {% endblock %}
 
 {% block content %}
-<main id="main-content" class="grid-container">
+<main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
 {% if user.is_authenticated %}
 {# the entire logged in page goes here #}
 
diff --git a/src/registrar/templates/includes/domains_table.html b/src/registrar/templates/includes/domains_table.html
index 406fdf28a..dd3b5bc58 100644
--- a/src/registrar/templates/includes/domains_table.html
+++ b/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 %}
diff --git a/src/registrar/templates/includes/header_basic.html b/src/registrar/templates/includes/header_basic.html
index fd3b71000..76b2c7bf2 100644
--- a/src/registrar/templates/includes/header_basic.html
+++ b/src/registrar/templates/includes/header_basic.html
@@ -1,7 +1,7 @@
 {% load static %}
 
 <header class="usa-header usa-header--basic">
-  <div class="usa-nav-container">
+  <div class="usa-nav-container {% if is_widescreen_mode %} usa-nav-container--widescreen {% endif %}">
     <div class="usa-navbar">
         {% include "includes/gov_extended_logo.html" with logo_clickable=logo_clickable %}
       <button type="button" class="usa-menu-btn">Menu</button>
diff --git a/src/registrar/templates/includes/non-production-alert.html b/src/registrar/templates/includes/non-production-alert.html
index 661fb1397..961b2b980 100644
--- a/src/registrar/templates/includes/non-production-alert.html
+++ b/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.

From da2d09932ed26be048b8c3ef3344945c59816ec6 Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Wed, 18 Sep 2024 19:29:39 -0600
Subject: [PATCH 10/18] added !important

---
 src/registrar/assets/sass/_theme/_alerts.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/registrar/assets/sass/_theme/_alerts.scss b/src/registrar/assets/sass/_theme/_alerts.scss
index 04ae5ef51..08404232e 100644
--- a/src/registrar/assets/sass/_theme/_alerts.scss
+++ b/src/registrar/assets/sass/_theme/_alerts.scss
@@ -25,6 +25,7 @@
   }
 }
 
+// NOTE: !important is used because _font.scss overrides this
 .usa-alert__body--widescreen {
-  max-width: $widescreen-max-width;
+  max-width: $widescreen-max-width !important;
 }

From 77691cbb389f93fdcb693aead61afe75d5dccbc1 Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Wed, 18 Sep 2024 19:31:24 -0600
Subject: [PATCH 11/18] remove unnecessary !important

---
 src/registrar/assets/sass/_theme/_containers.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/registrar/assets/sass/_theme/_containers.scss b/src/registrar/assets/sass/_theme/_containers.scss
index 9981f5ef2..d9a127746 100644
--- a/src/registrar/assets/sass/_theme/_containers.scss
+++ b/src/registrar/assets/sass/_theme/_containers.scss
@@ -3,5 +3,5 @@
 
 .grid-container--widescreen,
 .usa-identifier__container--widescreen {
-    max-width: $widescreen-max-width !important;
+    max-width: $widescreen-max-width;
 }

From 370f6da7f6e56182631bd84b2f31a9396457c641 Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Wed, 18 Sep 2024 22:32:54 -0600
Subject: [PATCH 12/18] added test

---
 src/registrar/tests/test_views_portfolio.py | 24 ++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/registrar/tests/test_views_portfolio.py b/src/registrar/tests/test_views_portfolio.py
index 3e47eec20..cd98cfe51 100644
--- a/src/registrar/tests/test_views_portfolio.py
+++ b/src/registrar/tests/test_views_portfolio.py
@@ -537,10 +537,9 @@ class TestPortfolio(WebTest):
         self.assertContains(response, "Domain name")
         permission.delete()
 
-    @less_console_noise_decorator
-    @override_flag("organization_feature", active=True)
-    def test_widescreen_css(self):
-        """Tests if class modifiers for widescreen mode are appropriately loaded into the DOM"""
+    def check_widescreen_is_loaded(self, page_to_check):
+        """Tests if class modifiers for widescreen mode are appropriately loaded into the DOM
+        for the given page"""
 
         self.client.force_login(self.user)
 
@@ -552,13 +551,28 @@ class TestPortfolio(WebTest):
         permission.save()
         permission.refresh_from_db()
 
-        response = self.client.get(reverse("domains"))
+        response = self.client.get(reverse(page_to_check))
         # Make sure that the page is loaded correctly
         self.assertEqual(response.status_code, 200)
 
         # Test for widescreen modifier
         self.assertContains(response, "--widescreen")
 
+    @less_console_noise_decorator
+    @override_flag("organization_feature", active=True)
+    def test_widescreen_css_org_model(self):
+        """Tests if class modifiers for widescreen mode are appropriately
+        loaded into the DOM for org model pages"""
+        self.check_widescreen_is_loaded("domains")
+        
+
+    @less_console_noise_decorator
+    @override_flag("organization_feature", active=False)
+    def test_widescreen_css_non_org_model(self):
+        """Tests if class modifiers for widescreen mode are appropriately
+        loaded into the DOM for non-org model pages"""
+        self.check_widescreen_is_loaded("domains")
+
     @less_console_noise_decorator
     @override_flag("organization_feature", active=True)
     @override_flag("organization_requests", active=False)

From 89787fc9782dbe9c6802c8d49647a4aee7c98dc4 Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Wed, 18 Sep 2024 23:07:42 -0600
Subject: [PATCH 13/18] fixed test

---
 src/registrar/tests/test_views_portfolio.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/registrar/tests/test_views_portfolio.py b/src/registrar/tests/test_views_portfolio.py
index cd98cfe51..48d39b374 100644
--- a/src/registrar/tests/test_views_portfolio.py
+++ b/src/registrar/tests/test_views_portfolio.py
@@ -571,7 +571,7 @@ class TestPortfolio(WebTest):
     def test_widescreen_css_non_org_model(self):
         """Tests if class modifiers for widescreen mode are appropriately
         loaded into the DOM for non-org model pages"""
-        self.check_widescreen_is_loaded("domains")
+        self.check_widescreen_is_loaded("home")
 
     @less_console_noise_decorator
     @override_flag("organization_feature", active=True)

From 9b2b26a3e07c3fe600b98aea4b737bd4816a1f3c Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Wed, 18 Sep 2024 23:08:39 -0600
Subject: [PATCH 14/18] linted

---
 src/registrar/context_processors.py         | 4 +---
 src/registrar/tests/test_views_portfolio.py | 1 -
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/registrar/context_processors.py b/src/registrar/context_processors.py
index 53a0d63d8..37834067b 100644
--- a/src/registrar/context_processors.py
+++ b/src/registrar/context_processors.py
@@ -103,6 +103,4 @@ 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) or request.path ==  "/"
-    }
+    return {"is_widescreen_mode": any(path in request.path for path in widescreen_paths) or request.path == "/"}
diff --git a/src/registrar/tests/test_views_portfolio.py b/src/registrar/tests/test_views_portfolio.py
index 48d39b374..68c95005e 100644
--- a/src/registrar/tests/test_views_portfolio.py
+++ b/src/registrar/tests/test_views_portfolio.py
@@ -564,7 +564,6 @@ class TestPortfolio(WebTest):
         """Tests if class modifiers for widescreen mode are appropriately
         loaded into the DOM for org model pages"""
         self.check_widescreen_is_loaded("domains")
-        
 
     @less_console_noise_decorator
     @override_flag("organization_feature", active=False)

From f6b2aa7a3f9a5177e3e152888af7e8199e18eb31 Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Fri, 20 Sep 2024 12:56:32 -0600
Subject: [PATCH 15/18] Implemented Design feedback (updated margins for org
 domains table to match the margins for non-org domains table)

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

diff --git a/src/registrar/templates/portfolio_base.html b/src/registrar/templates/portfolio_base.html
index 054118468..86e43c962 100644
--- a/src/registrar/templates/portfolio_base.html
+++ b/src/registrar/templates/portfolio_base.html
@@ -8,7 +8,7 @@
             {% if user.is_authenticated %}
             {# the entire logged in page goes here #}
             
-            <div class="tablet:grid-col-12">
+            <div class="tablet:grid-col-11 desktop:grid-col-10 tablet:grid-offset-1">
                 {% block messages %}
                     {% include "includes/form_messages.html" %}
                 {% endblock %}

From 87dcbedb80d661681c4b9cdf88bc7c6aa05508b5 Mon Sep 17 00:00:00 2001
From: CuriousX <nicolle.leclair@gmail.com>
Date: Fri, 20 Sep 2024 13:00:18 -0600
Subject: [PATCH 16/18] Update src/registrar/assets/sass/_theme/_base.scss

Co-authored-by: Rachid Mrad <107004823+rachidatecs@users.noreply.github.com>
---
 src/registrar/assets/sass/_theme/_base.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/registrar/assets/sass/_theme/_base.scss b/src/registrar/assets/sass/_theme/_base.scss
index 806261810..85f453dac 100644
--- a/src/registrar/assets/sass/_theme/_base.scss
+++ b/src/registrar/assets/sass/_theme/_base.scss
@@ -110,7 +110,7 @@ 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
+for mobile devices.  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

From f6cb03de87cddb7a362f50df07a9023aee716e6f Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Fri, 20 Sep 2024 13:04:11 -0600
Subject: [PATCH 17/18] fix footer widescreen

---
 src/registrar/assets/sass/_theme/_containers.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/registrar/assets/sass/_theme/_containers.scss b/src/registrar/assets/sass/_theme/_containers.scss
index d9a127746..7473615ad 100644
--- a/src/registrar/assets/sass/_theme/_containers.scss
+++ b/src/registrar/assets/sass/_theme/_containers.scss
@@ -1,7 +1,8 @@
 @use "uswds-core" as *;
 @use "base" as *;
 
+//NOTE: !important is needed because it gets overriden by other .scss for footer nav
 .grid-container--widescreen,
 .usa-identifier__container--widescreen {
-    max-width: $widescreen-max-width;
+    max-width: $widescreen-max-width !important;
 }

From de50e7b42026e7fa47e75c5e966dac8956fcef4f Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Fri, 20 Sep 2024 13:52:38 -0600
Subject: [PATCH 18/18] remove scss code from merge resolve

---
 src/registrar/assets/sass/_theme/_buttons.scss | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/registrar/assets/sass/_theme/_buttons.scss b/src/registrar/assets/sass/_theme/_buttons.scss
index eb05d67e5..2e4469e12 100644
--- a/src/registrar/assets/sass/_theme/_buttons.scss
+++ b/src/registrar/assets/sass/_theme/_buttons.scss
@@ -236,14 +236,6 @@ a.withdraw_outline:active {
     align-items: center;
 }
 
-
-.dotgov-table a,
-.usa-link--icon {
-    &:visited {
-        color: color('primary');   
-    }
-}
-
 .dotgov-table a
 a .usa-icon,
 .usa-button--with-icon .usa-icon {