add drop area after last clip until playtime is complete

components/PlaylistTable.vue

@@ -1,5 +1,9 @@
 <template>
-    <div id="playlist-container" class="relative w-full h-full !bg-base-300 rounded-e overflow-auto">
+    <div
+        id="playlist-container"
+        ref="playlistContainer"
+        class="relative w-full h-full !bg-base-300 rounded-e overflow-auto"
+    >
         <div v-if="playlistStore.isLoading" class="w-full h-full absolute z-10 flex justify-center bg-base-100/70">
             <span class="loading loading-spinner loading-lg" />
         </div>
@@ -130,6 +134,7 @@ const playlistStore = usePlaylist()
 const { secToHMS, filename, secondsToTime } = stringFormatter()
 const { processPlaylist, genUID } = playlistOperations()
 
+const playlistContainer = ref()
 const sortContainer = ref()
 const todayDate = ref($dayjs().utcOffset(configStore.utcOffset).format('YYYY-MM-DD'))
 const { listDate } = storeToRefs(usePlaylist())
@@ -174,9 +179,19 @@ defineExpose({
 })
 
 function classSwitcher() {
-    if (playlistStore.playlist.length === 0 && sortContainer.value) {
+    if (playlistStore.playlist.length === 0) {
         sortContainer.value.sortable.el.classList.add('is-empty')
     } else {
+        const lastItem = playlistStore.playlist[playlistStore.playlist.length - 1]
+
+        if (
+            configStore.playout.playlist.startInSec + configStore.playout.playlist.lengthInSec >
+            lastItem.begin + lastItem.out - lastItem.in
+        ) {
+            sortContainer.value.sortable.el.classList.add('add-space')
+        } else {
+            sortContainer.value.sortable.el.classList.remove('add-space')
+        }
         sortContainer.value.sortable.el.classList.remove('is-empty')
     }
 }
@@ -225,13 +240,15 @@ function addClip(event: any) {
         duration: mediaStore.folderTree.files[o].duration,
     })
 
-    classSwitcher()
     processPlaylist(listDate.value, playlistStore.playlist, false)
+    classSwitcher()
 
     nextTick(() => {
         const newNode = document.getElementById(`clip-${n}`)
         addBG(newNode)
         removeBG(newNode)
+
+        playlistContainer.value.scroll({ top: playlistContainer.value.scrollHeight, behavior: 'smooth' })
     })
 }
 
@@ -262,6 +279,14 @@ function deletePlaylistItem(index: number) {
     align-items: center;
 }
 
+#sort-container.add-space:after {
+    content: ' ';
+    width: 100%;
+    height: 37px;
+    display: flex;
+    position: absolute;
+}
+
 /*
     format dragging element
 */