From 1f816a109dab6d333b6f7fa6d3f54917b67a575d Mon Sep 17 00:00:00 2001
From: AJ Isaacs <ajisaacs27@gmail.com>
Date: Fri, 17 Jul 2026 21:06:09 -0400
Subject: [PATCH] fix(web): stop board swaps from nesting the full board inside
 the grid

Status-change actions (detail panel buttons and drag-and-drop) targeted
#kanban-board with innerHTML, but the handlers return the full
_KanbanBoard partial including the #board-content wrapper and filter
bar. Each action nested a new board inside the grid, duplicating the
filter chips and collapsing the layout. Target #board-content with
outerHTML instead, matching the filter bar and create-task form.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../Pages/Partials/_TaskDetail.cshtml         | 34 +++++++++----------
 TaskTracker.Api/wwwroot/js/app.js             |  4 +--
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/TaskTracker.Api/Pages/Partials/_TaskDetail.cshtml b/TaskTracker.Api/Pages/Partials/_TaskDetail.cshtml
index c8f0f35..6dc41e9 100644
--- a/TaskTracker.Api/Pages/Partials/_TaskDetail.cshtml
+++ b/TaskTracker.Api/Pages/Partials/_TaskDetail.cshtml
@@ -1,4 +1,4 @@
-@using TaskTracker.Api.Pages
+@using TaskTracker.Api.Pages
 @using TaskTracker.Core.Enums
 @model TaskTracker.Core.Entities.WorkTask
 
@@ -192,15 +192,15 @@
             {
                 case WorkTaskStatus.Pending:
                     <button hx-put="/board?handler=Start&id=@Model.Id"
-                            hx-target="#kanban-board"
-                            hx-swap="innerHTML"
+                            hx-target="#board-content"
+                            hx-swap="outerHTML"
                             class="btn btn--primary btn--full"
                             onclick="closeDetailPanel()">
                         Start
                     </button>
                     <button hx-delete="/board?handler=Abandon&id=@Model.Id"
-                            hx-target="#kanban-board"
-                            hx-swap="innerHTML"
+                            hx-target="#board-content"
+                            hx-swap="outerHTML"
                             class="btn btn--danger btn--full"
                             onclick="closeDetailPanel()">
                         Abandon
@@ -209,22 +209,22 @@
 
                 case WorkTaskStatus.Active:
                     <button hx-put="/board?handler=Pause&id=@Model.Id"
-                            hx-target="#kanban-board"
-                            hx-swap="innerHTML"
+                            hx-target="#board-content"
+                            hx-swap="outerHTML"
                             class="btn btn--amber btn--full"
                             onclick="closeDetailPanel()">
                         Pause
                     </button>
                     <button hx-put="/board?handler=Complete&id=@Model.Id"
-                            hx-target="#kanban-board"
-                            hx-swap="innerHTML"
+                            hx-target="#board-content"
+                            hx-swap="outerHTML"
                             class="btn btn--emerald btn--full"
                             onclick="closeDetailPanel()">
                         Complete
                     </button>
                     <button hx-delete="/board?handler=Abandon&id=@Model.Id"
-                            hx-target="#kanban-board"
-                            hx-swap="innerHTML"
+                            hx-target="#board-content"
+                            hx-swap="outerHTML"
                             class="btn btn--danger btn--full"
                             onclick="closeDetailPanel()">
                         Abandon
@@ -233,22 +233,22 @@
 
                 case WorkTaskStatus.Paused:
                     <button hx-put="/board?handler=Resume&id=@Model.Id"
-                            hx-target="#kanban-board"
-                            hx-swap="innerHTML"
+                            hx-target="#board-content"
+                            hx-swap="outerHTML"
                             class="btn btn--primary btn--full"
                             onclick="closeDetailPanel()">
                         Resume
                     </button>
                     <button hx-put="/board?handler=Complete&id=@Model.Id"
-                            hx-target="#kanban-board"
-                            hx-swap="innerHTML"
+                            hx-target="#board-content"
+                            hx-swap="outerHTML"
                             class="btn btn--emerald btn--full"
                             onclick="closeDetailPanel()">
                         Complete
                     </button>
                     <button hx-delete="/board?handler=Abandon&id=@Model.Id"
-                            hx-target="#kanban-board"
-                            hx-swap="innerHTML"
+                            hx-target="#board-content"
+                            hx-swap="outerHTML"
                             class="btn btn--danger btn--full"
                             onclick="closeDetailPanel()">
                         Abandon
diff --git a/TaskTracker.Api/wwwroot/js/app.js b/TaskTracker.Api/wwwroot/js/app.js
index dee19e0..5618b7d 100644
--- a/TaskTracker.Api/wwwroot/js/app.js
+++ b/TaskTracker.Api/wwwroot/js/app.js
@@ -47,8 +47,8 @@
 
                     // Fire htmx request to update the task status
                     htmx.ajax('PUT', '/board?handler=' + handler + '&id=' + taskId, {
-                        target: '#kanban-board',
-                        swap: 'innerHTML'
+                        target: '#board-content',
+                        swap: 'outerHTML'
                     });
                 }
             });