Add ability to reset editor layout

Author: christianalfoni

packages/app/src/app/overmind/effects/vscode/index.ts

@@ -248,6 +248,23 @@ export class VSCodeEffect {
     }
   };
 
+  public resetLayout() {
+    if (this.editorApi) {
+      // We have to wait for the layout to actually update in the DOM
+      requestAnimationFrame(() => {
+        const rootEl = document.querySelector('#vscode-container');
+        if (rootEl) {
+          const boundingRect = rootEl.getBoundingClientRect();
+
+          this.editorApi.editorPart.layout(
+            boundingRect.width,
+            boundingRect.height
+          );
+        }
+      });
+    }
+  }
+
   /*
     We need to use a callback to set the sandbox-fs into the state of Overmind. The reason
     is that we internally read from this state to get information about the files. It is really

packages/app/src/app/overmind/namespaces/editor/actions.ts

@@ -467,8 +467,9 @@ export const quickActionsClosed: Action = ({ state }) => {
 
 export const setPreviewContent: Action = () => {};
 
-export const togglePreviewContent: Action = ({ state }) => {
+export const togglePreviewContent: Action = ({ state, effects }) => {
   state.editor.previewWindowVisible = !state.editor.previewWindowVisible;
+  effects.vscode.resetLayout();
 };
 
 export const currentTabChanged: Action<{
@@ -540,13 +541,15 @@ export const deleteEnvironmentVariable: AsyncAction<{
   effects.codesandboxApi.restartSandbox();
 };
 
-export const toggleEditorPreviewLayout: Action = ({ state }) => {
+export const toggleEditorPreviewLayout: Action = ({ state, effects }) => {
   const currentOrientation = state.editor.previewWindowOrientation;
 
   state.editor.previewWindowOrientation =
     currentOrientation === WindowOrientation.VERTICAL
       ? WindowOrientation.HORIZONTAL
       : WindowOrientation.VERTICAL;
+
+  effects.vscode.resetLayout();
 };
 
 export const previewActionReceived: Action<{