From e31ddeb10e391221ced358cf2eaa98f95d87ae39 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Thu, 14 Jun 2018 15:53:20 -0400
Subject: [PATCH] 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 | 14 +++++++++++++-
src/components/gui/gui.jsx | 2 +-
2 files changed, 14 insertions(+), 2 deletions(-)
diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css
index 4e322e088..af7500fb0 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 246ba79cd..2d3cf79b8 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}
--
GitLab