From 9da1a58a65325a3ca447f7ab02a38843f1eba60d Mon Sep 17 00:00:00 2001
From: Beth Pan <xupa@microsoft.com>
Date: Tue, 10 Mar 2020 13:59:55 -0700
Subject: [PATCH] Add proper css to fix scroll. (#317)

Co-authored-by: Nikola Metulev <nmetulev@users.noreply.github.com>
---
 .../addons/codeEditorAddon/codeAddon.js          |  7 +++++--
 packages/mgt/.storybook/preview-body.html        | 16 ++++++++--------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/mgt/.storybook/addons/codeEditorAddon/codeAddon.js b/packages/mgt/.storybook/addons/codeEditorAddon/codeAddon.js
index a80dda75ad..c1ee3d717d 100644
--- a/packages/mgt/.storybook/addons/codeEditorAddon/codeAddon.js
+++ b/packages/mgt/.storybook/addons/codeEditorAddon/codeAddon.js
@@ -62,6 +62,7 @@ export const withCodeEditor = makeDecorator({
 
     let storyHtml;
     const root = document.createElement('div');
+    let storyElementWrapper = document.createElement('div');
     let storyElement;
 
     if (story.strings) {
@@ -98,14 +99,16 @@ export const withCodeEditor = makeDecorator({
 
     const separator = document.createElement('div');
 
-    setupEditorResize(storyElement, separator, editor, () => editor.layout());
+    setupEditorResize(storyElementWrapper, separator, editor, () => editor.layout());
 
     root.className = 'story-mgt-root';
+    storyElementWrapper.className = 'story-mgt-preview-wrapper';
     storyElement.className = 'story-mgt-preview';
     separator.className = 'story-mgt-separator';
     editor.className = 'story-mgt-editor';
 
-    root.appendChild(storyElement);
+    root.appendChild(storyElementWrapper);
+    storyElementWrapper.appendChild(storyElement);
     root.appendChild(separator);
     root.appendChild(editor);
 
diff --git a/packages/mgt/.storybook/preview-body.html b/packages/mgt/.storybook/preview-body.html
index f7d91ad974..1bfd1384c3 100644
--- a/packages/mgt/.storybook/preview-body.html
+++ b/packages/mgt/.storybook/preview-body.html
@@ -17,18 +17,18 @@
   }
 
   .story-mgt-preview {
+    margin: 0.5em;
+  }
+
+  .story-mgt-preview-wrapper {
     position: relative;
     height: 100%;
-    width: calc(50% - 1em);
+    width: 50%;
     float: left;
     overflow: auto;
     background-color: #ffffff;
   }
 
-  .story-mgt-preview:first-child {
-    margin: 0.5em;
-  }
-
   .story-mgt-editor {
     width: 50%;
     height: 100%;
@@ -61,8 +61,8 @@
   }
 
   @media (max-width: 768px) {
-    .story-mgt-preview {
-      height: calc(50% - 1em);
+    .story-mgt-preview-wrapper {
+      height: 50%;
       width: 100%;
     }
 
@@ -74,7 +74,7 @@
     .story-mgt-separator {
       cursor: ns-resize;
       width: 100%;
-      height: 1px;
+      height: 0px;
     }
 
     .story-mgt-separator:after {