Fix target area max-width problem

I don't love this solution, but I remember not being able to figure out a way to not specify the max width because it is needed in order for the flowing to work. Without the max-width, the sprite tiles try to be in a row, pushing over everything else.

src/components/gui/gui.css

@@ -163,11 +163,23 @@
     */
     display: flex;
     flex-direction: column;
+}
 
-    /* Fix the max width to max stage size (defined in layout_constants.js) + gutter size */
+.stage-and-target-wrapper.large {
+    /* Fix the max width to max large stage size (defined in layout_constants.js) + gutter size */
     max-width: calc(480px + calc($space * 2));
 }
 
+.stage-and-target-wrapper.large-constrained {
+    /* Fix the max width to max largeConstrained stage size (defined in layout_constants.js) + gutter size */
+    max-width: calc(408px + calc($space * 2));
+}
+
+.stage-and-target-wrapper.small {
+    /* Fix the max width to max small stage size (defined in layout_constants.js) + gutter size */
+    max-width: calc(240px + calc($space * 2));
+}
+
 .target-wrapper {
     display: flex;
     flex-grow: 1;

src/components/gui/gui.jsx

@@ -240,7 +240,7 @@ const GUIComponent = props => {
                             ) : null}
                         </Box>
 
-                        <Box className={styles.stageAndTargetWrapper}>
+                        <Box className={classNames(styles.stageAndTargetWrapper, styles[stageSize])}>
                             <StageWrapper
                                 isRendererSupported={isRendererSupported}
                                 stageSize={stageSize}