diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css
index 4e322e088edad62e6bd88a39b12c6bd3db0c26d8..af7500fb0a3d9e0fd57c3bda81a3fa3fe5d97a95 100644
--- a/src/components/gui/gui.css
+++ b/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;
diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx
index 246ba79cd72241af79d8e41557d618b6ee2b6842..2d3cf79b8869eab536a4f3d7b2a1ab79f2fb59f7 100644
--- a/src/components/gui/gui.jsx
+++ b/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}