add scrollbar to editor

sakihet · Aug 9, 2024 · 7710032 · 7710032
1 parent 207e4c9
commit 7710032
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 23 deletions.
diff --git a/src/components/AppEditor.vue b/src/components/AppEditor.vue
@@ -15,7 +15,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div class="layout-stack-4">
+  <div class="layout-stack-2 flex-column">
     <BubbleMenu
       :editor="props.editor"
       v-if="props.editor"
@@ -73,23 +73,31 @@ const props = defineProps<{
         <IconCode />
       </button>
     </BubbleMenu>
-    <div class="layout-stack-h-1">
-      <button
-        @click="editor?.chain().focus().unsetLink().run()"
-        :disabled="!editor?.isActive('link')"
-        :class="{ 'pattern-button-base': true, 'pattern-button-selected': editor?.isActive('link') }"
-      >
-        unset link
-      </button>
-      <button
-        @click="editor?.chain().focus().clearNodes().run()"
-        class="pattern-button-base"
-      >
-        clear format
-      </button>
+    <div class="">
+      <div class="layout-center">
+        <div class="layout-stack-h-1">
+          <button
+            @click="editor?.chain().focus().unsetLink().run()"
+            :disabled="!editor?.isActive('link')"
+            :class="{ 'pattern-button-base': true, 'pattern-button-selected': editor?.isActive('link') }"
+          >
+            unset link
+          </button>
+          <button
+            @click="editor?.chain().focus().clearNodes().run()"
+            class="pattern-button-base"
+          >
+            clear format
+          </button>
+        </div>
+      </div>
+    </div>
+    <div class="overflow-y-scroll pattern-height-editor-content pattern-scrollbar-thick">
+      <div class="layout-center">
+        <EditorContent
+          :editor="props.editor"
+        />
+      </div>
     </div>
-    <EditorContent
-      :editor="props.editor"
-    />
   </div>
 </template>
diff --git a/src/css/pattern.css b/src/css/pattern.css
@@ -1,6 +1,9 @@
 .pattern-height-note-list {
   max-height: calc(100vh - 9rem);
 }
+.pattern-height-editor-content {
+  max-height: calc(100vh - 5.5rem);
+}
 .pattern-button-base {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -79,6 +82,17 @@ details[open].pattern-dropdown>summary:before {
 .pattern-hiding-child:hover>*>.pattern-hidden-child {
   display: inline-block;
 }
+
+.pattern-scrollbar-thick::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background-color: var(--color-bg-scrollbar);
+}
+
+.pattern-scrollbar-thick::-webkit-scrollbar-thumb {
+  background-color: var(--color-bg-scrollbar-thumb);
+}
+
 .pattern-scrollbar-thin::-webkit-scrollbar {
   width: 4px;
   height: 4px;

diff --git a/src/css/style.css b/src/css/style.css
@@ -4,6 +4,7 @@ body {
   background-color: var(--color-bg-primary);
   font-family: sans-serif;
   line-height: 1.5rem;
+  overflow: hidden;
 }
 
 ul {
@@ -23,6 +24,7 @@ svg {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
 /* tiptap */

diff --git a/src/css/utility.css b/src/css/utility.css
@@ -23,6 +23,9 @@
 .overflow-y-scroll {
   overflow-y: scroll;
 }
+.overflow-y-hidden {
+  overflow-y: hidden;
+}
 /* size */
 .h-full {
   height: 100%;
@@ -135,6 +138,10 @@
   padding-left: 1rem;
   padding-right: 1rem;
 }
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -143,6 +150,9 @@
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
+.pt-6 {
+  padding-top: 1.5rem;
+}
 .pl-0 {
   padding-left: 0;
 }

diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
@@ -133,8 +133,8 @@ const handleDelete = (id: string) => {
 </script>
 
 <template>
-  <div class="f-1 flex-column">
-    <div class="f-1 flex-row">
+  <div class="f-1 flex-column overflow-hidden">
+    <div class="f-1 flex-row overflow-hidden">
       <div class="p-6 w-80 bg-secondary flex-column">
         <div class="layout-stack-6 f-1">
           <div class="flex-row layout-stack-h-1">
@@ -195,8 +195,8 @@ const handleDelete = (id: string) => {
         </div>
         <div class="text-tertiary text-small font-mono">v {{ version }}</div>
       </div>
-      <div class="p-6 f-1 layout-stack-2">
-        <div class="flex-row">
+      <div class="f-1 layout-stack-2 flex-column overflow-y-hidden">
+        <div class="flex-row px-6 pt-6">
           <div class="f-1"></div>
           <details
             class="pattern-dropdown pattern-hidden-child"
@@ -221,7 +221,7 @@ const handleDelete = (id: string) => {
             </div>
           </details>
         </div>
-        <div class="layout-center">
+        <div class="f-1 flex-column">
           <AppEditor
             v-if="store.currentNote && editor"
             :editor="editor"