Improve display of stdout/stderr task errors

Improves navigation on results page by assuring that browser does wrap
long lines in results <pre> blocks.

Trackpad users are most affected by this because when they scroll a
page vertically, the browser will attempt to also do some horizontal
scrolling of the <pre> block.

The previous experience was relatively similar to the old iframes.

Change-Id: I970c421997b01c27a8f5da431115a3a811499dd8

web/src/containers/build/BuildOutput.jsx

@@ -68,21 +68,17 @@ class BuildOutput extends React.Component {
             <pre key="msg">{task.msg}</pre>
           )}
           {task.exception && (
-            <pre key="exc">{task.exception}</pre>
+            <pre key="exc" style={{ color: 'red' }}>{task.exception}</pre>
           )}
           {task.stdout_lines && task.stdout_lines.length > 0 && (
-            <span key="stdout" style={{whiteSpace: 'pre'}} title="stdout">
-              {task.stdout_lines.slice(-42).map((line, idx) => (
-                <span key={idx}>{line}<br/></span>))}
-              <br />
-            </span>
+            <pre key="stdout" style={{ whiteSpace: 'pre-wrap' }} title="stdout">
+              {task.stdout_lines.slice(-42).join('\n')}
+            </pre>
           )}
           {task.stderr_lines && task.stderr_lines.length > 0 && (
-            <span key="stderr" style={{whiteSpace: 'pre'}} title="stderr">
-              {task.stderr_lines.slice(-42).map((line, idx) => (
-                <span key={idx}>{line}<br/></span>))}
-              <br />
-            </span>
+            <pre key="stderr" style={{whiteSpace: 'pre-wrap', color: 'red'}} title="stderr">
+              {task.stderr_lines.slice(-42).join('\n')}
+            </pre>
           )}
         </Panel.Body>
       </Panel>

web/src/containers/job/JobVariant.jsx

@@ -126,7 +126,7 @@ class JobVariant extends React.Component {
       }
       if (label === 'variables') {
         value = (
-          <span style={{whiteSpace: 'pre'}}>
+          <span style={{whiteSpace: 'pre-wrap'}}>
             <ReactJson
               src={value}
               name={null}
@@ -138,7 +138,7 @@ class JobVariant extends React.Component {
       }
       if (label === 'description') {
         const style = {
-          whiteSpace: 'pre'
+          whiteSpace: 'pre-wrap'
         }
         if (descriptionMaxHeight > 0) {
           style.minHeight = descriptionMaxHeight

web/src/pages/ConfigErrors.jsx

@@ -51,7 +51,7 @@ class ConfigErrorsPage extends React.Component {
               return (
                 <li className="list-group-item" key={idx}>
                   <h3>{item.source_context.project} - {ctxPath}</h3>
-                  <p style={{whiteSpace: 'pre'}}>
+                  <p style={{whiteSpace: 'pre-wrap'}}>
                     {item.error}
                   </p>
                 </li>