Stop using textarea in DebugLogWindow

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 {

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}