From bbd9845e5de79412b72361ffecceb6a28fe1b86f Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew.duthie@gsa.gov>
Date: Thu, 19 May 2022 15:29:25 -0400
Subject: [PATCH] LG-6202: Collapse excess line break for single-line address

**Why**: To match the existing screen.

changelog: Upcoming Features, Identity Verification, Add password confirmation step
---
 .../personal-info-summary.spec.tsx                 | 14 ++++++++++++++
 .../password-confirm/personal-info-summary.tsx     |  9 +++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/app/javascript/packages/verify-flow/steps/password-confirm/personal-info-summary.spec.tsx b/app/javascript/packages/verify-flow/steps/password-confirm/personal-info-summary.spec.tsx
index 1ef9f3c94c7..ec74081e33e 100644
--- a/app/javascript/packages/verify-flow/steps/password-confirm/personal-info-summary.spec.tsx
+++ b/app/javascript/packages/verify-flow/steps/password-confirm/personal-info-summary.spec.tsx
@@ -18,4 +18,18 @@ describe('PersonalInfoSummary', () => {
 
     expect(getByText('October 6, 1938')).to.exist();
   });
+
+  it('renders address', () => {
+    const { getByText, rerender } = render(<PersonalInfoSummary pii={DEFAULT_PII} />);
+
+    let address = getByText('1 FAKE RDGREAT FALLS, MT 59010');
+
+    expect([...address.childNodes].filter((node) => node.nodeName === 'BR')).to.have.lengthOf(1);
+
+    rerender(<PersonalInfoSummary pii={{ ...DEFAULT_PII, address2: 'PO BOX 1' }} />);
+
+    address = getByText('1 FAKE RDPO BOX 1GREAT FALLS, MT 59010');
+
+    expect([...address.childNodes].filter((node) => node.nodeName === 'BR')).to.have.lengthOf(2);
+  });
 });
diff --git a/app/javascript/packages/verify-flow/steps/password-confirm/personal-info-summary.tsx b/app/javascript/packages/verify-flow/steps/password-confirm/personal-info-summary.tsx
index b37eaed7e3b..9cf60c81cd7 100644
--- a/app/javascript/packages/verify-flow/steps/password-confirm/personal-info-summary.tsx
+++ b/app/javascript/packages/verify-flow/steps/password-confirm/personal-info-summary.tsx
@@ -28,9 +28,14 @@ function PersonalInfoSummary({ pii }: PersonalInfoSummaryProps) {
       </div>
       <div className="margin-top-4 h6">{t('idv.review.mailing_address')}</div>
       <div className="h4 text-bold ico-absolute ico-absolute-success">
-        {address1} <br />
-        {address2 || ''}
+        {address1}
         <br />
+        {address2 && (
+          <>
+            {address2}
+            <br />
+          </>
+        )}
         {city && state ? `${city}, ${state} ${zipcode}` : ''}
       </div>
       {dob && (