fix: refresh side panel after loadTasks in non-landscape mode

After saveTask or setTaskStatus triggers loadTasks(), the side panel now refreshes from the updated server data. If the selected task no longer exists (deleted or goal changed), the side panel closes. This ensures Edit Task always matches selectedTaskId.
feat: clicking a task now scrolls to and highlights it
2026-05-09 16:37:26 +08:00 · 2026-05-09 16:34:04 +08:00 · 2026-05-09 16:26:41 +08:00 · 2026-05-09 16:21:36 +08:00 · 2026-05-09 16:16:58 +08:00 · 2026-05-09 16:13:05 +08:00
9 changed files with 221 additions and 30 deletions
@@ -347,7 +347,7 @@ def api_update_task_status(task_id):
                doing_task = t
                break
        if doing_task:
-            database.update_task(doing_task["id"], status="todo")
+            database.update_task(doing_task["id"], status="pending")
        updates["start_time"] = datetime.now().isoformat()
    else:
        updates["start_time"] = None
@@ -48,7 +48,7 @@ def create_user(username, password_hash, role="user", max_goals=None):
 def update_user(user_id, **kwargs):
    if not kwargs:
        return
-    sets = ", ".join(f"{k} = ?" for k in kwargs)
+    sets = ", ".join(f'"{k}" = ?' for k in kwargs)
    values = list(kwargs.values()) + [user_id]
    conn = get_connection()
    try:
@@ -101,7 +101,7 @@ def create_goal(user_id, title):
 def update_goal(goal_id, **kwargs):
    if not kwargs:
        return
-    sets = ", ".join(f"{k} = ?" for k in kwargs)
+    sets = ", ".join(f'"{k}" = ?' for k in kwargs)
    values = list(kwargs.values()) + [goal_id]
    conn = get_connection()
    try:
@@ -177,7 +177,7 @@ def create_task(goal_id, title, desc="", status="todo", order=None):
 def update_task(task_id, **kwargs):
    if not kwargs:
        return
-    sets = ", ".join(f"{k} = ?" for k in kwargs)
+    sets = ", ".join(f'"{k}" = ?' for k in kwargs)
    values = list(kwargs.values()) + [task_id]
    conn = get_connection()
    try:
@@ -190,6 +190,7 @@ def update_task(task_id, **kwargs):
 def delete_task(task_id):
    conn = get_connection()
    try:
+        conn.execute('UPDATE goals SET "selected_task_id" = NULL WHERE "selected_task_id" = ?', (task_id,))
        conn.execute("DELETE FROM tasks WHERE id = ?", (task_id,))
        conn.commit()
    finally:
@@ -201,14 +202,25 @@ def get_tasks_sorted(goal_id):
    try:
        cur = conn.execute(
            """SELECT * FROM tasks WHERE goal_id = ? AND status = 'done'
-               ORDER BY finished_time DESC""",
+               ORDER BY finished_time ASC""",
            (goal_id,)
        )
        finished = [row_to_dict(r) for r in cur.fetchall()]

        cur = conn.execute(
            """SELECT * FROM tasks WHERE goal_id = ? AND status != 'done'
-               ORDER BY "order" ASC""",
+               ORDER BY
+                   CASE status
+                       WHEN 'doing' THEN 0
+                       WHEN 'pending' THEN 1
+                       WHEN 'todo' THEN 2
+                   END ASC,
+                   CASE status
+                       WHEN 'pending' THEN start_time
+                   END ASC,
+                   CASE status
+                       WHEN 'todo' THEN "order"
+                   END ASC""",
            (goal_id,)
        )
        unfinished = [row_to_dict(r) for r in cur.fetchall()]
