improve scrolling / layout

src/components/Note.vue

@@ -52,7 +52,7 @@ const setRoot = async (closeModal: () => Promise<Boolean>) => {
 }
 </script>
 <template>
-  <div class="flex flex-col">
+  <div class="flex flex-col h-full">
     <NoteToolbar :note="props.note" @delete="del" @set-root="setRoot">
       <template #title>
         <i
@@ -67,7 +67,7 @@ const setRoot = async (closeModal: () => Promise<Boolean>) => {
       </template>
     </NoteToolbar>
     <NoteEditor
-      class="flex-grow overflow-auto"
+      class="flex-grow"
       :note="activeNote"
       @update="updateNoteContent"
       v-if="activeNote"

src/components/Note/NoteEditor.vue

@@ -163,7 +163,7 @@ const createLink = (link: string) => {
 <template>
   <div class="relative" ref="editorElement">
     <CKEditor
-      class="flex-grow text-[110%] font-light"
+      class="w-full flex-grow text-[110%] font-light"
       :editor="editor"
       v-model="editorData"
       :config="editorConfig"

src/components/Note/NoteToolbar.vue

@@ -39,10 +39,10 @@ const emit = defineEmits<{
           Are you sure you want to set this note as root note?
         </template>
         <template #actions="{ close }">
+          <button class="btn-sm btn" @click="close">Close</button>
           <button class="btn-primary btn-sm btn mr-1" @click="emit('setRoot', close)">
             Set current note as root
           </button>
-          <button class="btn-sm btn" @click="close">Close</button>
         </template>
       </Modal>
     </div>

src/components/SideBar.vue

@@ -13,7 +13,7 @@ const emit = defineEmits<{
 <template>
   <div
     id="sidebar"
-    class="relative flex w-sidebar flex-col gap-4 overflow-y-auto px-2 py-3 text-[90%]"
+    class="fixed top-0 flex w-sidebar flex-col gap-4 overflow-y-auto px-2 py-3 text-[90%]"
   >
     <SideBarMenu>
       <template #header>Root note</template>

src/components/TopBar.vue

@@ -9,8 +9,8 @@ const emit = defineEmits<{
 }>()
 </script>
 <template>
-  <div class="absolute left-0 right-0 top-0 z-[500] flex h-[50px] bg-primary">
-    <div class="w-in mx-auto flex w-full max-w-app items-center py-2.5 text-white">
+  <div class="fixed left-0 right-0 top-0 z-[500] flex h-[50px] bg-primary">
+    <div class="mx-auto flex w-full max-w-app items-center py-2.5 text-white">
       <div
         class="flex items-center pl-3"
         :class="sideBarCollapsed ? 'w-fit' : 'w-sidebar pr-3'"