fixed aspect ratio when stage is zoomed fullscreen

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 {

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 ? (
         <Box className={styles.stageWrapper}>
             <Box
@@ -30,11 +37,11 @@ const StageComponent = props => {
     ) : (
         <Box className={styles.stageWrapperOverlay}>
             <Box
-                className={styles.stage}
+                className={classNames(styles.stage, styles.stageOverlayContent)}
                 componentRef={canvasRef}
                 element="canvas"
-                height={'100%'}
-                width={'100%'}
+                height={heightCorrectedAspect}
+                width={widthCorrectedAspect}
                 {...boxProps}
             />
             <Box className={styles.monitorWrapper}>

src/containers/stage.jsx

@@ -212,7 +212,9 @@ class Stage extends React.Component {
         return (
             <StageComponent
                 canvasRef={this.setCanvas}
+                height={this.props.height}
                 isZoomed={this.state.isZoomed}
+                width={this.props.width}
                 onDoubleClick={this.handleDoubleClick}
                 {...props}
             />