diff --git a/src/components/modal/modal.css b/src/components/modal/modal.css index 46794639d82f5a61eb7f6e084036519c0a913e2e..2a69d8ba63df54fa1973bcc98e8141dcbc499126 100644 --- a/src/components/modal/modal.css +++ b/src/components/modal/modal.css @@ -11,6 +11,10 @@ background-color: $ui-modal-overlay; } +.modal-content * { + box-sizing: border-box; +} + .modal-content { margin: 100px auto; outline: none; diff --git a/src/containers/gui.jsx b/src/containers/gui.jsx index f67d4df7449c0bb24688629b37e8e34c45e51be6..c4e105d669a27d626a003a86cfc37b17c2f94273 100644 --- a/src/containers/gui.jsx +++ b/src/containers/gui.jsx @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import VM from 'scratch-vm'; import {connect} from 'react-redux'; +import ReactModal from 'react-modal'; import {openExtensionLibrary} from '../reducers/modals'; import { @@ -120,4 +121,7 @@ const ConnectedGUI = connect( mapDispatchToProps, )(GUI); -export default ProjectLoaderHOC(AppStateHOC(vmListenerHOC(ConnectedGUI))); +const WrappedGui = ProjectLoaderHOC(AppStateHOC(vmListenerHOC(ConnectedGUI))); + +WrappedGui.setAppElement = ReactModal.setAppElement; +export default WrappedGui; diff --git a/src/playground/index.jsx b/src/playground/index.jsx index 26709ad76e6b2e7cccf009f6a0b7b100377ef686..7d138947034ac47ff0b4657b2611f2102f7e2e46 100644 --- a/src/playground/index.jsx +++ b/src/playground/index.jsx @@ -1,7 +1,6 @@ import 'es6-object-assign/auto'; import React from 'react'; import ReactDOM from 'react-dom'; -import Modal from 'react-modal'; import analytics from '../lib/analytics'; import GUI from '../containers/gui.jsx'; @@ -20,6 +19,6 @@ const appTarget = document.createElement('div'); appTarget.className = styles.app; document.body.appendChild(appTarget); -Modal.setAppElement(appTarget); +GUI.setAppElement(appTarget); ReactDOM.render(<GUI />, appTarget);