From aed2f7ce67211f5ca0078728753d19694ea30734 Mon Sep 17 00:00:00 2001
From: Henry Li <henry1943@163.com>
Date: Thu, 22 Jan 2026 11:42:25 +0800
Subject: [PATCH] feat: adjust styles

---
 .../app/workspace/chats/[thread_id]/page.tsx    |  2 +-
 frontend/src/components/workspace/todo-list.tsx | 17 ++++++++++++-----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/workspace/chats/[thread_id]/page.tsx b/frontend/src/app/workspace/chats/[thread_id]/page.tsx
index 550915e..a3ca0ef 100644
--- a/frontend/src/app/workspace/chats/[thread_id]/page.tsx
+++ b/frontend/src/app/workspace/chats/[thread_id]/page.tsx
@@ -163,7 +163,7 @@ export default function ChatPage() {
                     </div>
                   )}
                   <div className="absolute -top-4 right-0 left-0 z-0">
-                    <div className="absolute right-0 bottom-0 left-0 px-4">
+                    <div className="absolute right-0 bottom-0 left-0">
                       <TodoList
                         className="bg-background/5"
                         todos={thread.values.todos ?? []}
diff --git a/frontend/src/components/workspace/todo-list.tsx b/frontend/src/components/workspace/todo-list.tsx
index 46cad9d..1c6b5e7 100644
--- a/frontend/src/components/workspace/todo-list.tsx
+++ b/frontend/src/components/workspace/todo-list.tsx
@@ -1,4 +1,4 @@
-import { ChevronUpIcon } from "lucide-react";
+import { ChevronUpIcon, ListTodoIcon } from "lucide-react";
 
 import type { Todo } from "@/core/todos";
 import { cn } from "@/lib/utils";
@@ -26,18 +26,25 @@ export function TodoList({
   return (
     <div
       className={cn(
-        "flex h-fit w-full origin-bottom flex-col overflow-hidden rounded-t-xl border border-b-0 bg-white backdrop-blur-sm transition-all duration-200 ease-out",
+        "flex h-fit w-full origin-bottom translate-y-4 flex-col overflow-hidden rounded-t-xl border border-b-0 bg-white backdrop-blur-sm transition-all duration-200 ease-out",
         hidden ? "pointer-events-none translate-y-8 opacity-0" : "",
         className,
       )}
     >
       <header
-        className="bg-accent flex min-h-8 shrink-0 cursor-pointer items-center justify-between px-4 text-sm transition-all duration-300 ease-out"
+        className={cn(
+          "bg-accent flex min-h-8 shrink-0 cursor-pointer items-center justify-between px-4 text-sm transition-all duration-300 ease-out",
+        )}
         onClick={() => {
           onToggle?.();
         }}
       >
-        <div className="text-muted-foreground">To-dos</div>
+        <div className="text-muted-foreground">
+          <div className="flex items-center justify-center gap-2">
+            <ListTodoIcon className="size-4" />
+            <div>To-dos</div>
+          </div>
+        </div>
         <div>
           <ChevronUpIcon
             className={cn(
@@ -50,7 +57,7 @@ export function TodoList({
       <main
         className={cn(
           "bg-accent flex grow px-2 transition-all duration-300 ease-out",
-          collapsed ? "h-0" : "h-28",
+          collapsed ? "h-0 pb-3" : "h-28 pb-4",
         )}
       >
         <QueueList className="bg-background mt-0 w-full rounded-t-xl">