diff --git a/static/app.js b/static/app.js
index 0ac49fc..a3e3729 100644
--- a/static/app.js
+++ b/static/app.js
@@ -240,7 +240,7 @@ function showTaskModal(projectId) {
     </form>
     ${phases.map((phase) => {
     const pt = tasks.filter((t) => t.phase === phase);
-    return `<div class="task-group"><div class="task-group-hd"><span class="task-group-icon"><i data-lucide="layers"></i></span><span class="task-group-label">${phase}</span><span class="task-group-n">${pt.length}</span></div><div class="task-group-list">${pt.length ? pt.map((t) => `<div class="task-row" data-id="${t.id}"><span class="task-dot"><i data-lucide="${t.status === 'done' ? 'check-circle' : 'circle'}"></i></span><span class="task-name">${t.task}</span>${(t.owner || t.due_date) ? `<span class="task-meta">${t.owner || ""}${t.owner && t.due_date ? " · " : ""}${t.due_date || ""}</span>` : ""}</div>`).join("") : `<div class="task-none">暂无任务</div>`}</div></div>`;
+    return `<div class="task-group"><div class="task-group-hd"><span class="task-group-icon"><i data-lucide="layers"></i></span><span class="task-group-label">${phase}</span><span class="task-group-n">${pt.length}</span></div><div class="task-group-list">${pt.length ? pt.map((t) => `<div class="task-row" data-id="${t.id}"><span class="task-dot"><i data-lucide="${t.status === 'done' ? 'check-circle' : 'circle'}"></i></span><div class="task-main"><span class="task-name">${t.task}</span>${t.notes ? `<span class="task-desc">${t.notes}</span>` : ""}</div><div class="task-right">${t.owner ? `<span class="task-meta">${t.owner}</span>` : ""}${t.due_date ? `<span class="task-meta">${t.due_date}</span>` : ""}</div></div>`).join("") : `<div class="task-none">暂无任务</div>`}</div></div>`;
   }).join("")}</div></div></div>`;
   document.querySelector("#taskModal").classList.add("active");
   if (window.lucide) window.lucide.createIcons();
diff --git a/static/styles.css b/static/styles.css
index 5f41e43..f691511 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -499,7 +499,7 @@ td {
   padding-top: 48px; overflow-y: auto;
 }
 .task-panel {
-  background: #18191c; border-radius: 12px; width: 600px; max-width: 92vw;
+  background: #18191c; border-radius: 12px; width: 800px; max-width: 94vw;
   box-shadow: 0 24px 80px rgba(0,0,0,0.4); margin-bottom: 48px;
 }
 .task-header {
@@ -529,12 +529,15 @@ td {
 }
 .task-group-list { display: flex; flex-direction: column; }
 .task-row {
-  display: flex; align-items: center; gap: 10px;
-  padding: 8px 14px; border-top: 1px solid #24272d;
+  display: flex; align-items: flex-start; gap: 10px;
+  padding: 10px 14px; border-top: 1px solid #24272d;
 }
-.task-dot { display: flex; color: #4b4d54; }
-.task-name { color: #c5c6ca; font-size: 13px; }
-.task-meta { color: #5a5c63; font-size: 11px; margin-left: auto; white-space: nowrap; }
+.task-dot { display: flex; color: #4b4d54; padding-top: 2px; flex-shrink: 0; }
+.task-main { flex: 1; min-width: 0; }
+.task-name { color: #c5c6ca; font-size: 13px; display: block; }
+.task-desc { color: #5a5c63; font-size: 12px; display: block; margin-top: 3px; }
+.task-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
+.task-meta { color: #5a5c63; font-size: 11px; white-space: nowrap; }
 .task-none { color: #4b4d54; font-size: 13px; padding: 12px 14px; text-align: center; border-top: 1px solid #24272d; }
 .task-form {
   background: #141518; border: 1px solid #2a2d34; border-radius: 8px;