Fixes #680 by adjusting canvas and iframe layout

- Set the preview canvas to `display:block` to remove vertical spacing
caused by the default value, which was making a full-height canvas cause
vertical scrolling, and the vertical scrollbar caused horizontal
scrolling
- Wrap the preview content in a container with `position:relative` and
no other visible content, so that the full-height iframe excludes the
height of the preview frame header, preventing it from going beyond the
height of the page

Author: bendman

client/modules/IDE/pages/IDEView.jsx

@@ -370,41 +370,43 @@ class IDEView extends React.Component {
                 <header className="preview-frame__header">
                   <h2 className="preview-frame__title">Preview</h2>
                 </header>
-                <div className="preview-frame-overlay" ref={(element) => { this.overlay = element; }}>
+                <div className="preview-frame__content">
+                  <div className="preview-frame-overlay" ref={(element) => { this.overlay = element; }}>
+                  </div>
+                  <div>
+                    {(
+                      (
+                        (this.props.preferences.textOutput ||
+                            this.props.preferences.gridOutput ||
+                            this.props.preferences.soundOutput
+                        ) &&
+                            this.props.ide.isPlaying
+                      ) ||
+                        this.props.ide.isAccessibleOutputPlaying
+                    )
+                    }
+                  </div>
+                  <PreviewFrame
+                    htmlFile={this.props.htmlFile}
+                    files={this.props.files}
+                    content={this.props.selectedFile.content}
+                    isPlaying={this.props.ide.isPlaying}
+                    isAccessibleOutputPlaying={this.props.ide.isAccessibleOutputPlaying}
+                    textOutput={this.props.preferences.textOutput}
+                    gridOutput={this.props.preferences.gridOutput}
+                    soundOutput={this.props.preferences.soundOutput}
+                    setTextOutput={this.props.setTextOutput}
+                    setGridOutput={this.props.setGridOutput}
+                    setSoundOutput={this.props.setSoundOutput}
+                    dispatchConsoleEvent={this.props.dispatchConsoleEvent}
+                    autorefresh={this.props.preferences.autorefresh}
+                    previewIsRefreshing={this.props.ide.previewIsRefreshing}
+                    endSketchRefresh={this.props.endSketchRefresh}
+                    stopSketch={this.props.stopSketch}
+                    setBlobUrl={this.props.setBlobUrl}
+                    expandConsole={this.props.expandConsole}
+                  />
                 </div>
-                <div>
-                  {(
-                    (
-                      (this.props.preferences.textOutput ||
-                          this.props.preferences.gridOutput ||
-                          this.props.preferences.soundOutput
-                      ) &&
-                          this.props.ide.isPlaying
-                    ) ||
-                      this.props.ide.isAccessibleOutputPlaying
-                  )
-                  }
-                </div>
-                <PreviewFrame
-                  htmlFile={this.props.htmlFile}
-                  files={this.props.files}
-                  content={this.props.selectedFile.content}
-                  isPlaying={this.props.ide.isPlaying}
-                  isAccessibleOutputPlaying={this.props.ide.isAccessibleOutputPlaying}
-                  textOutput={this.props.preferences.textOutput}
-                  gridOutput={this.props.preferences.gridOutput}
-                  soundOutput={this.props.preferences.soundOutput}
-                  setTextOutput={this.props.setTextOutput}
-                  setGridOutput={this.props.setGridOutput}
-                  setSoundOutput={this.props.setSoundOutput}
-                  dispatchConsoleEvent={this.props.dispatchConsoleEvent}
-                  autorefresh={this.props.preferences.autorefresh}
-                  previewIsRefreshing={this.props.ide.previewIsRefreshing}
-                  endSketchRefresh={this.props.endSketchRefresh}
-                  stopSketch={this.props.stopSketch}
-                  setBlobUrl={this.props.setBlobUrl}
-                  expandConsole={this.props.expandConsole}
-                />
               </div>
             </SplitPane>
           </SplitPane>

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/examples.js

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