From ea16c713a4ef150d322327b81a6a205a7b454982 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Thu, 4 Feb 2021 22:10:08 +0100
Subject: [PATCH] improve scrollable containers

---
 docs/src/components/Demo/style.scss           |  4 +-
 docs/src/components/DemoContent/index.vue     |  6 +--
 .../Examples/CollaborativeEditing/index.vue   | 45 +++++++++----------
 docs/src/layouts/App/prism.scss               |  2 +-
 4 files changed, 27 insertions(+), 30 deletions(-)

diff --git a/docs/src/components/Demo/style.scss b/docs/src/components/Demo/style.scss
index 74451dc1..1bd03c66 100644
--- a/docs/src/components/Demo/style.scss
+++ b/docs/src/components/Demo/style.scss
@@ -8,9 +8,9 @@
     border-bottom-width: 0;
     color: $colorBlack;
     background-color: $colorWhite;
-    max-height: unquote("max(300px, 70vh)");
+    max-height: unquote("max(300px, 60vh)");
     overflow: auto;
-    scroll-behavior: smooth;
+    -webkit-overflow-scrolling: touch;
     border: 3px solid $colorBlack;
   }
 
diff --git a/docs/src/components/DemoContent/index.vue b/docs/src/components/DemoContent/index.vue
index 2ae76abb..21f2f468 100644
--- a/docs/src/components/DemoContent/index.vue
+++ b/docs/src/components/DemoContent/index.vue
@@ -1,8 +1,6 @@
 <template>
-  <div v-if="mainFile">
-    <component :is="mainFile" v-if="mode === 'vue'" />
-    <react-renderer :component="mainFile" v-if="mode === 'react'" />
-  </div>
+  <component :is="mainFile" v-if="mainFile && mode === 'vue'" />
+  <react-renderer :component="mainFile" v-else-if="mainFile && mode === 'react'" />
 </template>
 
 <script>
diff --git a/docs/src/demos/Examples/CollaborativeEditing/index.vue b/docs/src/demos/Examples/CollaborativeEditing/index.vue
index a833b665..a8062352 100644
--- a/docs/src/demos/Examples/CollaborativeEditing/index.vue
+++ b/docs/src/demos/Examples/CollaborativeEditing/index.vue
@@ -1,22 +1,20 @@
 <template>
-  <div>
-    <div class="editor" v-if="editor">
-      <menu-bar class="editor__menu" :editor="editor" />
-      <editor-content class="editor__content" :editor="editor" />
-      <div class="editor__bottom-bar">
-        <div :class="`editor__status editor__status--${status}`">
-          <template v-if="status === 'connected'">
-            {{ users.length }} user{{ users.length === 1 ? '' : 's' }} online
-          </template>
-          <template v-else>
-            offline
-          </template>
-        </div>
-        <div class="editor__name">
-          <button @click="setName">
-            {{ currentUser.name }}
-          </button>
-        </div>
+  <div class="editor" v-if="editor">
+    <menu-bar class="editor__menu" :editor="editor" />
+    <editor-content class="editor__content" :editor="editor" />
+    <div class="editor__bottom-bar">
+      <div :class="`editor__status editor__status--${status}`">
+        <template v-if="status === 'connected'">
+          {{ users.length }} user{{ users.length === 1 ? '' : 's' }} online
+        </template>
+        <template v-else>
+          offline
+        </template>
+      </div>
+      <div class="editor__name">
+        <button @click="setName">
+          {{ currentUser.name }}
+        </button>
       </div>
     </div>
   </div>
@@ -141,6 +139,9 @@ export default {
 
 <style lang="scss" scoped>
 .editor {
+  display: flex;
+  flex-direction: column;
+  max-height: 90vh;
   color: black;
   background-color: white;
   border: 1px solid rgba(black, 0.1);
@@ -148,6 +149,7 @@ export default {
 
   &__menu {
     display: flex;
+    flex: 0 0 auto;
     flex-wrap: wrap;
     padding: 0.25rem;
     border-bottom: 1px solid rgba(black, 0.1);
@@ -155,18 +157,15 @@ export default {
 
   &__content {
     padding: 1rem;
-    max-height: 25rem;
+    flex: 1 1 auto;
     overflow-x: hidden;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
-
-    &::-webkit-scrollbar-thumb {
-      background-color: rgba(black, 0.1);
-    }
   }
 
   &__bottom-bar {
     display: flex;
+    flex: 0 0 auto;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
diff --git a/docs/src/layouts/App/prism.scss b/docs/src/layouts/App/prism.scss
index 106d671a..db677169 100644
--- a/docs/src/layouts/App/prism.scss
+++ b/docs/src/layouts/App/prism.scss
@@ -46,7 +46,7 @@ pre[class*="language-"] {
   background: $codeBackground;
   padding: 1.25rem !important;
   border-radius: 0.75rem;
-  max-height: unquote("max(300px, 70vh)");
+  max-height: unquote("max(300px, 60vh)");
 
   &::-webkit-scrollbar-thumb {
     background-color: rgba($colorWhite, 0.2);