Allow playground on lg screens not just xl

Summary: This is now possible with the changes to centering the content

Reviewed By: danielbuechele

Differential Revision: D7009506

fbshipit-source-id: e2ff11d25dd6c388c82983d615e2a4c50b992583

website/src/components/DocsSidebar.css

@@ -25,7 +25,7 @@
   margin-bottom: 5px;
 }
 
-@media only screen and (max-width: 1200px) {
+@media only screen and (max-width: 992px) {
   .DocsSidebar {
     width: 100%;
     padding: 20px;

website/src/components/Toolbar.js

@@ -34,7 +34,7 @@ export default class Toolbar extends Component<Props> {
         <Link to="/docs" activeClassName="selected">Documentation</Link>
 
         <Row>
-          <Col xl={24} lg={0} md={0} sm={0} xs={0}>
+          <Col lg={24} md={0} sm={0} xs={0}>
             <Link to="/playground" activeClassName="selected">Playground</Link>
           </Col>
         </Row>

website/src/pages/index.js

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

website/src/pages/playground/index.css

@@ -1,16 +1,16 @@
-.playground {
+.playground-page {
   display: flex;
   flex: 1;
 }
 
-.playground .error-container {
+.playground-page .error-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
 
-.playground .error-text {
+.playground-page .error-text {
   color: #444950;
   line-height: 180%;
   font-size: 16px;

website/src/pages/playground/index.js

@@ -18,12 +18,12 @@ import './index.css';
 
 export default () => (
   <Page>
-	<Row className="playground">
-	  <Col xl={24} lg={0} md={0} sm={0} xs={0}>
+	<Row className="playground-page">
+      <Col lg={24} md={0} sm={0} xs={0}>
 	    <Playground height="100%" selectedNodePath={[]} persist />
 	  </Col>
 
-  	  <Col xl={0} xs={24} className="error-container">
+  	  <Col lg={0} xs={24} className="error-container">
 	    <p className="error-text">Sorry! The playground only works on larger displays currently.</p>
 	  </Col>
 	</Row>

website/src/templates/index.css

@@ -80,7 +80,7 @@
   padding-right: 3px;
 }
 
-@media only screen and (max-width: 1200px) {
+@media only screen and (max-width: 992px) {
   .playground .Playground {
     display: none;
   }