diff --git a/src/components/stage/stage.css b/src/components/stage/stage.css index 425ebde1f..8188751d1 100644 --- a/src/components/stage/stage.css +++ b/src/components/stage/stage.css @@ -51,6 +51,8 @@ margin: auto; border: 3px solid rgb(126, 133, 151); padding: 0; + margin-top: 3px; + margin-bottom: 3px; border-radius: $space; overflow: hidden; @@ -59,6 +61,10 @@ justify-content: center; } +.stage-overlay-content-border-override { + border: none; +} + .question-wrapper { position: absolute; } diff --git a/src/components/stage/stage.jsx b/src/components/stage/stage.jsx index ed21d930b..47981e04a 100644 --- a/src/components/stage/stage.jsx +++ b/src/components/stage/stage.jsx @@ -21,25 +21,37 @@ const StageComponent = props => { onQuestionAnswered, ...boxProps } = props; - let heightCorrectedAspect = window.innerHeight - 40; - let widthCorrectedAspect = heightCorrectedAspect + (heightCorrectedAspect / 3); - if (widthCorrectedAspect > window.innerWidth) { - widthCorrectedAspect = window.innerWidth; - heightCorrectedAspect = widthCorrectedAspect * .75; + + let heightCorrectedAspect = height; + let widthCorrectedAspect = width; + const spacingBorderAdjustment = 9; + const stageMenuHeightAdjustment = 40; + if (isZoomed) { + heightCorrectedAspect = window.innerHeight - stageMenuHeightAdjustment - spacingBorderAdjustment; + widthCorrectedAspect = heightCorrectedAspect + (heightCorrectedAspect / 3); + if (widthCorrectedAspect > window.innerWidth) { + widthCorrectedAspect = window.innerWidth; + heightCorrectedAspect = widthCorrectedAspect * .75; + } } - return isZoomed === false ? ( + return (