From 32805c168152efa65ca94d3d681830a3442c5d3c Mon Sep 17 00:00:00 2001
From: Jacob Shandling <61553566+jacobshandling@users.noreply.github.com>
Date: Fri, 1 Dec 2023 09:11:36 -0800
Subject: [PATCH] =?UTF-8?q?UI=20=E2=80=93=20Show=20line=20breaks=20in=20Po?=
 =?UTF-8?q?licy=20details=20modals=20(#15354)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Addresses #14484

<img width="653" alt="Screenshot 2023-11-28 at 2 05 26 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/7af9d880-d3fd-443b-94f6-8135f5ce506a">


- [x] Changes file added for user-visible changes in `changes/`
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
---
 changes/14484-whitespace-in-policies           |  1 +
 .../PolicyDetailsModal/PolicyDetailsModal.tsx  |  8 +++++---
 .../PolicyDetailsModal/_styles.scss            | 18 ++++++++----------
 3 files changed, 14 insertions(+), 13 deletions(-)
 create mode 100644 changes/14484-whitespace-in-policies

diff --git a/changes/14484-whitespace-in-policies b/changes/14484-whitespace-in-policies
new file mode 100644
index 0000000000..46ae53bb34
--- /dev/null
+++ b/changes/14484-whitespace-in-policies
@@ -0,0 +1 @@
+- Render whitespace in policy descriptions and resolutions
diff --git a/frontend/pages/hosts/details/cards/Policies/HostPoliciesTable/PolicyDetailsModal/PolicyDetailsModal.tsx b/frontend/pages/hosts/details/cards/Policies/HostPoliciesTable/PolicyDetailsModal/PolicyDetailsModal.tsx
index 4956486958..3d85be82f8 100644
--- a/frontend/pages/hosts/details/cards/Policies/HostPoliciesTable/PolicyDetailsModal/PolicyDetailsModal.tsx
+++ b/frontend/pages/hosts/details/cards/Policies/HostPoliciesTable/PolicyDetailsModal/PolicyDetailsModal.tsx
@@ -22,11 +22,13 @@ const PolicyDetailsModal = ({
       onExit={onCancel}
       className={baseClass}
     >
-      <div className={`${baseClass}__modal-body`}>
-        <p>{policy?.description}</p>
+      <div className={`${baseClass}__body`}>
+        <span className={`${baseClass}__description`}>
+          {policy?.description}
+        </span>
         {policy?.resolution && (
           <div className={`${baseClass}__resolution`}>
-            <span className={`${baseClass}__resolve-header`}> Resolve:</span>
+            <span className={`${baseClass}__resolution-header`}>Resolve:</span>
             {policy?.resolution && <ClickableUrls text={policy?.resolution} />}
           </div>
         )}
diff --git a/frontend/pages/hosts/details/cards/Policies/HostPoliciesTable/PolicyDetailsModal/_styles.scss b/frontend/pages/hosts/details/cards/Policies/HostPoliciesTable/PolicyDetailsModal/_styles.scss
index 3c48165687..835644f9bb 100644
--- a/frontend/pages/hosts/details/cards/Policies/HostPoliciesTable/PolicyDetailsModal/_styles.scss
+++ b/frontend/pages/hosts/details/cards/Policies/HostPoliciesTable/PolicyDetailsModal/_styles.scss
@@ -1,15 +1,13 @@
 .policy-details-modal {
+  &__body {
+    white-space: pre-wrap;
+  }
   &__resolution {
-    p {
-      margin-top: $pad-xsmall;
-    }
-  }
-
-  &__resolve-header {
-    font-weight: $bold;
-  }
-
-  .policy-details-modal__resolution {
+    margin-top: $pad-small;
     overflow: hidden;
   }
+
+  &__resolution-header {
+    font-weight: $bold;
+  }
 }