diff --git a/src/components/stage/stage.css b/src/components/stage/stage.css index bcd69a17b..a773f8980 100644 --- a/src/components/stage/stage.css +++ b/src/components/stage/stage.css @@ -23,9 +23,21 @@ left: 0; right: 0; bottom: 0; - width: 100% !important; - height: 100% !important; z-index: 999; + background-color: rgba(255, 255, 255, 1); +} + +.stage-overlay-content { + outline: none; + margin: auto; + border: 3px solid rgb(126, 133, 151); + padding: 0; + border-radius: $space; + + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; } .monitor-wrapper { diff --git a/src/components/stage/stage.jsx b/src/components/stage/stage.jsx index afb68e2d0..4055db163 100644 --- a/src/components/stage/stage.jsx +++ b/src/components/stage/stage.jsx @@ -1,3 +1,4 @@ +import classNames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; @@ -13,6 +14,12 @@ const StageComponent = props => { width, ...boxProps } = props; + let heightCorrectedAspect = window.innerHeight - 40; + let widthCorrectedAspect = heightCorrectedAspect + (heightCorrectedAspect / 3); + if (widthCorrectedAspect > window.innerWidth) { + widthCorrectedAspect = window.innerWidth; + heightCorrectedAspect = widthCorrectedAspect * .75; + } return isZoomed === false ? ( { ) : ( diff --git a/src/containers/stage.jsx b/src/containers/stage.jsx index e80ece5aa..51a60fda7 100644 --- a/src/containers/stage.jsx +++ b/src/containers/stage.jsx @@ -212,7 +212,9 @@ class Stage extends React.Component { return (