From d70f02abed755dcbd7b6bf973b203dcf334419a9 Mon Sep 17 00:00:00 2001
From: catlog22 <catlog22@github.com>
Date: Thu, 22 Jan 2026 11:07:47 +0800
Subject: [PATCH] fix: resolve Loop Monitor UI styling issues
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add missing i18n keys: 'loop.listView' and 'loop.addTask' for both English and Chinese
- Fix kanban board header layout: wrap title and loop name in separate container (.kanban-header-left)
- Add CSS styling for .kanban-header-left and .kanban-loop-title to properly display loop titles
- Improve visual separation between 'Tasks Board' label and loop title

This fixes the issue where loop titles were appearing inline with the 'Tasks Board' header,
making them appear jumbled (e.g., '任务看板 在' instead of '任务看板' | '在').
---
 ccw/src/templates/dashboard-css/36-loop-monitor.css | 13 +++++++++++++
 ccw/src/templates/dashboard-js/i18n.js              |  4 ++++
 .../templates/dashboard-js/views/loop-monitor.js    |  8 +++++---
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/ccw/src/templates/dashboard-css/36-loop-monitor.css b/ccw/src/templates/dashboard-css/36-loop-monitor.css
index fb57dfe6..8f7705e6 100644
--- a/ccw/src/templates/dashboard-css/36-loop-monitor.css
+++ b/ccw/src/templates/dashboard-css/36-loop-monitor.css
@@ -524,6 +524,19 @@
   border-bottom: 1px solid hsl(var(--border));
 }
 
+.kanban-header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.kanban-loop-title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: hsl(var(--foreground));
+  opacity: 0.85;
+}
+
 .detail-actions {
   display: flex;
   gap: 0.5rem;
diff --git a/ccw/src/templates/dashboard-js/i18n.js b/ccw/src/templates/dashboard-js/i18n.js
index 3bfa7807..13fd7e34 100644
--- a/ccw/src/templates/dashboard-js/i18n.js
+++ b/ccw/src/templates/dashboard-js/i18n.js
@@ -2199,6 +2199,8 @@ const i18n = {
     'loop.kanban.byStatus': 'By Status',
     'loop.kanban.byPriority': 'By Priority',
     'loop.kanban.noBoardData': 'No tasks to display',
+    'loop.listView': 'List View',
+    'loop.addTask': 'Add Task',
 
     // Navigation & Grouping
     'loop.nav.groupBy': 'Group By',
@@ -4790,6 +4792,8 @@ const i18n = {
     'loop.kanban.byStatus': '按状态',
     'loop.kanban.byPriority': '按优先级',
     'loop.kanban.noBoardData': '没有要显示的任务',
+    'loop.listView': '列表视图',
+    'loop.addTask': '添加任务',
 
     // Navigation & Grouping
     'loop.nav.groupBy': '分组',
diff --git a/ccw/src/templates/dashboard-js/views/loop-monitor.js b/ccw/src/templates/dashboard-js/views/loop-monitor.js
index bed97239..c2503aa6 100644
--- a/ccw/src/templates/dashboard-js/views/loop-monitor.js
+++ b/ccw/src/templates/dashboard-js/views/loop-monitor.js
@@ -1583,9 +1583,11 @@ function renderKanbanBoardContent(container, loop, loopId, tasksByStatus) {
   container.innerHTML = `
     <div class="loop-detail">
       <div class="detail-header">
-        <div class="detail-status ${loop.status}">
-          <i data-lucide="layout-grid" class="w-4 h-4"></i>
-          <span class="status-label">${t('loop.kanban.title') || 'Tasks Board'}</span>
+        <div class="kanban-header-left">
+          <div class="detail-status ${loop.status}">
+            <i data-lucide="layout-grid" class="w-4 h-4"></i>
+            <span class="status-label">${t('loop.kanban.title') || 'Tasks Board'}</span>
+          </div>
           <span class="kanban-loop-title">${escapeHtml(loop.title || loop.loop_id)}</span>
         </div>
         <div class="detail-actions">