Default to vertical layout when height > width (codesandbox#1306)

* Default to vertical layout when height > width

* Update snapshots

Author: CompuIves

packages/app/src/embed/components/App/index.js

@@ -78,7 +78,7 @@ export default class App extends React.PureComponent<{}, State> {
       forceRefresh,
       expandDevTools,
       runOnClick,
-      verticalMode,
+      verticalMode = window.innerWidth < window.innerHeight,
     } = getSandboxOptions(document.location.href);
 
     this.state = {
@@ -199,7 +199,9 @@ export default class App extends React.PureComponent<{}, State> {
         <Centered vertical horizontal>
           <Title delay={0.1}>Not Found</Title>
           <SubTitle delay={0.05}>
-            We could not find the sandbox you{"'"}re looking for.
+            We could not find the sandbox you
+            {"'"}
+            re looking for.
           </SubTitle>
         </Centered>
       );

packages/common/__snapshots__/url.test.js.snap

@@ -16,7 +16,6 @@ Object {
   "isTestPreviewWindow": false,
   "runOnClick": undefined,
   "useCodeMirror": false,
-  "verticalMode": false,
 }
 `;
 
@@ -37,7 +36,6 @@ Object {
   "isTestPreviewWindow": false,
   "runOnClick": undefined,
   "useCodeMirror": false,
-  "verticalMode": false,
 }
 `;
 
@@ -57,7 +55,6 @@ Object {
   "isTestPreviewWindow": false,
   "runOnClick": undefined,
   "useCodeMirror": false,
-  "verticalMode": false,
 }
 `;
 
@@ -77,7 +74,6 @@ Object {
   "isTestPreviewWindow": false,
   "runOnClick": undefined,
   "useCodeMirror": false,
-  "verticalMode": false,
 }
 `;
 
@@ -97,7 +93,6 @@ Object {
   "isTestPreviewWindow": false,
   "runOnClick": undefined,
   "useCodeMirror": false,
-  "verticalMode": false,
 }
 `;
 
@@ -118,7 +113,6 @@ Object {
   "isTestPreviewWindow": false,
   "runOnClick": undefined,
   "useCodeMirror": false,
-  "verticalMode": false,
 }
 `;
 
@@ -138,7 +132,6 @@ Object {
   "isTestPreviewWindow": false,
   "runOnClick": undefined,
   "useCodeMirror": false,
-  "verticalMode": false,
 }
 `;
 
@@ -158,6 +151,5 @@ Object {
   "isTestPreviewWindow": false,
   "runOnClick": undefined,
   "useCodeMirror": false,
-  "verticalMode": false,
 }
 `;

packages/common/url.js

@@ -67,7 +67,10 @@ export const getSandboxOptions = (url: string) => {
   result.enableEslint = url.includes('eslint=1');
   result.forceRefresh = url.includes('forcerefresh=1');
   result.expandDevTools = url.includes('expanddevtools=1');
-  result.verticalMode = url.includes('verticallayout=1');
+  if (url.includes('verticallayout=')) {
+    result.verticalMode = url.includes('verticallayout=1');
+  }
+  console.log(result);
   result.runOnClick = url.includes('runonclick=0')
     ? false
     : url.includes('runonclick=1')