visually center root node

Summary: root node is now centerwed between edge and editor

Reviewed By: emilsjolander

Differential Revision: D6989159

fbshipit-source-id: ce2621402d380843125fabc43452c64ea3b563dd

website/src/components/Playground/index.css

@@ -49,6 +49,10 @@
   align-self: center;
 }
 
+.Playground.standalone > .YogaNode {
+  transform: translateX(-175px);
+}
+
 .Playground .Actions {
   padding: 15px;
 }

website/src/components/Playground/index.js

@@ -218,7 +218,7 @@ export default class Playground extends Component<Props, State> {
 
     const playground = (
       <div
-        className="Playground"
+        className={`Playground ${this.props.renderSidebar ? '' : 'standalone'}`}
         onMouseDown={this.onMouseDown}
         style={{height, maxHeight: height}}
         ref={ref => {
@@ -232,6 +232,7 @@ export default class Playground extends Component<Props, State> {
           direction={direction}
           showGuides={this.props.showGuides}
         />
+        {!this.props.renderSidebar && (
           <Sidebar>
             <div className="Actions">
               <Row gutter={15}>
@@ -273,6 +274,7 @@ export default class Playground extends Component<Props, State> {
               </div>
             )}
           </Sidebar>
+        )}
       </div>
     );
 

website/src/pages/index.js

@@ -58,7 +58,7 @@ const HeroSection = () => (
 const PlaygroundSection = () => (
   <Row>
     <Col xl={24} lg={0} md={0} sm={0} xs={0}>
-      <Playground selectedNodePath={[]} showGuides={false} height={600} />
+      <Playground selectedNodePath={[]} showGuides={false} height={601} />
     </Col>
   </Row>
 );