From 776761691131ca718af1225a36f48b2491127079 Mon Sep 17 00:00:00 2001
From: devinleighsmith <devinleighsmith@gmail.com>
Date: Mon, 27 May 2024 12:42:01 -0700
Subject: [PATCH] Psp 8099 - allow special instruction whitespace to display.

---
 .../detail/CompensationRequisitionDetailView.tsx          | 4 ++--
 .../CompensationRequisitionDetailView.test.tsx.snap       | 8 ++++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/CompensationRequisitionDetailView.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/CompensationRequisitionDetailView.tsx
index 4dc33f76a9..10a8c01859 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/CompensationRequisitionDetailView.tsx
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/CompensationRequisitionDetailView.tsx
@@ -249,8 +249,8 @@ export const CompensationRequisitionDetailView: React.FunctionComponent<
         >
           {prettyFormatDate(compensation.advancedPaymentServedDate)}
         </SectionField>
-        <SectionField label="Special instructions" labelWidth={'12'}>
-          {compensation.specialInstruction}
+        <SectionField label="Special instructions" labelWidth={'12'} valueClassName="pre-wrap">
+          <p style={{ whiteSpace: 'pre-wrap' }}>{compensation.specialInstruction}</p>
         </SectionField>
       </Section>
 
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/__snapshots__/CompensationRequisitionDetailView.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/__snapshots__/CompensationRequisitionDetailView.test.tsx.snap
index e6ad814a36..01d6994561 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/__snapshots__/CompensationRequisitionDetailView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/__snapshots__/CompensationRequisitionDetailView.test.tsx.snap
@@ -564,8 +564,12 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
             </label>
           </div>
           <div
-            class="c8 text-left col"
-          />
+            class="c8 pre-wrap col"
+          >
+            <p
+              style="white-space: pre-wrap;"
+            />
+          </div>
         </div>
       </div>
     </div>