From c3e1f4d6eee3df0304fc017540632170282c6a04 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 2 Feb 2021 22:20:16 +0100
Subject: [PATCH] improve iframe maxheight scrolling

---
 docs/src/components/Demo/style.scss               |  1 -
 docs/src/components/DemoFrame/index.vue           |  3 ++-
 .../demos/Examples/CollaborativeEditing/index.vue |  1 -
 docs/src/main.js                                  | 15 +++++++++++++--
 docs/src/templates/DemoPage/index.vue             |  7 +++++--
 docs/src/templates/DemoPage/style.scss            |  3 +--
 6 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/docs/src/components/Demo/style.scss b/docs/src/components/Demo/style.scss
index 6d160ae5a..aaa28ad50 100644
--- a/docs/src/components/Demo/style.scss
+++ b/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;
diff --git a/docs/src/components/DemoFrame/index.vue b/docs/src/components/DemoFrame/index.vue
index 5960ab372..abf8ddb4b 100644
--- a/docs/src/components/DemoFrame/index.vue
+++ b/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 {
diff --git a/docs/src/demos/Examples/CollaborativeEditing/index.vue b/docs/src/demos/Examples/CollaborativeEditing/index.vue
index 1521e5b91..52dd6e153 100644
--- a/docs/src/demos/Examples/CollaborativeEditing/index.vue
+++ b/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;
diff --git a/docs/src/main.js b/docs/src/main.js
index 5b9f212b8..24f529c40 100644
--- a/docs/src/main.js
+++ b/docs/src/main.js
@@ -28,9 +28,20 @@ export default function (Vue, { head }) {
         iframeResize({
           ...value,
           messageCallback(messageData) {
-            if (messageData.message === 'resize') {
-              el.iFrameResizer.resize()
+            if (messageData.message.type !== '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)
       })
diff --git a/docs/src/templates/DemoPage/index.vue b/docs/src/templates/DemoPage/index.vue
index 919a0c9b1..3846b55e9 100644
--- a/docs/src/templates/DemoPage/index.vue
+++ b/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,
+        })
       }
     })
 
diff --git a/docs/src/templates/DemoPage/style.scss b/docs/src/templates/DemoPage/style.scss
index 2904b2dc0..6ede4df03 100644
--- a/docs/src/templates/DemoPage/style.scss
+++ b/docs/src/templates/DemoPage/style.scss
@@ -1,4 +1,3 @@
 .demo-page {
-  // max-width: 40rem;
-  // margin: 2rem auto;
+  padding: 1.25rem;
 }