Browser compat fixes

Author: Ives van Hoorne

src/app/components/sandbox/CodeEditor/Header.js

@@ -10,6 +10,7 @@ const Container = styled.div`
   box-shadow: 0 3px 3px ${props => props.theme.background2};
   color: ${props => props.theme.white};
   padding: 0.5rem 1rem;
+  height: 3rem;
   flex: 0 0 3rem;
   box-sizing: border-box;
   justify-content: space-between;

src/app/components/sandbox/CodeEditor/index.js

@@ -31,17 +31,14 @@ type Props = {
 };
 
 const Container = styled.div`
-  position: relative;
-  display: flex;
-  flex-direction: column;
   width: 100%;
   height: 100%;
-  overflow: auto;
 `;
 
 const CodeContainer = styled.div`
-  position: relative;
   overflow: auto;
+  width: 100%;
+  height: calc(100% - 6rem);
 `;
 
 const handleError = (cm, currentError, nextError, nextCode, nextId) => {

src/app/components/sandbox/Preview/index.js

@@ -24,7 +24,7 @@ const Container = styled.div`
 
 const StyledFrame = styled.iframe`
   border-width: 0px;
-  height: calc(100% - 6rem);
+  height: calc(100% - 3rem);
   width: 100%;
 `;
 

src/app/pages/Sandbox/Editor/Content/Header/ShareView.js

@@ -160,7 +160,7 @@ export default class ShareView extends React.PureComponent {
   };
 
   getIframeScript = () =>
-    `<iframe src=${this.getEmbedUrl()} style="width:100%; height:500px; border:0; border-radius: 3px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>`;
+    `<iframe src=${this.getEmbedUrl()} style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>`;
 
   select = function(event) {
     event.target.select();

src/app/pages/Sandbox/Editor/Content/index.js

@@ -23,7 +23,6 @@ import CodeEditor from 'app/components/sandbox/CodeEditor';
 import Preview from 'app/components/sandbox/Preview';
 
 import Header from './Header';
-import Relative from '../../../../components/Relative';
 
 type Props = {
   sandbox: Sandbox,
@@ -39,9 +38,6 @@ type State = {
 };
 
 const FullSize = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex: auto;
   height: 100%;
   width: 100%;
   pointer-events: ${props => props.inactive ? 'none' : 'all'};
@@ -164,27 +160,25 @@ class EditorPreview extends React.PureComponent {
           userActions={userActions}
           user={user}
         />
-        <div style={{ height: '100%', width: '100%', position: 'relative' }}>
-          <SplitPane
-            onDragStarted={this.startResizing}
-            onDragFinished={this.stopResizing}
-            split="vertical"
-            defaultSize="50%"
-            minSize={360}
-            primary="second"
-            paneStyle={{ height: '100%' }}
-            pane1Style={{ display: sandbox.showEditor ? 'block' : 'none' }}
-            pane2Style={{
-              display: sandbox.showPreview ? 'block' : 'none',
-              minWidth: sandbox.showPreview && !sandbox.showEditor
-                ? '100%'
-                : 'inherit',
-            }}
-          >
-            {sandbox.showEditor && EditorPane}
-            {PreviewPane}
-          </SplitPane>
-        </div>
+        <SplitPane
+          onDragStarted={this.startResizing}
+          onDragFinished={this.stopResizing}
+          split="vertical"
+          defaultSize="50%"
+          minSize={360}
+          primary="second"
+          paneStyle={{ height: '100%' }}
+          pane1Style={{ display: sandbox.showEditor ? 'block' : 'none' }}
+          pane2Style={{
+            display: sandbox.showPreview ? 'block' : 'none',
+            minWidth: sandbox.showPreview && !sandbox.showEditor
+              ? '100%'
+              : 'inherit',
+          }}
+        >
+          {sandbox.showEditor && EditorPane}
+          {PreviewPane}
+        </SplitPane>
       </FullSize>
     );
   }

src/embed/components/Content.js

@@ -20,7 +20,7 @@ const Container = styled.div`
 const Split = styled.div`
   position: relative;
   width: ${props => props.show ? '100%' : '0px'};
-  height: 100%;
+  height: ${props => props.editor ? 'calc(100% + 3rem)' : '100%'};
 `;
 
 type Props = {
@@ -67,7 +67,7 @@ export default class Content extends React.Component {
 
     return (
       <Container>
-        <Split show={showEditor}>
+        <Split editor show={showEditor}>
           {showEditor &&
             <CodeEditor
               code={mainModule.code}

src/embed/index.html

@@ -3,6 +3,7 @@
 
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
   <meta property="og:type" content="website">
   <meta property="og:author" content='https://ivesvh.com'>