fix: remove hardcoded styling for default layout

Author: elevatebart

demo/App.vue

@@ -13,15 +13,16 @@
     <h2>Use the requires prop to make libraries and packages available in the browser</h2>
     <VueLive :code="codeChicago" :layout="CustomLayout" :requires="chicagoRequires"/>
     <h2>Default Layout</h2>
-    <VueLive :code="`<input type='button' value='I am Groot'>`"/>
-    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
+    <div style="width:950px; width:950px; max-width:95vw; margin:20px auto;">
+      <VueLive :code="`<input type='button' value='I am Groot'>`"/>
+      <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
+    </div>
   </main>
 </template>
 <script>
 import VueLive from "../src/VueLive";
 import CustomLayout from "./CustomLayout";
 import DatePicker from "vuejs-datepicker";
-// eslint-disable-next-line import/no-webpack-loader-syntax
 import codeSfc from "!!raw-loader!./assets/Button.vue";
 import codeJs from "!!raw-loader!./assets/input.js";
 import codeTemplate from "!!raw-loader!./assets/PureTemplate.html";

src/VueLiveDefaultLayout.vue

@@ -1,12 +1,9 @@
 <template functional>
-  <div
-    class="vue-live-container"
-    style="display:flex; width:950px; max-width:95vw; margin:20px auto;"
-  >
+  <div class="vue-live-container" style="display:flex; ">
     <div style="width:50%;">
       <slot name="editor"></slot>
     </div>
-    <div style="background-color:white;width:50%;padding:20px;">
+    <div style="background-color:white;width:50%;">
       <slot name="preview"></slot>
     </div>
   </div>