10339: Fix welcome petitioner name word wrap; adjust advanced search …

…link to display correctly on mobile;
ustaxcourt · Aug 19, 2024 · da57db7 · da57db7
1 parent fc3d85f
commit da57db7
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 6 deletions.
diff --git a/web-client/src/styles/custom.scss b/web-client/src/styles/custom.scss
@@ -2389,3 +2389,12 @@ button.change-scanner-button {
 .no-wrap-white-space {
   white-space: normal;
 }
+
+.align-items-center {
+  align-items: center;
+}
+
+.petitioner-welcome-name {
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
diff --git a/web-client/src/views/BigHeader.tsx b/web-client/src/views/BigHeader.tsx
@@ -1,10 +1,20 @@
 import React from 'react';
 
-export const BigHeader = function BigHeader({ text }: { text: string }) {
+export const BigHeader = function BigHeader({
+  className,
+  text,
+}: {
+  text: string;
+  className?: string;
+}) {
   return (
     <div className="big-blue-header">
       <div className="grid-container">
-        <h1 data-testid="header-text" tabIndex={-1}>
+        <h1
+          className={className || undefined}
+          data-testid="header-text"
+          tabIndex={-1}
+        >
           {text}
         </h1>
       </div>

diff --git a/web-client/src/views/CaseSearchBox.tsx b/web-client/src/views/CaseSearchBox.tsx
@@ -29,11 +29,11 @@ export const CaseSearchBox = connect(
           <div className="case-search margin-bottom-4">
             <div className="card" data-testid="search-for-a-case-card">
               <div className="content-wrapper gray">
-                <div className="grid-row underlined">
+                <div className="grid-row underlined display-flex align-items-center">
                   <div className="grid-col-8">
                     <h3>Search for a Case</h3>
                   </div>
-                  <div className="tablet:grid-col-4 padding-top-05">
+                  <div className="grid-col-4 margin-bottom-2">
                     {caseSearchBoxHelper.showAdvancedSearch && (
                       <a
                         className="usa-link float-right"
@@ -47,7 +47,7 @@ export const CaseSearchBox = connect(
                   </div>
                 </div>
                 {caseSearchBoxHelper.showSearchDescription && (
-                  <p>
+                  <p className="margin-bottom-2">
                     To file an Entry of Appearance, Substitution of Counsel,
                     etc.
                   </p>

diff --git a/web-client/src/views/Dashboards/DashboardPetitioner.tsx b/web-client/src/views/Dashboards/DashboardPetitioner.tsx
@@ -18,7 +18,10 @@ export const DashboardPetitioner = connect(
   function DashboardPetitioner({ dashboardExternalHelper, user }) {
     return (
       <React.Fragment>
-        <BigHeader text={`Welcome, ${user.name}`} />
+        <BigHeader
+          className="petitioner-welcome-name"
+          text={`Welcome, ${user.name}`}
+        />
         <section className="usa-section grid-container">
           <SuccessNotification />
           <ErrorNotification />