From 81a35631814c3b5f3ac622b2d884e16cd4a47e10 Mon Sep 17 00:00:00 2001
From: Nilay Majorwar <nilaymajorwar@gmail.com>
Date: Wed, 26 Jan 2022 01:37:54 +0530
Subject: [PATCH] Improve output wrapping, fix typo in editor themes

---
 ui/code-editor/themes/dark.json  | 2 +-
 ui/code-editor/themes/light.json | 2 +-
 ui/output-viewer.tsx             | 6 +++++-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/ui/code-editor/themes/dark.json b/ui/code-editor/themes/dark.json
index edc1a0b..f8cf18d 100644
--- a/ui/code-editor/themes/dark.json
+++ b/ui/code-editor/themes/dark.json
@@ -97,7 +97,7 @@
     },
     {
       "foreground": "#2EE6D6",
-      "token": "turqoise"
+      "token": "turquoise"
     },
     {
       "foreground": "#62D96B",
diff --git a/ui/code-editor/themes/light.json b/ui/code-editor/themes/light.json
index 778a3b2..28459e4 100644
--- a/ui/code-editor/themes/light.json
+++ b/ui/code-editor/themes/light.json
@@ -116,7 +116,7 @@
     },
     {
       "foreground": "#00B3A4",
-      "token": "turqoise"
+      "token": "turquoise"
     },
     {
       "foreground": "#29A634",
diff --git a/ui/output-viewer.tsx b/ui/output-viewer.tsx
index e7dfe14..c27040e 100644
--- a/ui/output-viewer.tsx
+++ b/ui/output-viewer.tsx
@@ -43,7 +43,11 @@ const OutputViewerComponent = (_: {}, ref: React.Ref<OutputViewerRef>) => {
 
   return (
     <div style={{ padding: 10, fontSize: 16 }}>
-      <Text style={{ fontFamily: "monospace" }}>{value}</Text>
+      <pre
+        style={{ margin: 0, whiteSpace: "pre-wrap", wordWrap: "break-word" }}
+      >
+        {value}
+      </pre>
       {value && <div style={{ height: 10 }} />}
       <Text style={{ fontFamily: "monospace", color: Colors.RED3 }}>
         {error}