feat(editor): improve desing

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>

src/components/EventEditor.vue

@@ -148,8 +148,8 @@ watch(
 </script>
 
 <template>
-  <v-sheet class="pa-2 text-start overflow-auto" min-height="84vh" max-height="84vh">
-    <div class="event-editor-header d-flex justify-space-between pa-4">
+  <v-sheet class="text-start overflow-auto" color="surface" min-height="84vh" max-height="84vh">
+    <v-sheet class="event-editor-header d-flex justify-space-between pa-4" color="surface">
       <div>
         <v-icon :icon="entityIcon" class="mr-2" />
         {{ entityObject?.label || 'Nothing Selected' }}
@@ -180,7 +180,7 @@ watch(
           @click="$emit('close')"
         />
       </div>
-    </div>
+    </v-sheet>
 
     <div class="event-editor-fields">
       <v-divider />
@@ -285,7 +285,7 @@ watch(
       <v-divider/>
     </div>
 
-    <div class="event-editor-footer d-flex text-end justify-space-between pa-4">
+    <v-sheet class="event-editor-footer d-flex text-end justify-space-between pa-4" color="surface">
       <v-btn v-if="mode === 'edit'"
         variant="text"
         @click="cancelEdit"
@@ -301,7 +301,7 @@ watch(
         :loading="saving">
         Save
       </v-btn>
-    </div>
+    </v-sheet>
   </v-sheet>
 </template>
 
@@ -309,4 +309,18 @@ watch(
 .event-editor-section {
   margin-bottom: 1.5rem;
 }
+
+.event-editor-header,
+.event-editor-footer {
+  position: sticky;
+  z-index: 2;
+}
+
+.event-editor-header {
+  top: 0;
+}
+
+.event-editor-footer {
+  bottom: 0;
+}
 </style>