Merge branch 'bugfix/680-preview-dimensions' of https://github.com/bendman/p5.js-web-editor into bendman-bugfix/680-preview-dimensions

client/modules/IDE/pages/IDEView.jsx

@@ -369,6 +369,7 @@ class IDEView extends React.Component {
                 <header className="preview-frame__header">
                   <h2 className="preview-frame__title">Preview</h2>
                 </header>
+                <div className="preview-frame__content">
                   <div className="preview-frame-overlay" ref={(element) => { this.overlay = element; }}>
                   </div>
                   <div>
@@ -405,6 +406,7 @@ class IDEView extends React.Component {
                     expandConsole={this.props.expandConsole}
                   />
                 </div>
+              </div>
             </SplitPane>
           </SplitPane>
         </div>

client/modules/IDE/reducers/files.js

@@ -31,6 +31,9 @@ const defaultCSS =
   margin: 0;
   padding: 0;
 }
+canvas {
+  display: block;
+}
 `;
 
 const initialState = () => {

client/styles/components/_preview-frame.scss

@@ -5,6 +5,11 @@
   border-width: 0;
 }
 
+.preview-frame-holder {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
 
 .preview-frame-overlay {
   height: 100%;
@@ -37,3 +42,8 @@
   font-size: #{12 / $base-font-size}rem;
   font-weight: normal;
 }
+
+.preview-frame__content {
+  position: relative;
+  flex: 1 1 0;
+}

server/scripts/examples.js

@@ -28,6 +28,9 @@ const defaultCSS =
   margin: 0;
   padding: 0;
 }
+canvas {
+  display: block;
+}
 `;
 
 const clientId = process.env.GITHUB_ID;