improve iframe maxheight scrolling

docs/src/components/Demo/style.scss

@@ -3,7 +3,6 @@
   border-radius: 0.75rem;
 
   &__preview {
-    padding: 1.25rem;
     border-top-left-radius: inherit;
     border-top-right-radius: inherit;
     border-bottom-width: 0;

docs/src/components/DemoFrame/index.vue

@@ -5,7 +5,7 @@
     </div>
     <iframe
       class="demo-frame__iframe"
-      v-resize.quiet="{ scrolling: true }"
+      v-resize.quiet="{ scrolling: 'omit' }"
       :src="`/demos/${name}?${query}`"
       width="100%"
       height="0"
@@ -79,6 +79,7 @@ export default {
   &.is-inline {
     border-radius: 0.75rem;
     background-color: rgba($colorBlack, 0.03);
+    margin: -1.25rem;
   }
 
   &__loader-wrapper {

docs/src/demos/Examples/CollaborativeEditing/index.vue

@@ -145,7 +145,6 @@ export default {
   background-color: white;
   border: 1px solid rgba(black, 0.1);
   border-radius: 0.5rem;
-  margin-bottom: 1rem;
 
   &__menu {
     display: flex;

docs/src/main.js

@@ -28,9 +28,20 @@ export default function (Vue, { head }) {
         iframeResize({
           ...value,
           messageCallback(messageData) {
-            if (messageData.message === 'resize') {
+            if (messageData.message.type !== 'resize') {
-              el.iFrameResizer.resize()
+              return
             }
+
+            const style = window.getComputedStyle(el.parentElement)
+            const maxHeight = parseInt(style.getPropertyValue('max-height'), 10)
+
+            if (messageData.message.height > maxHeight) {
+              el.setAttribute('scrolling', 'auto')
+            } else {
+              el.setAttribute('scrolling', 'no')
+            }
+
+            el.iFrameResizer.resize()
           },
         }, el)
       })

docs/src/templates/DemoPage/index.vue

@@ -31,9 +31,12 @@ export default {
   },
 
   mounted() {
-    this.resizeObserver = new window.ResizeObserver(() => {
+    this.resizeObserver = new window.ResizeObserver(items => {
       if (window.parentIFrame) {
-        window.parentIFrame.sendMessage('resize')
+        window.parentIFrame.sendMessage({
+          type: 'resize',
+          height: items[0].contentRect.height,
+        })
       }
     })
 

docs/src/templates/DemoPage/style.scss

@@ -1,4 +1,3 @@
 .demo-page {
-  // max-width: 40rem;
+  padding: 1.25rem;
-  // margin: 2rem auto;
 }