From 1ee1382dfd9a2ae71b057c2e2d2e4cd1ff488a1f Mon Sep 17 00:00:00 2001
From: Kim Allen <kim@truss.works>
Date: Tue, 10 Jun 2025 08:57:53 -0700
Subject: [PATCH] #3481: Move alerts below breadcrumbs [meoward] (#3835)

* Move error msg in domain_add_user

* Move errors in profile

* Update remaining domain org model templates

* Update member org templates

* Also move other alerts

* Move success alerts in profile

* Add breadcrumbs block to domain_base and move breadcrumbs out of domain_content block into content block

* Remove extra div to fix spacing

* Update domain_renewal and suborganization pages
---
 src/registrar/templates/domain_add_user.html  |  8 ++-
 src/registrar/templates/domain_base.html      | 10 ++-
 src/registrar/templates/domain_detail.html    |  2 +-
 src/registrar/templates/domain_dns.html       |  3 +-
 src/registrar/templates/domain_dnssec.html    |  3 +-
 src/registrar/templates/domain_dsdata.html    | 12 ++--
 .../templates/domain_nameservers.html         | 65 +++++++++----------
 src/registrar/templates/domain_renewal.html   | 24 +++----
 .../templates/domain_security_email.html      |  7 +-
 .../templates/domain_suborganization.html     |  9 +--
 src/registrar/templates/domain_users.html     |  3 +-
 src/registrar/templates/portfolio_member.html | 10 +--
 .../templates/portfolio_member_domains.html   | 12 ++--
 .../portfolio_member_domains_edit.html        | 11 ++--
 .../portfolio_member_permissions.html         | 12 ++--
 .../templates/portfolio_members_add_new.html  | 12 ++--
 src/registrar/templates/profile.html          | 25 +++----
 17 files changed, 126 insertions(+), 102 deletions(-)

diff --git a/src/registrar/templates/domain_add_user.html b/src/registrar/templates/domain_add_user.html
index 8ef167f98..31d2b0c6a 100644
--- a/src/registrar/templates/domain_add_user.html
+++ b/src/registrar/templates/domain_add_user.html
@@ -3,9 +3,6 @@
 
 {% block title %}Add a domain manager | {% endblock %}
 
-{% block domain_content %}
-
-  {% include "includes/form_errors.html" with form=form %}
 
   {% block breadcrumb %}
     {% if portfolio %}
@@ -41,6 +38,11 @@
     {% endif %}
   {% endblock breadcrumb %}
 
+{% block domain_content %}
+
+  <!-- Error message -->
+  {% include "includes/form_errors.html" with form=form %}
+
   <h1>Add a domain manager</h1>
   {% if portfolio %}
     <p>
diff --git a/src/registrar/templates/domain_base.html b/src/registrar/templates/domain_base.html
index 919178577..12457240a 100644
--- a/src/registrar/templates/domain_base.html
+++ b/src/registrar/templates/domain_base.html
@@ -21,7 +21,13 @@
       {% endif %}
     </div>
 
-    <div class="tablet:grid-col" id="main-content">
+      <main id="main-content" class="grid-container tablet:grid-col">
+
+        <!-- Navigation breadcrumbs -->
+        {% block breadcrumb %}
+        {% endblock breadcrumb %}
+
+        <!-- Alert messages -->
       {% if not domain.domain_info %}
         <div class="usa-alert usa-alert--error margin-bottom-2">
           <div class="usa-alert__body">
