From: Adam Dullage <redacted>
Date: Fri, 3 May 2024 11:25:44 +0000 (+0100)
Subject: Stop title from moving when switching to edit mode in note view
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=04c252b4c4966b2db0cfb98e27c786db8e05309a;p=flatnotes.git

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 d7fd095..86b2baf 100644
--- 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"