edit title

src/components/IssueContent.vue

@@ -30,9 +30,16 @@ const cancel = () => {
 <template>
   <div class="issue-content">
     <template v-if="!editing">
-      <v-sheet class="pa-4 cursor-pointer content-sheet" @click="startEdit">
-        {{ text ?? 'click to add content' }}
-      </v-sheet>
+      <v-hover #default="{ isHovering, props }">
+        <v-sheet
+          v-bind="props"
+          :class="isHovering ? 'px-4' : 'px-0'"
+          class="py-1 cursor-pointer content-sheet"
+          @click="startEdit"
+        >
+          {{ text ?? 'click to add content' }}
+        </v-sheet>
+      </v-hover>
     </template>
 
     <template v-else>
@@ -50,4 +57,7 @@ const cancel = () => {
 .content-sheet:hover {
   background-color: rgba(var(--v-theme-on-surface), 0.06);
 }
+.v-sheet {
+  transition: padding 0.2s ease-in-out;
+}
 </style>