@@ -62,7 +68,7 @@
 
         {% endblock %}  {# domain_content #}
       {% endif %}
-    </div>
+      </main>
   </div>
 </div>
 {% endblock %}  {# content #}
\ No newline at end of file
diff --git a/src/registrar/templates/domain_detail.html b/src/registrar/templates/domain_detail.html
index 9a99440de..4fa93bc4c 100644
--- a/src/registrar/templates/domain_detail.html
+++ b/src/registrar/templates/domain_detail.html
@@ -2,7 +2,6 @@
 {% load static url_helpers %}
 {% load custom_filters %}
 
-{% block domain_content %}
   {% block breadcrumb %}
   {% if portfolio %}
   <!-- Navigation breadcrumbs -->
@@ -19,6 +18,7 @@
   {% endif %}
   {% endblock breadcrumb %}
 
+{% block domain_content %}
   {{ block.super }}
   <div class="margin-top-2 tablet:grid-col-10">
     <h2 class="string-wrap margin-top-2">{{ domain.name }}</h2>
diff --git a/src/registrar/templates/domain_dns.html b/src/registrar/templates/domain_dns.html
index 80faa15f2..ecf9b2986 100644
--- a/src/registrar/templates/domain_dns.html
+++ b/src/registrar/templates/domain_dns.html
@@ -3,7 +3,6 @@
 
 {% block title %}DNS | {{ domain.name }} | {% endblock %}
 
-{% block domain_content %}
   {% block breadcrumb %}
   {% if portfolio %}
   <!-- Navigation breadcrumbs -->
@@ -23,6 +22,8 @@
   {% endif %}
   {% endblock breadcrumb %}
 
+{% block domain_content %}
+
   <h1>DNS</h1>
 
   <p>The Domain Name System (DNS) is the internet service that translates your domain name into an IP address. Before your .gov domain can be used, you'll need to connect it to a DNS hosting service and provide us with your name server information.</p>
diff --git a/src/registrar/templates/domain_dnssec.html b/src/registrar/templates/domain_dnssec.html
index e26c8768d..da88e96bd 100644
--- a/src/registrar/templates/domain_dnssec.html
+++ b/src/registrar/templates/domain_dnssec.html
@@ -3,7 +3,6 @@
 
 {% block title %}DNSSEC | {{ domain.name }} | {% endblock %}
 
-{% block domain_content %}
 
   {% block breadcrumb %}
   {% if portfolio %}
@@ -26,6 +25,8 @@
   </nav>
   {% endif %}
   {% endblock breadcrumb %}
+  
+  {% block domain_content %}
 
   <h1 id="domain-dnssec">DNSSEC</h1>
 
diff --git a/src/registrar/templates/domain_dsdata.html b/src/registrar/templates/domain_dsdata.html
index ceab937bc..28fd3c5a8 100644
--- a/src/registrar/templates/domain_dsdata.html
+++ b/src/registrar/templates/domain_dsdata.html
@@ -3,11 +3,6 @@
 
 {% block title %}DS data | {{ domain.name }} | {% endblock %}
 
-{% block domain_content %}
-
-  {% for form in formset %}
-    {% include "includes/form_errors.html" with form=form %}
-  {% endfor %}
 
   {% block breadcrumb %}
   {% if portfolio %}
@@ -34,6 +29,13 @@
   {% endif %}
   {% endblock breadcrumb %}
 
+  {% block domain_content %}
+
+  <!-- Error message -->
+  {% for form in formset %}
+      {% include "includes/form_errors.html" with form=form %}
+  {% endfor %}
+
   <div class="grid-row grid-gap">
     <div class="tablet:grid-col-6">
       <h1 class="tablet:margin-bottom-1" id="domain-dsdata">DS data</h1>
diff --git a/src/registrar/templates/domain_nameservers.html b/src/registrar/templates/domain_nameservers.html
index acd73cc3b..429c55fde 100644
--- a/src/registrar/templates/domain_nameservers.html
+++ b/src/registrar/templates/domain_nameservers.html
@@ -2,47 +2,46 @@
 {% load static field_helpers%}
 
 {% block title %}DNS name servers | {{ domain.name }} | {% endblock %}
+  {% block breadcrumb %}
+    {% if portfolio %}
+    <!-- Navigation breadcrumbs -->
+    <nav class="usa-breadcrumb padding-top-0" aria-label="Domain breadcrumb">
+      <ol class="usa-breadcrumb__list">
+        <li class="usa-breadcrumb__list-item">
+          <a href="{% url 'domains' %}" class="usa-breadcrumb__link"><span>Domains</span></a>
+        </li>
+        <li class="usa-breadcrumb__list-item">
+          <a href="{% url 'domain' domain_pk=domain.id %}" class="usa-breadcrumb__link"><span>{{ domain.name }}</span></a>
+        </li>
+        <li class="usa-breadcrumb__list-item">
+          <a href="{% url 'domain-dns' domain_pk=domain.id %}" class="usa-breadcrumb__link"><span>DNS</span></a>
+        </li>
+        <li class="usa-breadcrumb__list-item usa-current" aria-current="page">
+          <span>DNS name servers</span>
+        </li>
+      </ol>
+    </nav>
+    {% endif %}
+  {% endblock breadcrumb %}
 
-{% block domain_content %}
+  {% block domain_content %}
 
   {# this is right after the messages block in the parent template. #}
+  <!-- Error message -->
+  {% if formset.initial|length >= formset.max_num %}
+  <div class="usa-alert usa-alert--do-not-reset usa-alert--info usa-alert--slim margin-bottom-2" role="alert">
+    <div class="usa-alert__body">
+      <p class="usa-alert__text">
+        You’ve reached the maximum amount of allowed name server records (13).
+      </p>
+    </div>
+  </div>
+{% endif %}
 
   {% for form in formset %}
     {% include "includes/form_errors.html" with form=form %}
   {% endfor %}
 
-  {% if formset.initial|length >= formset.max_num %}
-    <div class="usa-alert usa-alert--do-not-reset usa-alert--info usa-alert--slim margin-bottom-2" role="alert">
-      <div class="usa-alert__body">
-        <p class="usa-alert__text">
-          You’ve reached the maximum amount of allowed name server records (13).
-        </p>
-      </div>
-    </div>
-  {% endif %}
-  
-  {% block breadcrumb %}
-  {% if portfolio %}
-  <!-- Navigation breadcrumbs -->
-  <nav class="usa-breadcrumb padding-top-0" aria-label="Domain breadcrumb">
-    <ol class="usa-breadcrumb__list">
-      <li class="usa-breadcrumb__list-item">
-        <a href="{% url 'domains' %}" class="usa-breadcrumb__link"><span>Domains</span></a>
-      </li>
-      <li class="usa-breadcrumb__list-item">
-        <a href="{% url 'domain' domain_pk=domain.id %}" class="usa-breadcrumb__link"><span>{{ domain.name }}</span></a>
-      </li>
-      <li class="usa-breadcrumb__list-item">
-        <a href="{% url 'domain-dns' domain_pk=domain.id %}" class="usa-breadcrumb__link"><span>DNS</span></a>
-      </li>
-      <li class="usa-breadcrumb__list-item usa-current" aria-current="page">
-        <span>DNS name servers</span>
-      </li>
-    </ol>
-  </nav>
-  {% endif %}
-  {% endblock breadcrumb %}
-
   <div class="grid-row grid-gap">
     <div class="tablet:grid-col-6">
       <h1 class="tablet:margin-bottom-1">Name servers</h1>
diff --git a/src/registrar/templates/domain_renewal.html b/src/registrar/templates/domain_renewal.html
index 0ca092773..f74bbe752 100644
--- a/src/registrar/templates/domain_renewal.html
+++ b/src/registrar/templates/domain_renewal.html
@@ -2,20 +2,8 @@
 {% load static url_helpers %}
 {% load custom_filters %}
 
-{% block domain_content %}
   {% block breadcrumb %}
 
-  <!-- Banner for if_policy_acknowledged -->
-  {% if form.is_policy_acknowledged.errors %}
-    <div class="usa-alert usa-alert--error usa-alert--slim margin-bottom-2" role="alert">
-      <div class="usa-alert__body">
-        {% for error in form.is_policy_acknowledged.errors %}
-          <p class="usa-alert__text">{{ error }}</p>
-        {% endfor %}
-      </div>
-    </div>
-  {% endif %}
-
   {% if portfolio %}
   <!-- Navigation breadcrumbs -->
   <nav class="usa-breadcrumb padding-top-0" aria-label="Domain breadcrumb">
@@ -35,6 +23,18 @@
   {% endif %}
   {% endblock breadcrumb %}
 
+  {% block domain_content %}
+   <!-- Banner for if_policy_acknowledged -->
+  {% if form.is_policy_acknowledged.errors %}
+    <div class="usa-alert usa-alert--error usa-alert--slim margin-bottom-2" role="alert">
+      <div class="usa-alert__body">
+        {% for error in form.is_policy_acknowledged.errors %}
+          <p class="usa-alert__text">{{ error }}</p>
+        {% endfor %}
+      </div>
+    </div>
+  {% endif %}
+
   {{ block.super }}
   <div class="margin-top-4 tablet:grid-col-10">
     <h2 class="domain-name-wrap">Confirm the following information for accuracy</h2>
diff --git a/src/registrar/templates/domain_security_email.html b/src/registrar/templates/domain_security_email.html
index 66c9ae255..0ef90b3cb 100644
--- a/src/registrar/templates/domain_security_email.html
+++ b/src/registrar/templates/domain_security_email.html
@@ -3,9 +3,6 @@
 
 {% block title %}Security email | {{ domain.name }} | {% endblock %}
 
-{% block domain_content %}
-
-  {% include "includes/form_errors.html" with form=form %}
 
   {% block breadcrumb %}
   {% if portfolio %}
@@ -26,6 +23,10 @@
   {% endif %}
   {% endblock breadcrumb %}
 
+{% block domain_content %}
+  <!-- Error message -->
+  {% include "includes/form_errors.html" with form=form %}
+
   <h1>Security email</h1>
 
   <p>We strongly recommend that you provide a security email. This email will allow the  public to report observed or suspected security issues on your domain. Security emails are made public and included in the <a class="usa-link" rel="noopener noreferrer" target="_blank" href="{% public_site_url 'about/data/' %}">.gov domain data</a> we provide.</p>
diff --git a/src/registrar/templates/domain_suborganization.html b/src/registrar/templates/domain_suborganization.html
index b9e4734ff..3cfdf7438 100644
--- a/src/registrar/templates/domain_suborganization.html
+++ b/src/registrar/templates/domain_suborganization.html
@@ -3,10 +3,6 @@
 
 {% block title %}Suborganization{% if suborganization_name %} | suborganization_name{% endif %} | {% endblock %}
 
-{% block domain_content %}
-
-    {% include "includes/form_errors.html" with form=form %}
-
     {% block breadcrumb %}
     {% if portfolio %}
     <!-- Navigation breadcrumbs -->
@@ -26,6 +22,11 @@
     {% endif %}
     {% endblock breadcrumb %}
 
+    {% block domain_content %}
+
+    <!-- Error message -->
+    {% include "includes/form_errors.html" with form=form %}
+
     <h1>Suborganization</h1>
 
     <p>
diff --git a/src/registrar/templates/domain_users.html b/src/registrar/templates/domain_users.html
index 776bbea77..c1c03e9dc 100644
--- a/src/registrar/templates/domain_users.html
+++ b/src/registrar/templates/domain_users.html
@@ -3,7 +3,6 @@
 
 {% block title %}Domain managers | {{ domain.name }} | {% endblock %}
 
-{% block domain_content %}
   {% block breadcrumb %}
   {% if portfolio %}
   <!-- Navigation breadcrumbs -->
@@ -23,6 +22,8 @@
   {% endif %}
   {% endblock breadcrumb %}
 
+{% block domain_content %}
+
   <h1>Domain managers</h1>
 
   <p>
diff --git a/src/registrar/templates/portfolio_member.html b/src/registrar/templates/portfolio_member.html
index 1afe96161..5514fd470 100644
--- a/src/registrar/templates/portfolio_member.html
+++ b/src/registrar/templates/portfolio_member.html
@@ -9,11 +9,6 @@ Organization member
 
 {% block portfolio_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" aria-label="Portfolio member breadcrumb">
@@ -27,6 +22,11 @@ Organization member
   </ol>
   </nav>
   
+  <!-- Form messages -->
+  {% block messages %}
+    {% include "includes/form_messages.html" %}
+  {% endblock messages%}
+  {% include "includes/form_errors.html" with form=form %}
 
   <h1 class="margin-bottom-3">Manage member</h1>
 
diff --git a/src/registrar/templates/portfolio_member_domains.html b/src/registrar/templates/portfolio_member_domains.html
index 677539585..e0dec597c 100644
--- a/src/registrar/templates/portfolio_member_domains.html
+++ b/src/registrar/templates/portfolio_member_domains.html
@@ -7,11 +7,6 @@
 
 {% block portfolio_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 %}
@@ -35,6 +30,13 @@
     </ol>
     </nav>
 
+    <!-- Form messages -->
+    {% block messages %}
+      {% include "includes/form_messages.html" %}
+    {% endblock messages%}
+    {% include "includes/form_errors.html" with form=form %}
+
+
     <div class="grid-row grid-gap">
         <div class="mobile:grid-col-12 tablet:grid-col-7">
             <h1>Domain assignments</h1>
diff --git a/src/registrar/templates/portfolio_member_domains_edit.html b/src/registrar/templates/portfolio_member_domains_edit.html
index 2a88075d7..831fa512a 100644
--- a/src/registrar/templates/portfolio_member_domains_edit.html
+++ b/src/registrar/templates/portfolio_member_domains_edit.html
@@ -7,11 +7,6 @@
 
 {% block portfolio_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 %}
@@ -38,6 +33,12 @@
         </ol>
     </nav>
 
+    <!-- Form messages -->
+    {% block messages %}
+      {% include "includes/form_messages.html" %}
+    {% endblock messages%}
+    {% include "includes/form_errors.html" with form=form %}
+
     <section id="domain-assignments-edit-view">
         <h1>Edit domain assignments</h1>
 
diff --git a/src/registrar/templates/portfolio_member_permissions.html b/src/registrar/templates/portfolio_member_permissions.html
index 59a8b1fd8..eb5a77049 100644
--- a/src/registrar/templates/portfolio_member_permissions.html
+++ b/src/registrar/templates/portfolio_member_permissions.html
@@ -11,11 +11,6 @@
 {% block portfolio_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%}
   
   <!-- Navigation breadcrumbs -->
   {% url 'members' as url %}
@@ -38,6 +33,13 @@
   </ol>
   </nav>
 
+  <!-- Form messages -->
+  {% block messages %}
+    {% include "includes/form_messages.html" %}
+  {% endblock messages%}
+  {% include "includes/form_errors.html" with form=form %}
+
+
   <!-- Page header -->
   <h1>Member access and permissions</h1>
 
diff --git a/src/registrar/templates/portfolio_members_add_new.html b/src/registrar/templates/portfolio_members_add_new.html
index 7c9125b79..1e92d506a 100644
--- a/src/registrar/templates/portfolio_members_add_new.html
+++ b/src/registrar/templates/portfolio_members_add_new.html
@@ -11,11 +11,7 @@
 {% block portfolio_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%}
+
 
 <!-- Navigation breadcrumbs -->
 <nav class="usa-breadcrumb padding-top-0 bg-gray-1" aria-label="Domain request breadcrumb">
@@ -29,6 +25,12 @@
   </ol>
 </nav>
 
+  <!-- Form messages -->
+  {% block messages %}
+    {% include "includes/form_messages.html" %}
+  {% endblock messages%}
+  {% include "includes/form_errors.html" with form=form %}
+
   <!-- Page header -->
   <h1>Add a new member</h1>
 
diff --git a/src/registrar/templates/profile.html b/src/registrar/templates/profile.html
index e295a01fb..2e091e300 100644
--- a/src/registrar/templates/profile.html
+++ b/src/registrar/templates/profile.html
@@ -14,16 +14,6 @@ Edit your User Profile |
 <main id="main-content" class="grid-container grid-container--widescreen">
     <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" role="alert">
-                <div class="usa-alert__body">
-                {{ message }}
-                </div>
-            </div>
-            {% endfor %}
-            {% endif %}
-            {% include "includes/form_errors.html" with form=form %}
 
             {% if show_back_button %}
             <a href="{% url form.initial.redirect %}" class="breadcrumb__back">
@@ -35,7 +25,20 @@ Edit your User Profile |
                 </p>
             </a>
             {% endif %}
-            
+
+            <!-- Form messages -->
+            {% if messages %}
+            {% for message in messages %}
+            <div class="usa-alert usa-alert--{{ message.tags }} usa-alert--slim margin-bottom-3" role="alert">
+                <div class="usa-alert__body">
+                {{ message }}
+                </div>
+            </div>
+            {% endfor %}
+            {% endif %}
+
+            {% include "includes/form_errors.html" with form=form %}
+
             {% if show_confirmation_modal %}
                 <a
                     href="#toggle-confirmation-modal"