Merge pull request #991 from outoftime/frame-container

Use container div to correctly size preview iframe

Author: outoftime

src/components/PreviewFrame.jsx

@@ -110,11 +110,13 @@ class PreviewFrame extends React.Component {
     }
 
     return (
-      <iframe
-        className="preview__frame"
-        sandbox={sandboxOptions}
-        {...srcProps}
-      />
+      <div className="preview__frame-container">
+        <iframe
+          className="preview__frame"
+          sandbox={sandboxOptions}
+          {...srcProps}
+        />
+      </div>
     );
   }
 }

src/css/application.css

@@ -554,14 +554,19 @@ body {
   display: flex;
 }
 
-.preview__frame {
-  border: 0;
-  z-index: 0;
-  position: absolute;
-  top: 1.5em;
+.preview__frame-container {
+  bottom: 0;
   left: 0;
+  position: absolute;
   right: 0;
-  bottom: 0;
+  top: 1.5em;
+  z-index: 0;
+}
+
+.preview__frame {
+  border: 0;
+  height: 100%;
+  width: 100%;
 }
 
 .preview__title-bar {