edit title

src/components/IssueTitle.vue

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