From 3f2add63afcffe8f2cf7df44c0ff22e7394ea7cf Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Mon, 24 Feb 2025 15:03:59 -0700
Subject: [PATCH 1/7] Light refactor of search and export component for tables

---
 .../assets/src/sass/_theme/_base.scss         |  2 -
 .../includes/domain_requests_table.html       | 46 ++---------------
 .../templates/includes/domains_table.html     | 48 ++++--------------
 .../templates/includes/members_table.html     | 44 ++--------------
 .../templates/includes/search_table.html      | 50 +++++++++++++++++++
 5 files changed, 69 insertions(+), 121 deletions(-)
 create mode 100644 src/registrar/templates/includes/search_table.html

diff --git a/src/registrar/assets/src/sass/_theme/_base.scss b/src/registrar/assets/src/sass/_theme/_base.scss
index 9ca1355c3..1c0e9b124 100644
--- a/src/registrar/assets/src/sass/_theme/_base.scss
+++ b/src/registrar/assets/src/sass/_theme/_base.scss
@@ -99,9 +99,7 @@ body {
     }
     .section-outlined__search {
       flex-grow: 4;
-      // Align right
       max-width: 383px;
-      margin-left: auto;
     }
   }
 }
diff --git a/src/registrar/templates/includes/domain_requests_table.html b/src/registrar/templates/includes/domain_requests_table.html
index 8adc0929a..38f392f20 100644
--- a/src/registrar/templates/includes/domain_requests_table.html
+++ b/src/registrar/templates/includes/domain_requests_table.html
@@ -5,53 +5,17 @@
 <span id="get_domain_requests_json_url" class="display-none">{{url}}</span>
 
 <section class="section-outlined domain-requests {% if portfolio %}section-outlined--border-base-light{% endif %}" id="domain-requests">
-    <div class="section-outlined__header margin-bottom-3 {% if not portfolio %}section-outlined__header--no-portfolio justify-content-space-between{% else %} grid-row{% endif %}">
+    <div class="section-outlined__header margin-bottom-3 {% if not portfolio %}section-outlined__header--no-portfolio flex-wrap{% else %} grid-row{% endif %}">
         {% if not portfolio %}
             <h2 id="domain-requests-header" class="display-inline-block">Domain requests</h2>
         {% else %}
         <!-- 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 %}">
-            <section aria-label="Domain requests search component" class="margin-top-2">
-                <form class="usa-search usa-search--small" method="POST" role="search">
-                    {% csrf_token %}
-                    <button class="usa-button usa-button--unstyled margin-right-3 display-none" id="domain-requests__reset-search" type="button">
-                        <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
-                            <use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
-                        </svg>
-                        Reset
-                    </button>
-                    <label id="domain-requests__search-label" class="usa-sr-only" for="domain-requests__search-field">
-                        {% if portfolio %}
-                            Search by domain name or creator
-                        {% else %}
-                            Search by domain name
-                        {% endif %}
-                    </label>                    
-                    <input
-                        class="usa-input"
-                        id="domain-requests__search-field"
-                        type="search"
-                        name="domain-requests-search"
-                        {% if portfolio %}
-                        placeholder="Search by domain name or creator"
-                        {% else %}
-                        placeholder="Search by domain name"
-                        {% endif %}
-                    />
-                    <button class="usa-button" type="submit" id="domain-requests__search-field-submit" aria-labelledby="domain-requests__search-label">
-                        <img
-                            src="{% static 'img/usa-icons-bg/search--white.svg' %}"
-                            class="usa-search__submit-icon"
-                            alt="Search"
-                        />
-                    </button>
-                </form>
-            </section>
-        </div>
-
+        <!-- ---------- SEARCH & EXPORT ---------- -->
+        {% with label_text=portfolio|yesno:"Search by domain name or creator,Search by domain name"  item_id_prefix="domain-requests" aria_label_text="Domain requests search component" %}
+            {% include "includes/search_table.html" %}
+        {% endwith %}
     </div>
 
     {% if portfolio %}
diff --git a/src/registrar/templates/includes/domains_table.html b/src/registrar/templates/includes/domains_table.html
index 3cf04a830..e172a1065 100644
--- a/src/registrar/templates/includes/domains_table.html
+++ b/src/registrar/templates/includes/domains_table.html
@@ -26,54 +26,24 @@
 {% endif %}
 
 <section class="section-outlined domains margin-top-0{% if portfolio %} section-outlined--border-base-light{% endif %}" id="domains">