@@ -22,7 +22,7 @@ CREATE TABLE IF NOT EXISTS goals (
    activated INTEGER NOT NULL DEFAULT 1,
    selected_task_id INTEGER,
    FOREIGN KEY (user_id) REFERENCES users(id),
-    FOREIGN KEY (selected_task_id) REFERENCES tasks(id)
+    FOREIGN KEY (selected_task_id) REFERENCES tasks(id) ON DELETE SET NULL
 )
 """

@@ -182,6 +182,11 @@ body {
    background-color: #229954;
 }

+button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
 .error-message {
    color: #e74c3c;
    margin-bottom: 1rem;
@@ -276,10 +281,14 @@ body {
    }

    .modal-actions {
-        flex-wrap: wrap;
+        flex-direction: column;
+        gap: 0.5rem;
    }

+    .modal-actions .btn-primary,
+    .modal-actions .btn-secondary,
    .modal-actions .btn-danger {
        width: 100%;
+        text-align: center;
    }
 }
@@ -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);
@@ -96,6 +97,81 @@
    border-color: #28a745;
 }

+.status-toggle {
+    display: flex;
+    gap: 0;
+    flex-wrap: nowrap;
+}
+
+.status-btn {
+    padding: 0.5rem 1rem;
+    border: 2px solid #ddd;
+    cursor: pointer;
+    font-size: 0.875rem;
+    font-weight: 500;
+    transition: all 0.15s ease;
+    background: #f8f9fa;
+    color: #666;
+    margin-left: -1px;
+}
+
+.status-btn:first-child {
+    border-radius: 6px 0 0 6px;
+    margin-left: 0;
+}
+
+.status-btn:last-child {
+    border-radius: 0 6px 6px 0;
+}
+
+.status-btn.todo:hover {
+    border-color: #667eea;
+    color: #667eea;
+}
+
+.status-btn.todo.active {
+    background: #f8f9fa;
+    border-color: #667eea;
+    color: #667eea;
+    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
+}
+
+.status-btn.doing:hover {
+    border-color: #ffc107;
+    color: #b8860b;
+}
+
+.status-btn.doing.active {
+    background: #fff3cd;
+    border-color: #ffc107;
+    color: #856404;
+    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.2);
+}
+
+.status-btn.pending:hover {
+    border-color: #2196F3;
+    color: #2196F3;
+}
+
+.status-btn.pending.active {
+    background: #e7f3ff;
+    border-color: #2196F3;
+    color: #0d6efd;
+    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
+}
+
+.status-btn.done:hover {
+    border-color: #28a745;
+    color: #28a745;
+}
+
+.status-btn.done.active {
+    background: #d4edda;
+    border-color: #28a745;
+    color: #155724;
+    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2);
+}
+
 .task-item:hover {
    background: #e9ecef;
 }
@@ -235,8 +311,15 @@
        padding: 30vh 1rem;
    }

+    .goal-selector-container {
+        min-width: 0;
+        width: 100%;
+    }
+
    .goal-selector-container select {
-        min-width: 140px;
+        min-width: 0;
+        width: 100%;
+        max-width: 100%;
    }
 }

@@ -277,7 +360,7 @@
    .side-panel {
        position: relative;
        right: 0;
-        width: 350px;
+        width: 400px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        border-radius: 8px;
        z-index: 1;
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#6366f1"/>
+      <stop offset="100%" style="stop-color:#a855f7"/>
+    </linearGradient>
+  </defs>
+  <rect width="100" height="100" rx="24" fill="url(#bg)"/>
+  <path d="M28 52 L42 66 L72 36" fill="none" stroke="white" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -42,13 +42,15 @@ async function loadTasks() {

        renderTasks();
        initSortable();
-        initScrollFocus();

        const currentGoal = goals.find(g => g.id === selectedGoalId);
        const savedTaskId = currentGoal ? currentGoal.selected_task_id : null;
        const savedTaskExists = savedTaskId && tasks.some(t => t.id === savedTaskId);

+        let focusTaskId = null;
+
        if (savedTaskExists) {
+            focusTaskId = savedTaskId;
            scrollToTask(savedTaskId);
            if (isLandscapeMode()) {
                selectTask(savedTaskId);
@@ -56,6 +58,7 @@ async function loadTasks() {
        } else {
            const doingTask = tasks.find(t => t.status === "doing");
            if (doingTask) {
+                focusTaskId = doingTask.id;
                scrollToTask(doingTask.id);
                if (isLandscapeMode()) {
                    selectTask(doingTask.id);
@@ -64,6 +67,33 @@ async function loadTasks() {
                selectTask(tasks[0].id);
            }
        }
+
+        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");
+                }
+            }
+
+            // Refresh side panel if a task was selected
+            if (selectedTaskId) {
+                const currentTask = tasks.find(t => t.id === selectedTaskId);
+                if (currentTask) {
+                    document.getElementById("edit-task-title").value = currentTask.title;
+                    document.getElementById("edit-task-desc").value = currentTask.desc || "";
+                    document.querySelectorAll(".status-btn").forEach(btn => {
+                        btn.classList.toggle("active", btn.dataset.status === currentTask.status);
+                    });
+                    updateSaveButton();
+                } else {
+                    closeSidePanel();
+                }
+            }
+
+            initScrollFocus();
+        });
    } catch (error) {
        console.error("Failed to load tasks:", error);
    }
@@ -77,6 +107,7 @@ async function persistSelectedTask(taskId) {
        if (goal) {
            goal.selected_task_id = taskId;
        }
+        console.log("Saved selected task:", taskId);
    } catch (error) {
        console.error("Failed to persist selected task:", error);
    }
@@ -153,9 +184,9 @@ function initScrollFocus() {
    const scrollView = document.getElementById("scroll-view");

    scrollView.removeEventListener("scroll", handleScrollFocus);
+    scrollView.removeEventListener("scroll", handleScrollSave);
    scrollView.addEventListener("scroll", handleScrollFocus);
-
-    handleScrollFocus();
+    scrollView.addEventListener("scroll", handleScrollSave);
 }

 function handleScrollFocus() {
@@ -186,9 +217,6 @@ function handleScrollFocus() {

        const taskId = parseInt(closestItem.dataset.taskId);

-        clearTimeout(persistTimer);
-        persistTimer = setTimeout(() => persistSelectedTask(taskId), 400);
-
        if (isLandscapeMode()) {
            if (taskId !== selectedTaskId) {
                selectTask(taskId);
@@ -197,6 +225,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;
 }
@@ -207,10 +245,22 @@ function selectTask(taskId) {

    if (!task) return;

+    document.querySelectorAll(".task-item.in-focus").forEach(el => el.classList.remove("in-focus"));
+    const taskEl = document.querySelector(`[data-task-id="${taskId}"]`);
+    if (taskEl) {
+        taskEl.classList.add("in-focus");
+    }
+
+    scrollToTask(taskId);
+
    document.getElementById("edit-task-title").value = task.title;
    document.getElementById("edit-task-desc").value = task.desc || "";
-    document.getElementById("edit-task-status").value = task.status;
    document.getElementById("side-panel-error").textContent = "";
+    updateSaveButton();
+
+    document.querySelectorAll(".status-btn").forEach(btn => {
+        btn.classList.toggle("active", btn.dataset.status === task.status);
+    });

    const sidePanel = document.getElementById("side-panel");
    if (!sidePanel.classList.contains("active")) {
@@ -218,6 +268,17 @@ function selectTask(taskId) {
    }
 }

+function updateSaveButton() {
+    const task = tasks.find(t => t.id === selectedTaskId);
+    if (!task) return;
+
+    const title = document.getElementById("edit-task-title").value.trim();
+    const desc = document.getElementById("edit-task-desc").value;
+
+    const changed = title !== task.title || desc !== (task.desc || "");
+    document.getElementById("save-task-btn").disabled = !changed;
+}
+
 function closeSidePanel() {
    if (isLandscapeMode()) return;
    document.getElementById("side-panel").classList.remove("active");
@@ -232,7 +293,6 @@ async function saveTask() {

    const title = document.getElementById("edit-task-title").value.trim();
    const desc = document.getElementById("edit-task-desc").value;
-    const status = document.getElementById("edit-task-status").value;

    if (!title) {
        error.textContent = "Title is required";
@@ -241,12 +301,24 @@ async function saveTask() {

    try {
        await put(`/api/tasks/${selectedTaskId}`, { title, desc });
+        await loadTasks();
+    } catch (err) {
+        error.textContent = err.message;
+    }
+}

-        const currentTask = tasks.find(t => t.id === selectedTaskId);
-        if (status !== currentTask?.status) {
-            await patch(`/api/tasks/${selectedTaskId}/status`, { status });
-        }
+async function setTaskStatus(status) {
+    if (!selectedTaskId) return;

+    const error = document.getElementById("side-panel-error");
+    error.textContent = "";
+
+    document.querySelectorAll(".status-btn").forEach(btn => {
+        btn.classList.toggle("active", btn.dataset.status === status);
+    });
+
+    try {
+        await patch(`/api/tasks/${selectedTaskId}/status`, { status });
        await loadTasks();
    } catch (err) {
        error.textContent = err.message;
@@ -353,8 +425,12 @@ document.addEventListener("DOMContentLoaded", () => {

    document.getElementById("side-panel-close").addEventListener("click", closeSidePanel);
    document.getElementById("save-task-btn").addEventListener("click", saveTask);
+    document.getElementById("save-task-btn").disabled = true;
    document.getElementById("delete-task-btn").addEventListener("click", deleteTask);

+    document.getElementById("edit-task-title").addEventListener("input", updateSaveButton);
+    document.getElementById("edit-task-desc").addEventListener("input", updateSaveButton);
+
    initWheelScroll();
    loadGoals();
 });
@@ -4,6 +4,7 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}GoalsBreakDown{% endblock %}</title>
+    <link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='favicon.svg') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    {% block extra_css %}{% endblock %}
 </head>
@@ -39,13 +39,13 @@
                    <textarea id="edit-task-desc" rows="12" autocomplete="off"></textarea>
                </div>
                <div class="form-group">
-                    <label for="edit-task-status">Status</label>
-                    <select id="edit-task-status">
-                        <option value="todo">To Do</option>
-                        <option value="doing">Doing</option>
-                        <option value="pending">Pending</option>
-                        <option value="done">Done</option>
-                    </select>
+                    <label>Status</label>
+                    <div class="status-toggle" id="status-toggle">
+                        <button class="status-btn todo" data-status="todo" onclick="setTaskStatus('todo')">To Do</button>
+                        <button class="status-btn doing" data-status="doing" onclick="setTaskStatus('doing')">Doing</button>
+                        <button class="status-btn pending" data-status="pending" onclick="setTaskStatus('pending')">Pending</button>
+                        <button class="status-btn done" data-status="done" onclick="setTaskStatus('done')">Done</button>
+                    </div>
                </div>
                <div id="side-panel-error" class="error-message"></div>
                <div class="side-panel-actions">
@@ -63,7 +63,7 @@
            <h2 id="task-modal-title">Create Task</h2>
            <button class="modal-close" id="task-modal-close">&times;</button>
        </div>
-        <form id="task-form" autocomplete="off">
+        <form id="task-form" autocomplete="off" novalidate>
            <input type="hidden" id="task-id">
            <div class="form-group">
                <label for="task-title">Task Title</label>
Author	SHA1	Message	Date
Yuyao Huang	5e827e7d99	fix: refresh side panel after loadTasks in non-landscape mode After saveTask or setTaskStatus triggers loadTasks(), the side panel now refreshes from the updated server data. If the selected task no longer exists (deleted or goal changed), the side panel closes. This ensures Edit Task always matches selectedTaskId.	2026-05-09 16:37:26 +08:00
Yuyao Huang	fcee783ee5	feat: clicking a task now scrolls to and highlights it selectTask() now also sets in-focus class and calls scrollToTask(), making click behavior consistent with scroll-to-focus behavior. Removed selectedTaskId assignment in loadTasks since selectTask already sets it.	2026-05-09 16:34:04 +08:00
Yuyao Huang	3f0fccd218	feat: disable Save button when content unchanged - Save button starts disabled and only enables when title or description differs from the original task values - updateSaveButton() compares current input values against task data - input event listeners on title and desc fields call updateSaveButton - Add global button:disabled style (opacity 0.5, cursor not-allowed)	2026-05-09 16:26:41 +08:00
Yuyao Huang	ea21b0c78c	feat: status buttons as one-row group, wider side panel - Status buttons now form a seamless button group (no gaps, shared borders, rounded ends) with flex-wrap: nowrap to keep them in one row - Side panel width increased from 350px to 400px for more content space	2026-05-09 16:21:36 +08:00
Yuyao Huang	9c1d45506a	feat: replace status dropdown with one-click toggle buttons Replace <select> in side panel with 4 toggle buttons (To Do / Doing / Pending / Done). Clicking a button immediately sends the PATCH status API call. Active button is highlighted with status-specific colors and shadow. saveTask now only handles title/description changes.	2026-05-09 16:16:58 +08:00
Yuyao Huang	43ca6b8462	fix: correct task sort order per status DONE: finished_time ASC, PENDING: start_time ASC, TODO: order ASC	2026-05-09 16:13:05 +08:00
Yuyao Huang	01ae9c964a	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.	2026-05-09 16:06:06 +08:00
Yuyao Huang	5294446407	fix: use requestAnimationFrame to defer in-focus and handler binding requestAnimationFrame waits until after the browser has rendered the current frame, which includes processing the async scroll event queued by scrollToTask. This ensures in-focus is set after the scroll event fires, not overwritten by it.	2026-05-09 16:04:08 +08:00
Yuyao Huang	ab000bcd41	fix: delay scroll handler binding to skip queued scroll event scrollTop assignment triggers an async scroll event. When all tasks fit in the viewport, handleScrollFocus recalculates center-aligned task and picks the last one instead of the saved one. Using setTimeout(0) defers handler binding to after the queued event fires.	2026-05-09 15:59:13 +08:00
Yuyao Huang	2229fdd0ef	fix: directly set in-focus on scrolled task instead of recalculating geometry Previously handleScrollFocus() recalculated the centered task during init, which could select a different task than the one scrollToTask() targeted due to scroll container clamping or DOM layout timing. Now the scrolled task directly receives the in-focus class, and handleScrollFocus is only used during user-initiated scroll events. Also removes the isInitializing flag as it's no longer needed.	2026-05-09 15:52:24 +08:00
Yuyao Huang	1a23558cad	fix: restore center alignment in scrollToTask to match handleScrollFocus Both scrollToTask and handleScrollFocus now use center-of-viewport calculation, ensuring consistent behavior between scrolling and in-focus detection.	2026-05-09 15:44:47 +08:00
Yuyao Huang	84181e1ec2	fix: use scrollTop instead of viewport center for in-focus detection handleScrollFocus now finds the task closest to scrollTop (offset) instead of closest to the vertical center of the viewport. This ensures that the saved task matches the user's scroll target.	2026-05-09 15:37:34 +08:00
Yuyao Huang	eca0cf4193	fix: call handleScrollFocus before binding scroll event handlers Call handleScrollFocus before adding scroll event listeners to prevent handleScrollSave from triggering during initial setup.	2026-05-09 15:33:40 +08:00
Yuyao Huang	14ebbda585	fix: skip save during initial handleScrollFocus call Wrap the initial handleScrollFocus call with isInitializing flag to prevent handleScrollSave from incorrectly updating selected_task_id	2026-05-09 15:29:01 +08:00
Yuyao Huang	fd92c6fe96	fix: save the in-focus task instead of recalculating top task handleScrollSave now saves the task with in-focus class (determined by handleScrollFocus as the centered task) rather than recalculating which task is closest to the top. This ensures consistency between what's highlighted and what's saved.	2026-05-09 15:21:13 +08:00
Yuyao Huang	12610d26c0	Add debugging logs to trace scroll save behavior	2026-05-09 15:14:11 +08:00
Yuyao Huang	1df90490e6	fix: restore scroll position and in-focus highlighting correctly - Set selectedTaskId when loading saved task - Call handleScrollFocus initially to set in-focus class - Skip saving during initialization unless task matches saved	2026-05-09 14:51:41 +08:00
Yuyao Huang	ca7bd7e24e	fix: align task to top instead of center in scroll view	2026-05-09 14:47:03 +08:00
Yuyao Huang	025195be27	Add detailed scroll position diagnostics	2026-05-09 14:43:29 +08:00
Yuyao Huang	0f1fa712a9	Add delayed scrollTop checks to catch post-load changes	2026-05-09 14:39:00 +08:00
Yuyao Huang	df74f1b8a7	Add end-of-loadTasks scrollTop debug log	2026-05-09 14:35:28 +08:00
Yuyao Huang	295fde8a75	Add debug logging for goals data	2026-05-09 14:26:57 +08:00
Yuyao Huang	1f4efcd7b3	Add debug logging for scroll position restoration	2026-05-09 14:16:15 +08:00
Yuyao Huang	643ba56768	fix: skip initial handleScrollFocus call to prevent position override Remove immediate handleScrollFocus() call in initScrollFocus(). Only actual user scroll events will trigger position saving now.	2026-05-09 14:08:22 +08:00
Yuyao Huang	27f85cd913	fix: prevent scroll position override during page initialization Add isInitializing flag to block persistSelectedTask during loadTasks, preventing handleScrollFocus from overwriting the saved scroll position	2026-05-09 14:05:11 +08:00
Yuyao Huang	f021395773	fix: ensure scroll position is restored before initializing scroll focus Move initScrollFocus() after scrollToTask() to prevent handleScrollFocus() from incorrectly updating selected_task_id before the saved position is restored	2026-05-09 13:59:57 +08:00
Yuyao Huang	b69065e487	feat: add favicon to browser tab	2026-05-09 13:47:30 +08:00
Yuyao Huang	0d148b694f	fix: change DOING takeover behavior to PENDING and enforce status sort order - When setting a new task to DOING, the previous DOING task now switches to PENDING instead of TODO - Task display order now prioritizes by status: DONE < DOING < PENDING < TODO, with order field respected within each status group	2026-05-09 13:43:57 +08:00
Yuyao Huang	427f62acca	fix: handle foreign key constraint when deleting tasks with selected_task_id refs Goals table has selected_task_id referencing tasks(id) without ON DELETE SET NULL. When deleting a task, first clear any selected_task_id references in goals to prevent FK violation. Also update schema for future databases.	2026-05-09 13:05:53 +08:00
Yuyao Huang	6a2e0537ea	fix: remove duplicate submit handler that caused double task creation The Save button already has type=submit which naturally triggers form submission. The additional click handler dispatching submit event caused handleTaskSubmit to run twice.	2026-05-09 13:03:03 +08:00
Yuyao Huang	8ede63adcd	fix: quote column names in UPDATE statements to handle reserved keywords 'order' is a reserved keyword in SQLite. Quote all column names in update_user, update_goal, and update_task to prevent syntax errors when updating columns with reserved names.	2026-05-09 12:57:18 +08:00
Yuyao Huang	be4d11a60e	fix: mobile task creation button reliability - Add novalidate to task-form to prevent browser validation quirks - Add explicit click handler for Save button that triggers form submission via dispatched event for mobile compatibility	2026-05-09 12:55:05 +08:00
Yuyao Huang	f7afdf5c96	fix: stack modal buttons vertically on mobile for touch-friendly layout On small screens (<=640px), modal action buttons now stack vertically with full width instead of wrapping unpredictably. This applies to all modals: note, task, goal.	2026-05-09 11:02:37 +08:00
Yuyao Huang	2345724535	fix: constrain goal selector width on mobile in tasks page On small screens (<=480px), the goal selector dropdown could overflow due to long option text. Match notes page behavior: set select to width:100% with max-width:100%.	2026-05-09 11:00:51 +08:00