From f27ead9b06af3fe3fb1dad57f6757f6630e25c2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 2 Feb 2021 21:42:09 +0100
Subject: [PATCH] improve scrollable iframes

---
 docs/src/components/Demo/style.scss     | 2 +-
 docs/src/components/DemoFrame/index.vue | 9 +++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/docs/src/components/Demo/style.scss b/docs/src/components/Demo/style.scss
index 31f493f26..6d160ae5a 100644
--- a/docs/src/components/Demo/style.scss
+++ b/docs/src/components/Demo/style.scss
@@ -9,7 +9,7 @@
     border-bottom-width: 0;
     color: $colorBlack;
     background-color: $colorWhite;
-    max-height: 50rem;
+    max-height: unquote("max(300px, 60vh)");
     overflow: auto;
     scroll-behavior: smooth;
     border: 1px solid rgba($colorBlack, 0.1);
diff --git a/docs/src/components/DemoFrame/index.vue b/docs/src/components/DemoFrame/index.vue
index bee2b5fd8..5960ab372 100644
--- a/docs/src/components/DemoFrame/index.vue
+++ b/docs/src/components/DemoFrame/index.vue
@@ -4,9 +4,9 @@
       <div class="demo-frame__loader" />
     </div>
     <iframe
-      v-resize.quiet
+      class="demo-frame__iframe"
+      v-resize.quiet="{ scrolling: true }"
       :src="`/demos/${name}?${query}`"
-      style="background-color: transparent;"
       width="100%"
       height="0"
       frameborder="0"
@@ -71,6 +71,11 @@ export default {
   position: relative;
   min-height: 5rem;
 
+  &__iframe {
+    background-color: transparent;
+    max-height: 100%;
+  }
+
   &.is-inline {
     border-radius: 0.75rem;
     background-color: rgba($colorBlack, 0.03);