improve scrolling / layout

src/App.vue

@@ -9,7 +9,7 @@ const sideBarCollapsed = ref(false)
     :side-bar-collapsed="sideBarCollapsed"
     @toggle-side-bar="sideBarCollapsed = !sideBarCollapsed"
   />
-  <div class="relative mx-auto flex h-full max-w-app">
+  <div class="mx-auto flex min-h-full w-full max-w-app flex-grow">
     <SideBar
       :view-modes="viewModes"
       :active-view-mode="activeViewMode"
@@ -17,14 +17,14 @@ const sideBarCollapsed = ref(false)
       class="mt-[50px] px-3 py-6"
     />
     <main
-      class="transition[margin-left] absolute bottom-0 left-0 right-0 top-[50px] flex overflow-hidden border-x-[1px] bg-white px-10 py-6 duration-200 ease-out"
+      class="transition[margin-left] z-10 mt-[50px] w-full border-x-[1px] bg-white px-10 py-6 duration-200 ease-out"
       :class="sideBarCollapsed ? 'ml-0' : 'ml-sidebar'"
     >
       <Note
         v-if="activeNote"
         :key="activeNote.id"
         :note="activeNote"
-        class="w-full"
+        class=""
         @update="(note) => updateNote(note.id, note)"
       />
     </main>