From 201c6f9078f7baccabe8ed7096327d817cd5cabf Mon Sep 17 00:00:00 2001
From: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>
Date: Tue, 16 Aug 2022 16:19:28 -0700
Subject: [PATCH] Stop using textarea in DebugLogWindow

---
 stylesheets/components/DebugLogWindow.scss | 21 ++++++++++++++-------
 ts/components/DebugLogWindow.tsx           | 22 ++++++++++------------
 2 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/stylesheets/components/DebugLogWindow.scss b/stylesheets/components/DebugLogWindow.scss
index 78d63b02cfee..bf6624b93021 100644
--- a/stylesheets/components/DebugLogWindow.scss
+++ b/stylesheets/components/DebugLogWindow.scss
@@ -17,18 +17,25 @@
     justify-content: center;
   }
 
-  &__textarea {
-    font-family: Monaco, Consolas, 'Courier New', Courier, monospace;
-    font-size: 12px;
-    height: 100%;
-    resize: none;
-    width: 100%;
+  &__scroll_area {
+    overflow-x: hidden;
+    overflow-y: scroll;
+    max-height: 100%;
+
+    border: 1px solid $color-gray-45;
 
     @include dark-theme {
       background-color: $color-gray-90;
-      border: 1px solid $color-gray-45;
       color: $color-gray-02;
     }
+
+    &__text {
+      font-family: Monaco, Consolas, 'Courier New', Courier, monospace;
+      font-size: 12px;
+      margin: 0;
+      user-select: none;
+      white-space: pre-line;
+    }
   }
 
   &__title {
diff --git a/ts/components/DebugLogWindow.tsx b/ts/components/DebugLogWindow.tsx
index 26bf221e4287..dd1f19e82b42 100644
--- a/ts/components/DebugLogWindow.tsx
+++ b/ts/components/DebugLogWindow.tsx
@@ -199,19 +199,17 @@ export const DebugLogWindow = ({
             {i18n('debugLogExplanation')}
           </p>
         </div>
-        <div className="DebugLogWindow__container">
-          {isLoading ? (
+        {isLoading ? (
+          <div className="DebugLogWindow__container">
             <Spinner svgSize="normal" />
-          ) : (
-            <textarea
-              className="DebugLogWindow__textarea"
-              readOnly
-              rows={5}
-              spellCheck={false}
-              value={textAreaValue}
-            />
-          )}
-        </div>
+          </div>
+        ) : (
+          <div className="DebugLogWindow__scroll_area">
+            <pre className="DebugLogWindow__scroll_area__text">
+              {textAreaValue}
+            </pre>
+          </div>
+        )}
         <div className="DebugLogWindow__footer">
           <Button
             disabled={!canSave}