From e2e3d5a8153a67e11e0af8cd92fa5904a44708f8 Mon Sep 17 00:00:00 2001
From: catlog22 <catlog22@github.com>
Date: Thu, 22 Jan 2026 11:41:00 +0800
Subject: [PATCH] style: improve task list CSS styling and layout

Task List Styling Improvements:

1. Added .tasks-list-header styling
   - Flexbox layout with space-between alignment
   - Border bottom separator line
   - Proper heading (h4) with icon and spacing
   - Muted text color for counts

2. Added .task-list-empty styling
   - Full centered empty state container
   - Proper spacing and padding (3rem)
   - Icon styling with reduced opacity
   - Title and hint text with correct colors and sizes
   - Button margin adjustment

3. Enhanced .empty-state styling
   - Added button margin-top (1rem) for better spacing
   - Applied to both .empty-state and .empty-detail-state

Result: Task list now has consistent, professional styling with:
- Clear visual hierarchy for headers
- Properly centered empty states
- Better spacing and typography
- Improved user experience
---
 .../dashboard-css/36-loop-monitor.css         | 64 +++++++++++++++++++
 1 file changed, 64 insertions(+)

diff --git a/ccw/src/templates/dashboard-css/36-loop-monitor.css b/ccw/src/templates/dashboard-css/36-loop-monitor.css
index 0820afe2..83ebac3a 100644
--- a/ccw/src/templates/dashboard-css/36-loop-monitor.css
+++ b/ccw/src/templates/dashboard-css/36-loop-monitor.css
@@ -883,6 +883,11 @@
   line-height: 1.5;
 }
 
+.empty-state .btn,
+.empty-detail-state .btn {
+  margin-top: 1rem;
+}
+
 /* ==========================================
    TASK LIST
    ========================================== */
@@ -895,6 +900,65 @@
   overflow-y: auto;
 }
 
+/* Task List Header */
+.tasks-list-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid hsl(var(--border) / 0.6);
+  margin-bottom: 0.75rem;
+}
+
+.tasks-list-header h4 {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.tasks-list-header .text-sm {
+  font-size: 0.75rem;
+  color: hsl(var(--muted-foreground));
+}
+
+/* Task List Empty State */
+.task-list-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  padding: 3rem 1rem;
+  text-align: center;
+  color: hsl(var(--muted-foreground));
+}
+
+.task-list-empty i {
+  color: hsl(var(--muted-foreground) / 0.6);
+}
+
+.task-list-empty .empty-state-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+}
+
+.task-list-empty .empty-state-hint {
+  margin: 0;
+  font-size: 0.875rem;
+  color: hsl(var(--muted-foreground));
+  max-width: 300px;
+}
+
+.task-list-empty .btn {
+  margin-top: 0.5rem;
+}
+
 .task-item {
   display: flex;
   align-items: center;