Fix repl output not wrapping

source-academy · May 24, 2018 · 4f75ca2 · 4f75ca2
1 parent ebf1adf
commit 4f75ca2
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 14 deletions.
diff --git a/src/components/IDE/Repl.tsx b/src/components/IDE/Repl.tsx
@@ -36,44 +36,44 @@ export const Output: React.SFC<IOutputProps> = props => {
     case 'code':
       return (
         <Card>
-          <code>{props.output.value}</code>
+          <pre>{props.output.value}</pre>
         </Card>
       )
     case 'running':
       return (
         <Card>
-          <code>{props.output.consoleLogs.join('\n')}</code>
+          <pre>{props.output.consoleLogs.join('\n')}</pre>
         </Card>
       )
     case 'result':
       if (props.output.consoleLogs.length === 0) {
         return (
           <Card>
-            <code>{toString(props.output.value)}</code>
+            <pre>{toString(props.output.value)}</pre>
           </Card>
         )
       } else {
         return (
           <Card>
-            <code>
+            <pre>
               {[props.output.consoleLogs.join('\n'), toString(props.output.value)].join('\n')}
-            </code>
+            </pre>
           </Card>
         )
       }
     case 'errors':
       if (props.output.consoleLogs.length === 0) {
         return (
           <Card>
-            <code>{parseError(props.output.errors)}</code>
+            <pre>{parseError(props.output.errors)}</pre>
           </Card>
         )
       } else {
         return (
           <Card>
-            <code>
+            <pre>
               {[props.output.consoleLogs.join('\n'), parseError(props.output.errors)].join('\n')}
-            </code>
+            </pre>
           </Card>
         )
       }

diff --git a/src/components/IDE/ReplControl.tsx b/src/components/IDE/ReplControl.tsx
@@ -34,8 +34,8 @@ class ReplControl extends React.Component<IReplControlProps, {}> {
     return (
       <div className="row end-xs">
         <div className="pt-control-group pt-fill">
-            {evalButton}
-            {clearButton}
+          {evalButton}
+          {clearButton}
         </div>
       </div>
     )

diff --git a/src/components/IDE/__tests__/__snapshots__/Repl.tsx.snap b/src/components/IDE/__tests__/__snapshots__/Repl.tsx.snap
@@ -2,9 +2,9 @@
 
 exports[`Output renders correctly for InterpreterOutput.type === 'result' 1`] = `
 "<Blueprint2.Card elevation={0} interactive={false}>
-  <code>
+  <pre>
     &quot;def&quot;
-  </code>
+  </pre>
 </Blueprint2.Card>"
 `;
 

diff --git a/src/styles/_ide.scss b/src/styles/_ide.scss
@@ -55,12 +55,12 @@
       margin: 0.5rem;
       margin-top: 0rem;
 
-      code {
+      pre {
         background-color: transparent;
         box-shadow: none;
         color: inherit;
         padding: 0px;
-        white-space: pre;
+        white-space: pre-wrap;
       }
     }