fix note title too wide

src/App.vue

@@ -4,13 +4,14 @@ import { viewModes, activeViewMode } from '@/composables/useViewMode'
 import { initialized } from '@/composables/useFirebase'
 import firebase from 'firebase/compat/app'
 import * as firebaseui from 'firebaseui'
-const sideBarCollapsed = ref(false)
+const sideBarCollapsed = ref(true)
 
 const Note = defineAsyncComponent(() => import('@/components/ViewModes/Note.vue'))
 const ListView = defineAsyncComponent(() => import('@/components/ViewModes/ListView.vue'))
 const Mindmap = defineAsyncComponent(() => import('@/components/ViewModes/Mindmap.vue'))
 
-const firebaseAuthUI = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth())
+const firebaseAuthUI =
+  firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth())
 provide('firebaseAuthUI', firebaseAuthUI)
 </script>
 
@@ -42,6 +43,7 @@ provide('firebaseAuthUI', firebaseAuthUI)
         <Mindmap v-else-if="activeViewMode.name === 'Mindmap'" />
       </template>
       <SkeletonNote v-else />
+      <!-- <SkeletonNote /> -->
     </main>
   </div>
 </template>

src/components/Note/NoteToolbar.vue

@@ -8,10 +8,8 @@ const emit = defineEmits<{
 }>()
 </script>
 <template>
-  <div class="mb-2 flex items-center">
-    <h1
-      class="mr-2 flex flex-grow items-center rounded-md pr-2 text-3xl font-semibold hover:bg-gray-200"
-    >
+  <div class="mb-2 flex items-center space-x-2">
+    <h1 class="flex flex-grow items-center rounded-md text-3xl font-semibold hover:bg-gray-200">
       <slot name="title"></slot>
     </h1>
     <div class="btn-group flex items-center" v-if="!props.note.isRoot">

src/components/ViewModes/Note.vue

@@ -49,7 +49,7 @@ const setRoot = async (closeModal: () => Promise<Boolean>) => {
           class="fas fa-fw fa-home mr-2 text-base text-secondary opacity-40"
           v-if="props.note.isRoot"
         ></i>
-        <input type="text" class="flex-grow bg-transparent py-1 outline-none" v-model="noteTitle" />
+        <input type="text" class="bg-transparent py-1 outline-none w-full" v-model="noteTitle" />
       </template>
     </NoteToolbar>
     <NoteEditor