fix:project over the title and close backgroud task

frontend/src/views/HomeView.vue

@@ -2,7 +2,7 @@
   <div class="home-view">
     <div class="header">
       <h2>My Projects</h2>
-      <el-button type="primary" @click="dialogVisible = true">New Project</el-button>
+      <el-button type="primary" @click="openCreateDialog">New Project</el-button>
     </div>
 
     <el-row :gutter="20">
@@ -10,11 +10,14 @@
         <el-card shadow="hover" class="project-card" @click="goToProject(project.id)">
           <template #header>
             <div class="card-header">
-              <span>{{ project.title }}</span>
+              <span class="project-title" :title="project.title">{{ project.title }}</span>
-              <el-button type="text" icon="Delete" @click.stop="deleteProject(project.id)"></el-button>
+              <div class="actions">
+                <el-button type="text" icon="Edit" @click.stop="openEditDialog(project)"></el-button>
+                <el-button type="text" icon="Delete" @click.stop="deleteProject(project.id)"></el-button>
+              </div>
             </div>
           </template>
-          <p>{{ project.description || 'No description' }}</p>
+          <p class="project-desc">{{ project.description || 'No description' }}</p>
           <div class="footer">
             <span>{{ new Date(project.updated_at).toLocaleDateString() }}</span>
           </div>
@@ -22,7 +25,7 @@
       </el-col>
     </el-row>
 
-    <el-dialog v-model="dialogVisible" title="Create New Project">
+    <el-dialog v-model="dialogVisible" :title="isEdit ? 'Edit Project' : 'Create New Project'">
       <el-form :model="form">
         <el-form-item label="Title">
           <el-input v-model="form.title" />
@@ -33,7 +36,7 @@
       </el-form>
       <template #footer>
         <el-button @click="dialogVisible = false">Cancel</el-button>
-        <el-button type="primary" @click="createProject">Create</el-button>
+        <el-button type="primary" @click="saveProject">{{ isEdit ? 'Save' : 'Create' }}</el-button>
       </template>
     </el-dialog>
   </div>
@@ -48,7 +51,8 @@ import { ElMessage } from 'element-plus'
 const router = useRouter()
 const projects = ref([])
 const dialogVisible = ref(false)
-const form = ref({ title: '', description: '' })
+const isEdit = ref(false)
+const form = ref({ id: '', title: '', description: '' })
 
 const fetchProjects = async () => {
   try {
@@ -59,6 +63,26 @@ const fetchProjects = async () => {
   }
 }
 
+const openCreateDialog = () => {
+    isEdit.value = false
+    form.value = { title: '', description: '' }
+    dialogVisible.value = true
+}
+
+const openEditDialog = (project) => {
+    isEdit.value = true
+    form.value = { id: project.id, title: project.title, description: project.description }
+    dialogVisible.value = true
+}
+
+const saveProject = async () => {
+    if (isEdit.value) {
+        await updateProject()
+    } else {
+        await createProject()
+    }
+}
+
 const createProject = async () => {
   try {
     const res = await axios.post('/api/v1/projects/', form.value)
@@ -70,6 +94,20 @@ const createProject = async () => {
   }
 }
 
+const updateProject = async () => {
+  try {
+    await axios.put(`/api/v1/projects/${form.value.id}`, {
+        title: form.value.title,
+        description: form.value.description
+    })
+    ElMessage.success('Updated successfully')
+    dialogVisible.value = false
+    fetchProjects()
+  } catch (error) {
+    ElMessage.error('Failed to update project')
+  }
+}
+
 const deleteProject = async (id) => {
   try {
     await axios.delete(`/api/v1/projects/${id}`)
@@ -106,4 +144,26 @@ onMounted(fetchProjects)
   justify-content: space-between;
   align-items: center;
 }
+.project-title {
+    font-weight: bold;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 60%;
+    display: inline-block;
+}
+.actions {
+    display: flex;
+    gap: 4px;
+}
+.project-desc {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    height: 3em;
+    color: #666;
+    font-size: 0.9em;
+}
 </style>

frontend/src/views/ProjectView.vue

@@ -113,7 +113,7 @@ const imageVersion = ref(Date.now())
 
 // Task State
 const activeTasks = ref([])
-const isTaskManagerCollapsed = ref(false)
+const isTaskManagerCollapsed = ref(true)
 const taskPollingInterval = ref(null)
 
 // Dialog State