🚧 create alternate content wrapper for proper top padding

Author: ghalestrilo

client/components/mobile/IDEWrapper.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import styled from 'styled-components';
+import { remSize } from '../../theme';
+
+export default styled.div`
+  z-index: 0;
+  margin-top: ${remSize(16)};
+`;

client/modules/IDE/pages/IDEViewMobile.jsx

@@ -30,14 +30,10 @@ import IconButton from '../../../components/mobile/IconButton';
 import Header from '../../../components/mobile/Header';
 import Screen from '../../../components/mobile/MobileScreen';
 import Footer from '../../../components/mobile/Footer';
+import IDEWrapper from '../../../components/mobile/IDEWrapper';
 
 const textColor = prop('primaryTextColor');
 
-const Content = styled.div`
-  z-index: 0;
-  margin-top: ${remSize(16)};
-`;
-
 const Icon = styled.a`
   > svg {
     fill: ${textColor};
@@ -86,7 +82,7 @@ const IDEViewMobile = (props) => {
         </div>
       </Header>
 
-      <Content>
+      <IDEWrapper>
         <Editor
           lintWarning={preferences.lintWarning}
           linewrap={preferences.linewrap}
@@ -121,7 +117,7 @@ const IDEViewMobile = (props) => {
           runtimeErrorWarningVisible={ide.runtimeErrorWarningVisible}
           provideController={setTmController}
         />
-      </Content>
+      </IDEWrapper>
       <Footer><h2>Bottom Bar</h2></Footer>
     </Screen>
   );

client/modules/Mobile/MobileSketchView.jsx

@@ -3,14 +3,23 @@ import { Link } from 'react-router';
 import styled from 'styled-components';
 import Header from '../../components/mobile/Header';
 import Screen from '../../components/mobile/MobileScreen';
+
 import { ExitIcon } from '../../common/Icons';
+import { remSize } from '../../theme';
+
+
+const Content = styled.div`
+  z-index: 0;
+  margin-top: ${remSize(48)};
+`;
 
 const IconLinkWrapper = styled(Link)`
   width: 2rem;
   margin-right: 1.25rem;
   margin-left: none;
 `;
 
+
 const MobileSketchView = (props) => {
   const [overlay, setOverlay] = useState(null);
   return (
@@ -33,6 +42,35 @@ const MobileSketchView = (props) => {
           </IconButton>
         </div> */}
       </Header>
+      <Content>
+        <h1>Hello</h1>
+      </Content>
     </Screen>);
 };
+
+
 export default MobileSketchView;
+
+
+// <PreviewFrame
+//             htmlFile={this.props.htmlFile}
+//             jsFiles={this.props.jsFiles}
+//             cssFiles={this.props.cssFiles}
+//             files={this.props.files}
+//             head={
+//               <link type="text/css" rel="stylesheet" href="/preview-styles.css" />
+//             }
+//             fullView
+//             isPlaying
+//             isAccessibleOutputPlaying={false}
+//             textOutput={false}
+//             gridOutput={false}
+//             soundOutput={false}
+//             dispatchConsoleEvent={this.ident}
+//             endSketchRefresh={this.ident}
+//             previewIsRefreshing={false}
+//             setBlobUrl={this.ident}
+//             stopSketch={this.ident}
+//             expandConsole={this.ident}
+//             clearConsole={this.ident}
+//           />