fix: add position: relative to scroll-view for correct offsetTop

Without position: relative, .task-item offsetParent is the body element,
causing offsetTop to be measured from document root rather than the
scroll container. This makes scrollToTask calculate wrong scrollTop.

static/css/tasks.css

@@ -44,6 +44,7 @@
     flex: 1;
     height: 600px;
     overflow-y: auto;
+    position: relative;
     background: white;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);

static/js/tasks.js

@@ -5,7 +5,6 @@ let selectedTaskId = null;
 let sortableInstance = null;
 let persistTimer = null;
 let currentUser = null;
-let isInitializing = false;
 
 async function loadGoals() {
     try {
@@ -38,31 +37,29 @@ async function loadGoals() {
 async function loadTasks() {
     if (!selectedGoalId) return;
 
-    isInitializing = true;
     try {
         tasks = await get(`/api/tasks?goal_id=${selectedGoalId}`);
-        console.log("loadTasks: got", tasks.length, "tasks");
-        console.log("Task order:", tasks.map(t => ({id: t.id, title: t.title, status: t.status})));
 
         renderTasks();
         initSortable();
 
         const currentGoal = goals.find(g => g.id === selectedGoalId);
         const savedTaskId = currentGoal ? currentGoal.selected_task_id : null;
-        console.log("loadTasks: savedTaskId from goal =", savedTaskId);
         const savedTaskExists = savedTaskId && tasks.some(t => t.id === savedTaskId);
-        console.log("loadTasks: savedTaskExists =", savedTaskExists);
+
+        let focusTaskId = null;
 
         if (savedTaskExists) {
-            console.log("loadTasks: using savedTaskId path");
+            focusTaskId = savedTaskId;
             scrollToTask(savedTaskId);
+            selectedTaskId = savedTaskId;
             if (isLandscapeMode()) {
                 selectTask(savedTaskId);
             }
         } else {
-            console.log("loadTasks: using fallback path");
             const doingTask = tasks.find(t => t.status === "doing");
             if (doingTask) {
+                focusTaskId = doingTask.id;
                 scrollToTask(doingTask.id);
                 if (isLandscapeMode()) {
                     selectTask(doingTask.id);
@@ -72,22 +69,32 @@ async function loadTasks() {
             }
         }
 
+        // Wait one frame so the async scroll event from scrollToTask fires first,
+        // then set in-focus and bind handlers after it has been consumed.
+        requestAnimationFrame(() => {
+            if (focusTaskId) {
+                document.querySelectorAll(".task-item.in-focus").forEach(el => el.classList.remove("in-focus"));
+                const focusEl = document.querySelector(`[data-task-id="${focusTaskId}"]`);
+                if (focusEl) {
+                    focusEl.classList.add("in-focus");
+                }
+            }
             initScrollFocus();
+        });
     } catch (error) {
         console.error("Failed to load tasks:", error);
-    } finally {
-        isInitializing = false;
     }
 }
 
 async function persistSelectedTask(taskId) {
-    if (!selectedGoalId || isInitializing) return;
+    if (!selectedGoalId) return;
     try {
         await patch(`/api/goals/${selectedGoalId}/selected-task`, { task_id: taskId });
         const goal = goals.find(g => g.id === selectedGoalId);
         if (goal) {
             goal.selected_task_id = taskId;
         }
+        console.log("Saved selected task:", taskId);
     } catch (error) {
         console.error("Failed to persist selected task:", error);
     }
@@ -150,19 +157,13 @@ function initSortable() {
 }
 
 function scrollToTask(taskId) {
-    console.log("scrollToTask called:", taskId);
     const taskElement = document.querySelector(`[data-task-id="${taskId}"]`);
     if (taskElement) {
         const scrollView = document.getElementById("scroll-view");
         const taskTop = taskElement.offsetTop;
         const scrollViewHeight = scrollView.clientHeight;
         const taskHeight = taskElement.offsetHeight;
-        const targetScrollTop = taskTop - (scrollViewHeight / 2) + (taskHeight / 2);
+        scrollView.scrollTop = taskTop - (scrollViewHeight / 2) + (taskHeight / 2);
-        console.log("Scrolling to:", targetScrollTop, "element offsetTop:", taskTop);
-        scrollView.scrollTop = targetScrollTop;
-        console.log("scrollTop after set:", scrollView.scrollTop);
-    } else {
-        console.log("Task element not found for id:", taskId);
     }
 }
 
@@ -170,7 +171,9 @@ function initScrollFocus() {
     const scrollView = document.getElementById("scroll-view");
 
     scrollView.removeEventListener("scroll", handleScrollFocus);
+    scrollView.removeEventListener("scroll", handleScrollSave);
     scrollView.addEventListener("scroll", handleScrollFocus);
+    scrollView.addEventListener("scroll", handleScrollSave);
 }
 
 function handleScrollFocus() {
@@ -201,9 +204,6 @@ function handleScrollFocus() {
 
         const taskId = parseInt(closestItem.dataset.taskId);
 
-        clearTimeout(persistTimer);
-        persistTimer = setTimeout(() => persistSelectedTask(taskId), 400);
-
         if (isLandscapeMode()) {
             if (taskId !== selectedTaskId) {
                 selectTask(taskId);
@@ -212,6 +212,16 @@ function handleScrollFocus() {
     }
 }
 
+function handleScrollSave() {
+    const inFocusTask = document.querySelector(".task-item.in-focus");
+
+    if (inFocusTask) {
+        const taskId = parseInt(inFocusTask.dataset.taskId);
+        clearTimeout(persistTimer);
+        persistTimer = setTimeout(() => persistSelectedTask(taskId), 400);
+    }
+}
+
 function isLandscapeMode() {
     return window.innerWidth > window.innerHeight && window.innerWidth >= 1024;
 }