import React from 'react';
import { bp } from 'lib/variables';

const LogViewer = ({ logs }) => (
  <React.Fragment>
    <div className="logs">
      <div className="log-viewer">{logs || 'Logs are not available.'}</div>
    </div>
    <style jsx>{`
      .logs {
        padding: 0 calc(100vw / 16) 48px;
        width: 100%;
        .log-viewer {
          background-color: #222222;
          color: #d6d6d6;
          font-family: 'Monaco', monospace;
          font-size: 12px;
          font-weight: 400;
          height: 600px;
          margin: 0;
          overflow-wrap: break-word;
          overflow-x: scroll;
          padding: calc((100vw / 16) * 0.5) calc(100vw / 16);
          white-space: pre-wrap;
          will-change: initial;
          word-break: break-all;
          word-wrap: break-word;

          @media ${bp.xs_smallUp} {
            padding: 30px;
          }
        }
      }
    `}</style>
  </React.Fragment>
);

export default LogViewer;

import React from 'react';
import { bp } from 'lib/variables';

const LogViewer = ({ logs }) => (
  <React.Fragment>
    <div className="logs">
      <div className="log-viewer">{logs || 'Logs are not available.'}</div>
    </div>
    <style jsx>{`
      .logs {
        padding: 0 calc(100vw / 16) 48px;
        width: 100%;
        .log-viewer {
          background-color: #222222;
          color: #d6d6d6;
          font-family: 'Monaco', monospace;
          font-size: 12px;
          font-weight: 400;
          margin: 0;
          overflow-wrap: break-word;
          overflow-x: scroll;
          padding: calc((100vw / 16) * 0.5) calc(100vw / 16);
          white-space: pre-wrap;
          will-change: initial;
          word-break: break-all;
          word-wrap: break-word;

          @media ${bp.xs_smallUp} {
            padding: 30px;
          }
        }
      }
    `}</style>
  </React.Fragment>
);

export default LogViewer;

Allow log container to be full height
Allow log container to be full height

When viewing deployment logs in the dashboard, the logs are typically very long, but the log window is limited to 600px heigh.  Given there is nothing else on the deployment page other than the logs, would be good if the height wasn't limited.

There's a few benefits to this:

1. Users don't have to scroll as much because more of the log output fits on their screen at once.
1. Once the container is not-height restricted, the browser's behaviour of showing where search matches occur in the document by flagging them on the its scroll bar kicks in, this is great for jumping between areas areas of the output where a search string exists.