From 513f7bcf5272a27af143d9e8bde4cc3b60ea64b4 Mon Sep 17 00:00:00 2001
From: devinleighsmith <41091511+devinleighsmith@users.noreply.github.com>
Date: Fri, 31 May 2024 14:13:50 -0700
Subject: [PATCH] modify tooltip render direction to avoid clipping. (#4069)

* modify tooltip render direction to avoid clipping.

* also correct remarks section.

---------

Co-authored-by: Smith <devin.smith@quartech.com>
---
 .../frontend/src/features/leases/add/LeaseDetailSubForm.tsx | 1 +
 .../detail/CompensationRequisitionDetailView.tsx            | 2 +-
 .../CompensationRequisitionDetailView.test.tsx.snap         | 6 +++++-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/source/frontend/src/features/leases/add/LeaseDetailSubForm.tsx b/source/frontend/src/features/leases/add/LeaseDetailSubForm.tsx
index b452544858..c129ab96db 100644
--- a/source/frontend/src/features/leases/add/LeaseDetailSubForm.tsx
+++ b/source/frontend/src/features/leases/add/LeaseDetailSubForm.tsx
@@ -104,6 +104,7 @@ export const LeaseDetailSubForm: React.FunctionComponent<ILeaseDetailsSubFormPro
                 <li>Archived: File to be archived as per ARCS/ORCS.</li>
               </ul>
             }
+            placement="right"
           ></TooltipIcon>
         }
         required
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 10a8c01859..80f9286c82 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
@@ -352,7 +352,7 @@ export const CompensationRequisitionDetailView: React.FunctionComponent<
 
       <Section>
         <SectionField label="Detailed remarks" labelWidth="12">
-          {compensation.detailedRemarks}
+          <p style={{ whiteSpace: 'pre-wrap' }}>{compensation.detailedRemarks}</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 01d6994561..080b8bc4e4 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
@@ -936,7 +936,11 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
           </div>
           <div
             class="c8 text-left col"
-          />
+          >
+            <p
+              style="white-space: pre-wrap;"
+            />
+          </div>
         </div>
       </div>
     </div>