From ea21b0c78cf5d97ec42b24d084aa2a740a8519b6 Mon Sep 17 00:00:00 2001
From: Yuyao Huang <huangyuyao@outlook.com>
Date: Sat, 9 May 2026 16:21:36 +0800
Subject: [PATCH] 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
---
 static/css/tasks.css | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/static/css/tasks.css b/static/css/tasks.css
index a40bbdb..3fd73eb 100644
--- a/static/css/tasks.css
+++ b/static/css/tasks.css
@@ -99,20 +99,29 @@
 
 .status-toggle {
     display: flex;
-    gap: 0.5rem;
-    flex-wrap: wrap;
+    gap: 0;
+    flex-wrap: nowrap;
 }
 
 .status-btn {
     padding: 0.5rem 1rem;
     border: 2px solid #ddd;
-    border-radius: 6px;
     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 {
@@ -351,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;