From e2386ef68166ff452dfd0f8d0589b0665af153a8 Mon Sep 17 00:00:00 2001
From: Marco Crapts <mcrapts@gmail.com>
Date: Sun, 21 May 2023 12:00:20 +0200
Subject: [PATCH] fix note title too wide

---
 src/App.vue                         | 6 ++++--
 src/components/Note/NoteToolbar.vue | 6 ++----
 src/components/ViewModes/Note.vue   | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 89117c3..872c3ff 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/Note/NoteToolbar.vue b/src/components/Note/NoteToolbar.vue
index a2ba662..d9873d1 100644
--- a/src/components/Note/NoteToolbar.vue
+++ b/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">
diff --git a/src/components/ViewModes/Note.vue b/src/components/ViewModes/Note.vue
index 793958a..7652c72 100644
--- a/src/components/ViewModes/Note.vue
+++ b/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