added overflow for tasks and overflow shadow to all overflows. also

minimum drag distance is now 10px

web/pages/index.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { Body } from '#components';
 import axios from 'axios';
 import { DateTime } from 'luxon';
 import MainContent from '~/components/ui/MainContent.vue';
@@ -11,35 +10,35 @@ const date = ref<DateTime>(DateTime.now())
 const events = ref<Event[]>([])
 
 const { data: eventsResponse } = await useAsyncData<SerializableEvent[]>(
-  'events',
-  () => axios.get('/events').then(res => res.data)
+	'events',
+	() => axios.get('/events').then(res => res.data)
 );
 
 onMounted(() => {
-  events.value = eventsResponse.value?.map(Event.fromSerializable) ?? []
+	events.value = eventsResponse.value?.map(Event.fromSerializable) ?? []
 })
 
 type Task = {
-  id: number
-  userid: string
-  title: string
-  description: string
-  done: number
-  estimated_time: string
-  due_date: string
-  created_at: string
-  updated_at: string
+	id: number
+	userid: string
+	title: string
+	description: string
+	done: number
+	estimated_time: string
+	due_date: string
+	created_at: string
+	updated_at: string
 }
 
 
 const { data: tasks, refresh } = await useAsyncData<Task[]>(
-    'tasks',
-    () => {
+	'tasks',
+	() => {
 		return axios.get("/tasks").then(result => {
 			console.log(result.data)
 			return result.data
 		})
-    }
+	}
 )
 
 async function postEvent(event: Event) {
@@ -49,30 +48,31 @@ async function postEvent(event: Event) {
 
 async function postTask(name: string) {
 	console.log('posting Task')
-  await axios.post('/task', {
-    title: name,
-    description: "",
-    done: false,
-    estimated_time: (new Date()).toISOString(), //TODO
-    due_date: (new Date()).toISOString(),
-  })
-  await refresh()
+	await axios.post('/task', {
+		title: name,
+		description: "",
+		done: false,
+		estimated_time: (new Date()).toISOString(), //TODO
+		due_date: (new Date()).toISOString(),
+	})
+	await refresh()
 }
 
 async function deleteTask(id: number) {
-  console.log('deleting Task')
-  await axios.delete(`/task/${id}`)
-  await refresh()
+	console.log('deleting Task')
+	await axios.delete(`/task/${id}`)
+	await refresh()
 }
 
 </script>
 
 <template>
-    <div class="h-screen w-screen p-4 flex flex-row gap-5">
-        <Sidebar v-if="tasks !== null" :todos="tasks" v-model:date="date" @create-task="postTask" @delete-task="deleteTask"/>
-        <MainContent v-if="events !== null" v-model:events="events" v-model:date="date" @create-event="postEvent"/>
-    </div>
+	<div class="h-screen w-screen p-4 flex flex-row gap-5">
+		<Sidebar v-if="tasks !== null" :todos="tasks" v-model:date="date" @create-task="postTask"
+			@delete-task="deleteTask" />
+		<MainContent v-if="events !== null" v-model:events="events" v-model:date="date" @create-event="postEvent" />
+	</div>
 </template>
 
 
-<style scoped></style>
+<style scoped></style>