FXUI

App.css

@@ -6,7 +6,6 @@
   top: 0;
   width: 100%;
 }*/
-<<<<<<< HEAD
 .main {
   flex-direction: column;
   width: 100vw;
@@ -36,10 +35,6 @@
   background: #F1F1F1;
   z-index: 1;
   flex-shrink: 0;
-<<<<<<< HEAD
-=======
-  height: calc(100vh - 50px);
->>>>>>> ba414cb418cbf03c7d613b72275b476d188f0fb7
   display: flex;
   flex-direction: row;
 
@@ -59,7 +54,6 @@
   overflow-x: hidden;
 }
 
-<<<<<<< HEAD
 .horizontal_bars .sidebar{
   width: 311px;
   z-index: 1;
@@ -74,22 +68,8 @@ body {
   background: #dfdfdf;
 }
 
-=======
->>>>>>> ba414cb418cbf03c7d613b72275b476d188f0fb7
 .playground{
   background-color:#dfdfdf;
-  margin-top: 0px;
-  display: flex;
-  position: absolute;
-  top:150px;
-  left:0;
-  right: 0;
-  bottom: 0;
-  flex-direction: column;
-  position: absolute;
-  top: 0px;
-  width: 100%;
-  z-index: 0;
 }
 
 .phone{
@@ -105,6 +85,12 @@ body {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+}
+.horizontal_bars .wrapperPhone {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  position: relative;
 }
  .horizontal_bars .wrapper .sidebar{
   width: 311px;

App.js

@@ -68,23 +68,34 @@ export default class App extends React.Component {
           {this.GUI.renderMainBar()}
         </div>
         <div style={{position: 'relative'}}>
+         
           <div className="horizontal_bars">
             <div ref={this.toolboxRef} className="toolbox">
               <div className="tool_icon_bar">{this.GUI.renderToolBox()}</div>
               <div className="moduleBar">{this.GUI.renderModuleBar()}</div>
             </div> 
             
-            <div className="sidebar">
-              {this.GUI.renderSideBar()}
+            <div className="wrapper">
+              <div className="pageNav">
+                {  this.GUI.renderPageBar()}
+              </div>
+              <div className="wrapperPhone">
+                <div style={{flex:1}}>
+                  {/*This is a comment*/}
+                  <div onClick={(e) => this.dragPage(e)} className="playground" style={{zoom:this.state.zoom}}>
+                    <div className="phone">
+                      {this.GUI.mobileRender()}
+                    </div>
+                  </div>
+                </div>
+                <div className="sidebar">
+                  {this.GUI.renderSideBar()}
+                </div>
+              </div>
             </div>
           </div>         
-          {/*This is a comment*/}
-          <div onClick={(e) => this.dragPage(e)} className="playground" style={{zoom:this.state.zoom}}>
-            <div className="pageNav">{  this.GUI.renderPageBar()}</div>
-            <div className="phone">
-              {this.GUI.mobileRender()}
-            </div>
-          </div>      
+          
+                
         </div>      
       </div>
     );

Systems/Environment.js

@@ -98,7 +98,7 @@ export default class Environment extends BaseSystem {
                   //this.rowHolders(Rows)
                 }
 	          	</View>
-	          	<div ref={this.phoneRef}>
+	          	<div ref={this.phoneRef} style={{margin: 'auto'}}>
 	          		<View style={[styles.mobileView]}>
 	         			  {this.CoreSystem.render()}
 	         		  </View>