From 041f377c970f3a70f147b10e5111da5fbbfa9f37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Wed, 2 Dec 2020 15:40:42 +0100
Subject: [PATCH] improve collab styling

---
 .../Examples/CollaborativeEditing/MenuBar.vue |  4 --
 .../Examples/CollaborativeEditing/index.vue   | 54 +++++++++++++------
 2 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue b/docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue
index aa59e984..971c56e1 100644
--- a/docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue
+++ b/docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue
@@ -134,7 +134,3 @@ export default {
   },
 }
 </script>
-
-<style>
-
-</style>
diff --git a/docs/src/demos/Examples/CollaborativeEditing/index.vue b/docs/src/demos/Examples/CollaborativeEditing/index.vue
index b6a47c64..719d93c5 100644
--- a/docs/src/demos/Examples/CollaborativeEditing/index.vue
+++ b/docs/src/demos/Examples/CollaborativeEditing/index.vue
@@ -1,22 +1,20 @@
 <template>
   <div>
-    <div v-if="editor">
-      <menu-bar :editor="editor" />
-      <editor-content :editor="editor" />
-
-      <br>
-
-      <button @click="setName">
-        Set Name
-      </button>
-      <button @click="updateCurrentUser({ name: getRandomName() })">
-        Random Name
-      </button>
-      <button @click="updateCurrentUser({ color: getRandomColor() })">
-        Random Color
-      </button>
+    <div class="editor" v-if="editor">
+      <menu-bar class="editor__menu" :editor="editor" />
+      <editor-content class="editor__content" :editor="editor" />
     </div>
 
+    <button @click="setName">
+      Set Name
+    </button>
+    <button @click="updateCurrentUser({ name: getRandomName() })">
+      Random Name
+    </button>
+    <button @click="updateCurrentUser({ color: getRandomColor() })">
+      Random Color
+    </button>
+
     <div class="collaboration-users">
       <div
         class="collaboration-users__item"
@@ -143,6 +141,32 @@ export default {
 }
 </script>
 
+<style lang="scss" scoped>
+.editor {
+  background-color: white;
+  border: 1px solid rgba(black, 0.1);
+  border-radius: 0.5rem;
+  margin-bottom: 1rem;
+
+  &__menu {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0.25rem;
+    border-bottom: 1px solid rgba(black, 0.1);
+  }
+
+  &__content {
+    padding: 1rem;
+    max-height: 30rem;
+    overflow: auto;
+
+    &::-webkit-scrollbar-thumb {
+      background-color: rgba(black, 0.1);
+    }
+  }
+}
+</style>
+
 <style lang="scss">
 /* A list of all available users */
 .collaboration-users {