From 76feee9125792c04836afb63a4cc8785f9ce92fc Mon Sep 17 00:00:00 2001
From: PintoGideon <gideonpinto123@gmail.com>
Date: Thu, 24 Aug 2023 10:59:44 -0400
Subject: [PATCH] Add a scroll to the text display and preserve cariage returns

---
 .../feed/Preview/displays/TextDisplay.tsx     | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/feed/Preview/displays/TextDisplay.tsx b/src/components/feed/Preview/displays/TextDisplay.tsx
index 73813ec7f..327f71cac 100644
--- a/src/components/feed/Preview/displays/TextDisplay.tsx
+++ b/src/components/feed/Preview/displays/TextDisplay.tsx
@@ -16,7 +16,7 @@ const TextDisplay: React.FunctionComponent<AllProps> = (props: AllProps) => {
         "load",
         () => {
           //@ts-ignore
-          textDisplay.innerHTML = reader.result;
+          textDisplay.innerText = reader.result;
         },
         false
       );
@@ -31,12 +31,22 @@ const TextDisplay: React.FunctionComponent<AllProps> = (props: AllProps) => {
     <Fragment>
       <div
         style={{
-          fontFamily: "monospace",
-          fontSize: "1rem",
-          color: "white",
+          display: "block",
+          padding: "15px",
+          width: "100%",
+          height: "350px",
+          overflowY: "scroll",
         }}
-        id="text-display"
-      ></div>
+      >
+        <span
+          id="text-display"
+          style={{
+            fontFamily: "monospace",
+            fontSize: "1rem",
+            color: "white",
+          }}
+        ></span>
+      </div>
     </Fragment>
   );
 };