🚸 Improve UX in timetable editor

src/components/lesson-card.vue

@@ -2,7 +2,7 @@
 import { getSubstitutionColor } from "@/util";
 import { times } from "@/store";
 import { ref, watch } from "vue";
-import { TrashIcon } from "lucide-vue-next";
+import { MinusIcon } from "lucide-vue-next";
 
 const props = defineProps(["lesson", "index", "edit", "buttons"]);
 const emit = defineEmits(["change", "delete"]);
@@ -84,6 +84,7 @@ function getTime(index) {
         spellcheck="false"
         data-ph="Subject"
         ref="subjectElement"
+        @keydown.enter.prevent
         @input="update"
       >
         {{ lesson.subject }}
@@ -102,6 +103,7 @@ function getTime(index) {
           spellcheck="false"
           data-ph="Teacher"
           ref="teacherElement"
+          @keydown.enter.prevent
           @input="update"
         >
           {{ lesson.teacher }}</span
@@ -118,6 +120,7 @@ function getTime(index) {
             spellcheck="false"
             data-ph="Room"
             ref="roomElement"
+            @keydown.enter.prevent
             @input="update"
             >{{ lesson.room }}</span
           ></span
@@ -133,7 +136,7 @@ function getTime(index) {
       <span>{{ getTime(index).end }}</span>
     </div>
     <div class="buttons" v-if="edit && buttons">
-      <TrashIcon @click="$emit('delete')" />
+      <MinusIcon @click="$emit('delete')" />
     </div>
   </div>
 </template>
@@ -190,6 +193,9 @@ function getTime(index) {
   cursor: pointer;
 }
 
+[contenteditable="true"]:focus {
+  padding: 0px 5px;
+}
 [contenteditable="true"]:empty:before {
   content: attr(data-ph);
   opacity: 0.4;