Stop title from moving when switching to edit mode in note view

diff --git a/client/views/Note.vue b/client/views/Note.vue
index d7fd095a41c63fe9b87257588469fa6206100de1..86b2baf666864543096de7614cfe472bc7360462 100644 (file)
--- a/client/views/Note.vue
+++ b/client/views/Note.vue
@@ -20,8 +20,18 @@
 
       <!-- Header -->
       <div class="flex items-end">
-        <!-- View -->
-        <div v-show="!editMode" class="flex-1 text-3xl">{{ note.title }}</div>
+        <!-- Title -->
+        <div class="flex flex-1 text-3xl leading-[1.6em]">
+          <span v-show="!editMode" class="flex-1">{{ note.title }}</span>
+          <input
+            v-show="editMode"
+            v-model="noteUpdate.title"
+            class="flex-1 outline-none"
+            placeholder="Title"
+          />
+        </div>
+
+        <!-- Buttons -->
         <div v-show="!editMode">
           <CustomButton
             :iconPath="mdilDelete"
@@ -34,14 +44,6 @@
             @click="editHandler"
           />
         </div>
-
-        <!-- Edit -->
-        <input
-          v-show="editMode"
-          v-model="noteUpdate.title"
-          class="flex-1 text-3xl"
-          placeholder="Title"
-        />
         <div v-show="editMode">
           <CustomButton
             :iconPath="mdilArrowLeft"