Add proper css to fix scroll. (#317)

Co-authored-by: Nikola Metulev <nmetulev@users.noreply.github.com>
microsoftgraph · Jun 9, 2020 · 9da1a58 · 9da1a58
1 parent e01901d
commit 9da1a58
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git 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
@@ -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 {