diff --git a/frontend/src/components/tasks/TaskCard.tsx b/frontend/src/components/tasks/TaskCard.tsx
index 237770f..0ccdea3 100644
--- a/frontend/src/components/tasks/TaskCard.tsx
+++ b/frontend/src/components/tasks/TaskCard.tsx
@@ -186,39 +186,39 @@ export const TaskCard: React.FC = ({
)}
- {/* Footer: User Avatar & Live Timer Controls */}
-
- {/* Assignee / Creator */}
-
+ {/* Footer: User in line 1, Time & Play Button in line 2 */}
+
+ {/* Line 1: Assignee / Creator */}
+
{task.user ? (
{task.user.name ? task.user.name.charAt(0) : task.user.email.charAt(0)}
) : (
)}
-
+
{task.user?.name || task.user?.email?.split('@')[0] || 'Livre'}
- {/* Timer button & display */}
-
+ {/* Line 2: Timer badge & Play/Stop button */}
+
{
e.stopPropagation()
onOpenHistory?.(task)
}}
title="Clique para ver o histórico de tempo"
- className={`flex items-center gap-1 px-2 py-1 rounded-md text-[11px] font-mono transition-colors cursor-pointer hover:opacity-85 ${
+ className={`flex items-center gap-1.5 px-2 py-1 rounded-md text-[11px] font-mono transition-colors cursor-pointer hover:opacity-85 ${
running
? 'bg-teal-500/15 text-teal-700 dark:bg-brand/20 dark:text-teal-300 font-semibold'
: 'bg-surface-sunken text-muted'
@@ -235,16 +235,22 @@ export const TaskCard: React.FC
= ({
onToggleTimer(task)
}}
title={running ? 'Parar cronômetro' : 'Iniciar cronômetro'}
- className={`p-1.5 rounded-lg transition-all duration-200 ${
+ className={`flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-semibold transition-all duration-200 shrink-0 ${
running
? 'bg-rose-500/20 text-rose-300 hover:bg-rose-500/30 ring-1 ring-rose-500/40'
: 'bg-teal-500/10 text-teal-700 hover:bg-teal-500/20 dark:bg-brand/15 dark:text-teal-300 dark:hover:bg-brand/25 ring-1 ring-teal-600/20 dark:ring-brand/30'
}`}
>
{running ? (
-
+ <>
+
+ Parar
+ >
) : (
-
+ <>
+
+ Iniciar
+ >
)}