-  <div class="section-outlined__header margin-bottom-3 {% if not portfolio %} section-outlined__header--no-portfolio justify-content-space-between{% else %} grid-row{% endif %}">
+  <div class="section-outlined__header margin-bottom-3 {% if not portfolio %} section-outlined__header--no-portfolio flex-wrap{% else %} grid-row{% endif %}">
     {% if not portfolio %}
       <h2 id="domains-header" class="display-inline-block">Domains</h2>
     {% else %}
       <!-- 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 %}">
-      <section aria-label="Domains search component" class="margin-top-2">
-        <form class="usa-search usa-search--small" method="POST" role="search">
-          {% csrf_token %}
-          <button class="usa-button usa-button--unstyled margin-right-3 display-none" id="domains__reset-search" type="button">
-            <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
-              <use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
-            </svg>
-            Reset
-          </button>
-          <label id="domains__search-label" class="usa-sr-only" for="domains__search-field">Search by domain name</label>
-          <input
-            class="usa-input"
-            id="domains__search-field"
-            type="search"
-            name="domains-search"
-            placeholder="Search by domain name"
-          />
-          <button class="usa-button" type="submit" id="domains__search-field-submit" aria-labelledby="domains__search-label">
-            <img
-              src="{% static 'img/usa-icons-bg/search--white.svg' %}"
-              class="usa-search__submit-icon"
-              alt="Search"
-            />
-          </button>
-        </form>
-      </section>
-    </div>
+    <!-- ---------- SEARCH & EXPORT ---------- -->
     {% 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 usa-button--justify-right">
-          <svg class="usa-icon usa-icon--large" 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
-        </a>
-      </section>
-    </div>
+      {% with label_text="Search by domain name" item_id_prefix="domains" aria_label_text="Domains search component" with_export="true" export_aria="Domains report component" export_url='export_data_type_user' %}
+          {% include "includes/search_table.html" %}
+      {% endwith %}
+    {% else %}
+      {% with label_text="Search by domain name" item_id_prefix="domains" aria_label_text="Domains search component"%}
+          {% include "includes/search_table.html" %}
+      {% endwith %}
     {% endif %}
   </div>
-
   <!-- Non org model banner -->
   {% if num_expiring_domains > 0 and not portfolio %}
   <section class="usa-site-alert--slim usa-site-alert--info margin-bottom-2 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
diff --git a/src/registrar/templates/includes/members_table.html b/src/registrar/templates/includes/members_table.html
index be1715f30..d09e6de05 100644
--- a/src/registrar/templates/includes/members_table.html
+++ b/src/registrar/templates/includes/members_table.html
@@ -7,45 +7,11 @@
 <span id="get_members_json_url" class="display-none">{{url}}</span>
 <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">
-        <section aria-label="Members search component" class="margin-top-2">
-          <form class="usa-search usa-search--small" method="POST" role="search">
-            {% csrf_token %}
-            <button class="usa-button usa-button--unstyled margin-right-3 display-none" id="members__reset-search" type="button">
-              <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
-                <use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
-              </svg>
-              Reset
-            </button>
-            <label class="usa-sr-only" for="members__search-field">Search by member name</label>
-            <input
-              class="usa-input"
-              id="members__search-field"
-              type="search"
-              name="members-search"
-              placeholder="Search by member name"
-            />
-            <button class="usa-button" type="submit" id="members__search-field-submit">
-              <img
-                src="{% static 'img/usa-icons-bg/search--white.svg' %}"
-                class="usa-search__submit-icon"
-                alt="Search"
-              />
-            </button>
-          </form>
-        </section>
-      </div>
-      <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_members_portfolio' %}" class="usa-button usa-button--unstyled usa-button--with-icon usa-button--justify-right">
-            <svg class="usa-icon usa-icon--large" 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
-          </a>
-        </section>
-      </div>
-    </div>
+    <!-- ---------- SEARCH & EXPORT ---------- -->
+    {% with label_text="Search by member name" item_id_prefix="members" aria_label_text="Members search component" with_export="true" export_aria="Members report component" export_url='export_members_portfolio'%}
+        {% include "includes/search_table.html" %}
+    {% endwith %}
+  </div>
 
     <!-- ---------- MAIN TABLE ---------- -->
     <div class="display-none margin-top-0" id="members__table-wrapper">
diff --git a/src/registrar/templates/includes/search_table.html b/src/registrar/templates/includes/search_table.html
new file mode 100644
index 000000000..6473ccf60
--- /dev/null
+++ b/src/registrar/templates/includes/search_table.html
@@ -0,0 +1,50 @@
+{% load static %}
+<div class="grid-col-12">
+    <label class="usa-label display-block maxw-none" for="{{item_id_prefix}}__search-field">
+        {{ label_text }}
+    </label> 
+</div>
+<div class="section-outlined__search section-outlined__search--widescreen {% if portfolio %}mobile:grid-col-12 desktop:grid-col-6{% endif %}">
+    <section aria-label="{{aria_label_text}}" class="margin-top-2">
+    <!-- ---------- SEARCH ---------- -->
+        <form class="usa-search usa-search--small usa-search--show-label" method="POST" role="search">
+        {% csrf_token %} 
+        <div class="usa-search--show-label__input-wrapper flex-align-self-end">
+            <input
+            class="usa-input"
+            id="{{item_id_prefix}}__search-field"
+            type="search"
+            name="{{item_id_prefix}}-search"
+            placeholder="{{label_text}}"
+            />
+            <button class="usa-button" type="submit" id="{{item_id_prefix}}__search-field-submit" aria-labelledby="{{item_id_prefix}}__search-label">
+            <img
+                src="{% static 'img/usa-icons-bg/search--white.svg' %}"
+                class="usa-search__submit-icon"
+                alt="Search"
+            />
+            </button>
+            <button class="usa-button usa-button--unstyled margin-left-1 display-none" id="{{item_id_prefix}}__reset-search" type="button">
+                <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
+                <use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
+                </svg>
+                Reset
+            </button>
+        </div>
+        </form>
+    </section>
+</div>
+<!-- ---------- EXPORT ---------- -->
+{% if with_export|lower == "true" %}
+<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="{{export_aria}}" class="margin-top-205">
+        <a href="{% url export_url %}" class="usa-button usa-button--unstyled usa-button--with-icon usa-button--justify-right">
+        <svg class="usa-icon usa-icon--large" 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
+        </a>
+    </section>
+</div>
+{% endif %}
+
+    
\ No newline at end of file

From cafc5509618960c12eeb980e5576e3407e1683a8 Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Tue, 4 Mar 2025 20:20:23 -0700
Subject: [PATCH 2/7] Fixes + Updates to meet new ACs

---
 src/registrar/templates/home.html             | 16 +++---
 .../includes/domain_requests_table.html       | 18 +++++--
 .../templates/includes/domains_table.html     | 32 ++++++++----
 src/registrar/templates/includes/export.html  | 12 +++++
 .../templates/includes/members_table.html     |  9 ++--
 src/registrar/templates/includes/search.html  | 17 ++++---
 .../templates/includes/search_table.html      | 50 -------------------
 .../templates/portfolio_requests.html         | 20 ++++----
 8 files changed, 83 insertions(+), 91 deletions(-)
 create mode 100644 src/registrar/templates/includes/export.html
 delete mode 100644 src/registrar/templates/includes/search_table.html

diff --git a/src/registrar/templates/home.html b/src/registrar/templates/home.html
index 3c96016eb..1d178d3fb 100644
--- a/src/registrar/templates/home.html
+++ b/src/registrar/templates/home.html
@@ -15,14 +15,14 @@
       {% include "includes/form_messages.html" %}
     {% endblock %}
   
-    <h1>Manage your domains</h1>
-
-    <p class="margin-top-4">
-      <button data-href="{% url 'domain-request:start' %}" class="usa-button use-button-as-link"
-      >
-        Start a new domain request
-      </button>
-    </p>
+    <div class="grid-row margin-bottom-3">
+      <h1 class="flex-fill">Manage your domains</h1>
+      <div>
+        <button data-href="{% url 'domain-request:start' %}" class="usa-button use-button-as-link">
+          Start a new domain request
+        </button>
+      </div>
+    </div>
 
     {% include "includes/domains_table.html" with user_domain_count=user_domain_count %}
     {% include "includes/domain_requests_table.html" %}
diff --git a/src/registrar/templates/includes/domain_requests_table.html b/src/registrar/templates/includes/domain_requests_table.html
index 7ddf88607..decbfcce6 100644
--- a/src/registrar/templates/includes/domain_requests_table.html
+++ b/src/registrar/templates/includes/domain_requests_table.html
@@ -4,17 +4,25 @@
 {% url 'get_domain_requests_json' as url %}
 <span id="get_domain_requests_json_url" class="display-none">{{url}}</span>
 
-<section class="section-outlined domain-requests {% if portfolio %}section-outlined--border-base-light{% endif %}" id="domain-requests">
+<section class="section-outlined domain-requests {% if portfolio %}margin-top-0 section-outlined--border-base-light{% endif %}" id="domain-requests">
     <div class="section-outlined__header margin-bottom-3 {% if not portfolio %}section-outlined__header--no-portfolio flex-wrap{% else %} grid-row{% endif %}">
         {% if not portfolio %}
-            <h2 id="domain-requests-header" class="display-inline-block">Domain requests</h2>
+        <div class="grid-row grid-col-12">
+            <h2 id="domain-requests-header" class="display-inline-block flex-fill">Domain requests</h2>
+        </div>
         {% else %}
         <!-- Embedding the portfolio value in a data attribute -->
         <span id="portfolio-js-value" data-portfolio="{{ portfolio.id }}"></span>
         {% endif %}
-        <!-- ---------- SEARCH & EXPORT ---------- -->
-        {% with label_text=portfolio|yesno:"Search by domain name or creator,Search by domain name"  item_id_prefix="domain-requests" aria_label_text="Domain requests search component" %}
-            {% include "includes/search_table.html" %}
+        <!-- ---------- SEARCH ---------- -->
+        {% with label_text=portfolio|yesno:"Search by domain name or creator,Search by domain name"  item_name="domain-requests" aria_label_text="Domain requests search component"%}
+            {% if portfolio %}
+                {% with use_search_icon="true" %}
+                    {% include "includes/search.html" %}
+                {% endwith %}
+            {% else %}
+                {% include "includes/search.html" %}
+            {% endif %}
         {% endwith %}
     </div>
 
diff --git a/src/registrar/templates/includes/domains_table.html b/src/registrar/templates/includes/domains_table.html
index c47161d67..66076283a 100644
--- a/src/registrar/templates/includes/domains_table.html
+++ b/src/registrar/templates/includes/domains_table.html
@@ -28,19 +28,33 @@
 <section class="section-outlined domains margin-top-0{% if portfolio %} section-outlined--border-base-light{% endif %}" id="domains">
   <div class="section-outlined__header margin-bottom-3 {% if not portfolio %} section-outlined__header--no-portfolio flex-wrap{% else %} grid-row{% endif %}">
     {% if not portfolio %}
-      <h2 id="domains-header" class="display-inline-block">Domains</h2>
+      <div class="grid-row grid-col-12">
+        <h2 id="domains-header" class="display-inline-block flex-fill">Domains</h2>
+        <!-- ---------- EXPORT (non-org placement) ---------- -->
+        {% if user_domain_count and user_domain_count > 0 %}
+          {% with export_aria="Domains report component" export_url='export_data_type_user' %}
+              {% include "includes/export.html" %}
+          {% endwith %}
+        {% endif %}
+      </div>
     {% else %}
       <!-- Embedding the portfolio value in a data attribute -->
       <span id="portfolio-js-value" data-portfolio="{{ portfolio.id }}"></span>
     {% endif %}
-    <!-- ---------- SEARCH & EXPORT ---------- -->
-    {% if user_domain_count and user_domain_count > 0 %}
-      {% with label_text="Search by domain name" item_id_prefix="domains" aria_label_text="Domains search component" with_export="true" export_aria="Domains report component" export_url='export_data_type_user' %}
-          {% include "includes/search_table.html" %}
-      {% endwith %}
-    {% else %}
-      {% with label_text="Search by domain name" item_id_prefix="domains" aria_label_text="Domains search component"%}
-          {% include "includes/search_table.html" %}
+    <!-- ---------- SEARCH ---------- -->
+    {% with label_text="Search by domain name" item_name="domains" aria_label_text="Domains search component"%}
+      {% if portfolio %}
+        {% with use_search_icon="true" %}
+            {% include "includes/search.html" %}
+        {% endwith %}
+      {% else %}
+        {% include "includes/search.html" %}
+      {% endif %}
+    {% endwith %}
+    <!-- ---------- EXPORT (org placement) ---------- -->
+    {% if user_domain_count and user_domain_count > 0 and portfolio%}
+      {% with export_aria="Domains report component" export_url='export_data_type_user' %}
+          {% include "includes/export.html" %}
       {% endwith %}
     {% endif %}
   </div>
diff --git a/src/registrar/templates/includes/export.html b/src/registrar/templates/includes/export.html
new file mode 100644
index 000000000..68c11a09a
--- /dev/null
+++ b/src/registrar/templates/includes/export.html
@@ -0,0 +1,12 @@
+{% load static %}
+<div class="section-outlined__utility-button mobile-lg:padding-right-105 {% if portfolio %} flex-auto desktop:padding-left-3{% endif %} margin-top-0">
+    <section aria-label="{{export_aria}}" class="margin-top-205">
+        <a href="{% url export_url %}" class="usa-button usa-button--unstyled usa-button--with-icon usa-button--justify-right">
+        <svg class="usa-icon usa-icon--large" 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
+        </a>
+    </section>
+</div>
+
+    
\ No newline at end of file
diff --git a/src/registrar/templates/includes/members_table.html b/src/registrar/templates/includes/members_table.html
index d09e6de05..2af87036f 100644
--- a/src/registrar/templates/includes/members_table.html
+++ b/src/registrar/templates/includes/members_table.html
@@ -7,9 +7,12 @@
 <span id="get_members_json_url" class="display-none">{{url}}</span>
 <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 & EXPORT ---------- -->
-    {% with label_text="Search by member name" item_id_prefix="members" aria_label_text="Members search component" with_export="true" export_aria="Members report component" export_url='export_members_portfolio'%}
-        {% include "includes/search_table.html" %}
+    <!-- ---------- SEARCH ---------- -->
+    {% with label_text="Search by member name" item_name="members" aria_label_text="Members search component" use_search_icon="true" %}
+        {% include "includes/search.html" %}
+    {% endwith %}
+    {% with export_aria="Members report component" export_url='export_members_portfolio' %}
+        {% include "includes/export.html" %}
     {% endwith %}
   </div>
 
diff --git a/src/registrar/templates/includes/search.html b/src/registrar/templates/includes/search.html
index 8c9f60cdb..b83d8935e 100644
--- a/src/registrar/templates/includes/search.html
+++ b/src/registrar/templates/includes/search.html
@@ -1,26 +1,29 @@
 {% load static %}
 
-<div class="section-outlined__search mobile:grid-col-12 desktop:grid-col-9">
+<div class="section-outlined__search tablet:grid-col">
     <section aria-label="{{aria_label_text}}">
-        <form class="usa-search usa-search--show-label" method="POST" role="search">
+        <form class="usa-search usa-search--small usa-search--show-label" method="POST" role="search">
             {% csrf_token %}
-            <label class="usa-label display-block margin-bottom-05 maxw-none" for="{{item_name}}__search-field">
+            <label class="usa-label display-block maxw-none margin-top-2 margin-bottom-1" for="{{item_id_prefix}}__search-field">
                 {{ label_text }}
-            </label>            
-            <div class="usa-search--show-label__input-wrapper flex-align-self-end">
+            </label> 
+            <div class="usa-search--show-label__input-wrapper">
                 <input
                 class="usa-input minw-15"
                 id="{{item_name}}__search-field"
                 type="search"
                 name="{{item_name}}-search"
                 />
-                <button class="usa-button" type="submit" id="{{item_name}}__search-field-submit">
-                    <span class="usa-search__submit-text">Search </span>
+                <button class="usa-button" type="submit" id="{{item_name}}__search-field-submit" aria-labelledby="{{item_id_prefix}}__search-label">
+                    {% if use_search_icon %} 
                     <img
                         src="{% static 'img/usa-icons-bg/search--white.svg' %}"
                         class="usa-search__submit-icon"
                         alt="Search"
                     />
+                    {% else %}
+                    <span class="usa-search__submit-text">Search </span>
+                    {% endif %}
                 </button>
                 <button class="usa-button usa-button--unstyled margin-left-3 display-none flex-1" id="{{item_name}}__reset-search" type="button">
                     <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
diff --git a/src/registrar/templates/includes/search_table.html b/src/registrar/templates/includes/search_table.html
deleted file mode 100644
index 6473ccf60..000000000
--- a/src/registrar/templates/includes/search_table.html
+++ /dev/null
@@ -1,50 +0,0 @@
-{% load static %}
-<div class="grid-col-12">
-    <label class="usa-label display-block maxw-none" for="{{item_id_prefix}}__search-field">
-        {{ label_text }}
-    </label> 
-</div>
-<div class="section-outlined__search section-outlined__search--widescreen {% if portfolio %}mobile:grid-col-12 desktop:grid-col-6{% endif %}">
-    <section aria-label="{{aria_label_text}}" class="margin-top-2">
-    <!-- ---------- SEARCH ---------- -->
-        <form class="usa-search usa-search--small usa-search--show-label" method="POST" role="search">
-        {% csrf_token %} 
-        <div class="usa-search--show-label__input-wrapper flex-align-self-end">
-            <input
-            class="usa-input"
-            id="{{item_id_prefix}}__search-field"
-            type="search"
-            name="{{item_id_prefix}}-search"
-            placeholder="{{label_text}}"
-            />
-            <button class="usa-button" type="submit" id="{{item_id_prefix}}__search-field-submit" aria-labelledby="{{item_id_prefix}}__search-label">
-            <img
-                src="{% static 'img/usa-icons-bg/search--white.svg' %}"
-                class="usa-search__submit-icon"
-                alt="Search"
-            />
-            </button>
-            <button class="usa-button usa-button--unstyled margin-left-1 display-none" id="{{item_id_prefix}}__reset-search" type="button">
-                <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
-                <use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
-                </svg>
-                Reset
-            </button>
-        </div>
-        </form>
-    </section>
-</div>
-<!-- ---------- EXPORT ---------- -->
-{% if with_export|lower == "true" %}
-<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="{{export_aria}}" class="margin-top-205">
-        <a href="{% url export_url %}" class="usa-button usa-button--unstyled usa-button--with-icon usa-button--justify-right">
-        <svg class="usa-icon usa-icon--large" 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
-        </a>
-    </section>
-</div>
-{% endif %}
-
-    
\ No newline at end of file
diff --git a/src/registrar/templates/portfolio_requests.html b/src/registrar/templates/portfolio_requests.html
index 4f366d0c6..d1185f46a 100644
--- a/src/registrar/templates/portfolio_requests.html
+++ b/src/registrar/templates/portfolio_requests.html
@@ -16,15 +16,18 @@
 {% endblock messages%}
 
 <div id="main-content">
-    <h1 id="domain-requests-header" class="margin-bottom-1">Domain requests</h1>
-    <div class="grid-row grid-gap">
-
+    <div class="grid-row grid-gap margin-bottom-3">
+        <div class="mobile:grid-col-12 tablet:grid-col-6"> 
+            <h1 id="domain-requests-header" class="margin-bottom-1">Domain requests</h1>
+            {% if has_edit_request_portfolio_permission %}
+                <p class="margin-y-0">Domain requests can only be modified by the person who created the request.</p>
+            {% else %}
+                <p class="margin-y-0">Domain requests can only be modified by the person who created the request.</p>
+            {% endif %}
+        </div>
+       
         {% if has_edit_request_portfolio_permission %}
             <div class="mobile:grid-col-12 tablet:grid-col-6">
-                <p class="margin-y-0">Domain requests can only be modified by the person who created the request.</p>
-            </div>
-            <div class="mobile:grid-col-12 tablet:grid-col-6">
- 
                 <p class="float-right-tablet tablet:margin-y-0">
                     <button data-href="{% url 'domain-request:start' %}" class="usa-button use-button-as-link"
                     >
@@ -32,10 +35,9 @@
                     </button>
                 </p>
             </div>
-        {% else %}
-            <p class="margin-y-0">Domain requests can only be modified by the person who created the request.</p>
         {% endif %}
     </div>
+
     
     
     {% include "includes/domain_requests_table.html" with portfolio=portfolio %}

From ccfc3c613ffa28aaa6978bf31eb126c76b333d9a Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Tue, 4 Mar 2025 20:27:26 -0700
Subject: [PATCH 3/7] fix aria label

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

diff --git a/src/registrar/templates/includes/search.html b/src/registrar/templates/includes/search.html
index b83d8935e..ac85f2544 100644
--- a/src/registrar/templates/includes/search.html
+++ b/src/registrar/templates/includes/search.html
@@ -4,7 +4,7 @@
     <section aria-label="{{aria_label_text}}">
         <form class="usa-search usa-search--small usa-search--show-label" method="POST" role="search">
             {% csrf_token %}
-            <label class="usa-label display-block maxw-none margin-top-2 margin-bottom-1" for="{{item_id_prefix}}__search-field">
+            <label id="{{item_name}}__search-label" class="usa-label display-block maxw-none margin-top-2 margin-bottom-1" for="{{item_id_prefix}}__search-field">
                 {{ label_text }}
             </label> 
             <div class="usa-search--show-label__input-wrapper">

From e6bfc40c3fb019b4835feaa958e7c9102dcc0fc0 Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Thu, 6 Mar 2025 15:59:40 -0700
Subject: [PATCH 4/7] updated searchbar to not use the icon...anywhere

---
 .../templates/includes/domain_requests_table.html         | 8 +-------
 src/registrar/templates/includes/domains_table.html       | 8 +-------
 src/registrar/templates/includes/members_table.html       | 2 +-
 3 files changed, 3 insertions(+), 15 deletions(-)

diff --git a/src/registrar/templates/includes/domain_requests_table.html b/src/registrar/templates/includes/domain_requests_table.html
index decbfcce6..71f7a5b2a 100644
--- a/src/registrar/templates/includes/domain_requests_table.html
+++ b/src/registrar/templates/includes/domain_requests_table.html
@@ -16,13 +16,7 @@
         {% endif %}
         <!-- ---------- SEARCH ---------- -->
         {% with label_text=portfolio|yesno:"Search by domain name or creator,Search by domain name"  item_name="domain-requests" aria_label_text="Domain requests search component"%}
-            {% if portfolio %}
-                {% with use_search_icon="true" %}
-                    {% include "includes/search.html" %}
-                {% endwith %}
-            {% else %}
-                {% include "includes/search.html" %}
-            {% endif %}
+            {% include "includes/search.html" %}
         {% endwith %}
     </div>
 
diff --git a/src/registrar/templates/includes/domains_table.html b/src/registrar/templates/includes/domains_table.html
index 66076283a..d274a4f61 100644
--- a/src/registrar/templates/includes/domains_table.html
+++ b/src/registrar/templates/includes/domains_table.html
@@ -43,13 +43,7 @@
     {% endif %}
     <!-- ---------- SEARCH ---------- -->
     {% with label_text="Search by domain name" item_name="domains" aria_label_text="Domains search component"%}
-      {% if portfolio %}
-        {% with use_search_icon="true" %}
-            {% include "includes/search.html" %}
-        {% endwith %}
-      {% else %}
-        {% include "includes/search.html" %}
-      {% endif %}
+      {% include "includes/search.html" %}
     {% endwith %}
     <!-- ---------- EXPORT (org placement) ---------- -->
     {% if user_domain_count and user_domain_count > 0 and portfolio%}
diff --git a/src/registrar/templates/includes/members_table.html b/src/registrar/templates/includes/members_table.html
index 2af87036f..f93b0d3c8 100644
--- a/src/registrar/templates/includes/members_table.html
+++ b/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 ---------- -->
-    {% with label_text="Search by member name" item_name="members" aria_label_text="Members search component" use_search_icon="true" %}
+    {% with label_text="Search by member name" item_name="members" aria_label_text="Members search component"%}
         {% include "includes/search.html" %}
     {% endwith %}
     {% with export_aria="Members report component" export_url='export_members_portfolio' %}

From 39eb317afbd25eeb434706118e7a41d244b2d3e3 Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Thu, 6 Mar 2025 16:02:11 -0700
Subject: [PATCH 5/7] fixed if/else statement

---
 src/registrar/templates/portfolio_requests.html | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/registrar/templates/portfolio_requests.html b/src/registrar/templates/portfolio_requests.html
index d1185f46a..978d28f3b 100644
--- a/src/registrar/templates/portfolio_requests.html
+++ b/src/registrar/templates/portfolio_requests.html
@@ -19,11 +19,7 @@
     <div class="grid-row grid-gap margin-bottom-3">
         <div class="mobile:grid-col-12 tablet:grid-col-6"> 
             <h1 id="domain-requests-header" class="margin-bottom-1">Domain requests</h1>
-            {% if has_edit_request_portfolio_permission %}
                 <p class="margin-y-0">Domain requests can only be modified by the person who created the request.</p>
-            {% else %}
-                <p class="margin-y-0">Domain requests can only be modified by the person who created the request.</p>
-            {% endif %}
         </div>
        
         {% if has_edit_request_portfolio_permission %}

From 7a128077b98eaa8651c0b8b4c3782081194f2b38 Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Fri, 7 Mar 2025 13:24:46 -0700
Subject: [PATCH 6/7] Fix wrapping and search icon responsiveness for small
 screen sizes.  Also fixed aria labels (merge error)

---
 .../templates/includes/domain_requests_table.html        | 2 +-
 src/registrar/templates/includes/domains_table.html      | 2 +-
 src/registrar/templates/includes/search.html             | 9 ++++-----
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/registrar/templates/includes/domain_requests_table.html b/src/registrar/templates/includes/domain_requests_table.html
index 71f7a5b2a..377a69add 100644
--- a/src/registrar/templates/includes/domain_requests_table.html
+++ b/src/registrar/templates/includes/domain_requests_table.html
@@ -5,7 +5,7 @@
 <span id="get_domain_requests_json_url" class="display-none">{{url}}</span>
 
 <section class="section-outlined domain-requests {% if portfolio %}margin-top-0 section-outlined--border-base-light{% endif %}" id="domain-requests">
-    <div class="section-outlined__header margin-bottom-3 {% if not portfolio %}section-outlined__header--no-portfolio flex-wrap{% else %} grid-row{% endif %}">
+    <div class="section-outlined__header margin-bottom-3 grid-row">
         {% if not portfolio %}
         <div class="grid-row grid-col-12">
             <h2 id="domain-requests-header" class="display-inline-block flex-fill">Domain requests</h2>
diff --git a/src/registrar/templates/includes/domains_table.html b/src/registrar/templates/includes/domains_table.html
index d274a4f61..17a956935 100644
--- a/src/registrar/templates/includes/domains_table.html
+++ b/src/registrar/templates/includes/domains_table.html
@@ -26,7 +26,7 @@
 {% endif %}
 
 <section class="section-outlined domains margin-top-0{% if portfolio %} section-outlined--border-base-light{% endif %}" id="domains">
-  <div class="section-outlined__header margin-bottom-3 {% if not portfolio %} section-outlined__header--no-portfolio flex-wrap{% else %} grid-row{% endif %}">
+  <div class="section-outlined__header margin-bottom-3 grid-row">
     {% if not portfolio %}
       <div class="grid-row grid-col-12">
         <h2 id="domains-header" class="display-inline-block flex-fill">Domains</h2>
diff --git a/src/registrar/templates/includes/search.html b/src/registrar/templates/includes/search.html
index ac85f2544..479a8e986 100644
--- a/src/registrar/templates/includes/search.html
+++ b/src/registrar/templates/includes/search.html
@@ -2,9 +2,9 @@
 
 <div class="section-outlined__search tablet:grid-col">
     <section aria-label="{{aria_label_text}}">
-        <form class="usa-search usa-search--small usa-search--show-label" method="POST" role="search">
+        <form class="usa-search {% if use_search_icon %} usa-search--small {% else %} usa-search--default {% endif %}usa-search--show-label" method="POST" role="search">
             {% csrf_token %}
-            <label id="{{item_name}}__search-label" class="usa-label display-block maxw-none margin-top-2 margin-bottom-1" for="{{item_id_prefix}}__search-field">
+            <label id="{{item_name}}__search-label" class="usa-label display-block maxw-none margin-top-2 margin-bottom-1" for="{{item_name}}__search-field">
                 {{ label_text }}
             </label> 
             <div class="usa-search--show-label__input-wrapper">
@@ -14,14 +14,13 @@
                 type="search"
                 name="{{item_name}}-search"
                 />
-                <button class="usa-button" type="submit" id="{{item_name}}__search-field-submit" aria-labelledby="{{item_id_prefix}}__search-label">
-                    {% if use_search_icon %} 
+                <button class="usa-button" type="submit" id="{{item_name}}__search-field-submit" aria-labelledby="{{item_name}}__search-label">
                     <img
                         src="{% static 'img/usa-icons-bg/search--white.svg' %}"
                         class="usa-search__submit-icon"
                         alt="Search"
                     />
-                    {% else %}
+                    {% if not use_search_icon %} 
                     <span class="usa-search__submit-text">Search </span>
                     {% endif %}
                 </button>

From a9e51ad80cde9a689e5c3f3f1ff40a35e3e47764 Mon Sep 17 00:00:00 2001
From: zandercymatics <141044360+zandercymatics@users.noreply.github.com>
Date: Mon, 10 Mar 2025 08:35:43 -0600
Subject: [PATCH 7/7] Update export.html

---
 src/registrar/templates/includes/export.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/registrar/templates/includes/export.html b/src/registrar/templates/includes/export.html
index 68c11a09a..7ed003e88 100644
--- a/src/registrar/templates/includes/export.html
+++ b/src/registrar/templates/includes/export.html
@@ -1,11 +1,11 @@
 {% load static %}
 <div class="section-outlined__utility-button mobile-lg:padding-right-105 {% if portfolio %} flex-auto desktop:padding-left-3{% endif %} margin-top-0">
     <section aria-label="{{export_aria}}" class="margin-top-205">
-        <a href="{% url export_url %}" class="usa-button usa-button--unstyled usa-button--with-icon usa-button--justify-right">
-        <svg class="usa-icon usa-icon--large" 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
-        </a>
+        <button data-href="{% url export_url %}" class="usa-button usa-button--unstyled usa-button--with-icon usa-button--justify-right use-button-as-link">
+            <svg class="usa-icon usa-icon--large" 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
+        </button>
     </section>
 </div>