fix: docs sanbox overflow

Author: frankpagan

demo/atomic-css.html

@@ -729,14 +729,14 @@ <h2 class="padding:5px_0px">Demo</h2>
                     </div>
                     <div class="position:sticky top:0 padding:15px_0px height:100vh">
                         <!-- SandBox -->
-                        <div class="position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px" id="playground">
+                        <div class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px" id="playground">
 
                             <div id="demo-code" resizable class="position:relative height:50%">
                                 <textarea type="code" lang="html" collection="demos" document_id="" name="demo" save="false" id="demo" class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
                                 <div resize="bottom" class="background:lightgrey"></div>
                             </div>
 
-                            <div id="demo-preview" class="position:relative display:flex height:100% background-color:white">
+                            <div id="demo-preview" class="position:relative overflow:auto background-color:white">
                                 <div get-value="#demo" class="padding:20px"></div>
                             </div>
 

docs/index.html

@@ -739,14 +739,14 @@ <h2 class="padding:5px_0px">Demo</h2>
                     </div>
                     <div class="position:sticky top:0 padding:15px_0px height:100vh">
                         <!-- SandBox -->
-                        <div class="position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px" id="playground">
+                        <div class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px" id="playground">
 
                             <div id="demo-code" resizable class="position:relative height:50%">
                                 <textarea type="code" lang="html" collection="demos" document_id="" name="demo" save="false" id="demo" class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
                                 <div resize="bottom" class="background:lightgrey"></div>
                             </div>
 
-                            <div id="demo-preview" class="position:relative display:flex height:100% background-color:white">
+                            <div id="demo-preview" class="position:relative overflow:auto background-color:white">
                                 <div get-value="#demo" class="padding:20px"></div>
                             </div>
 

package.json

@@ -20,9 +20,7 @@
     "html5-framework",
     "javascript-framework"
   ],
-  "publishConfig": {
-    "access": "public"
-  },
+  "publishConfig": { "access": "public" },
   "scripts": {
     "start": "npx webpack --config webpack.config.js",
     "build": "NODE_ENV=production npx webpack --config webpack.config.js",
@@ -60,9 +58,9 @@
     "webpack-log": "^3.0.1"
   },
   "dependencies": {
-    "@cocreate/crud-client": "^1.17.8",
-    "@cocreate/docs": "^1.5.1",
-    "@cocreate/hosting": "^1.7.1",
-    "@cocreate/observer": "^1.5.51"
+    "@cocreate/crud-client": "^1.17.9",
+    "@cocreate/docs": "^1.5.2",
+    "@cocreate/hosting": "^1.7.2",
+    "@cocreate/observer": "^1.5.52"
   }
 }