mudança no badge de vencimento

src/components/tasks/due-badge.tsx

@@ -27,9 +27,15 @@ export function DueBadge({
         : CalendarClock;
 
   return (
-    <Badge className={cn("gap-1", styles[info.state])}>
-      <Icon className="h-3 w-3" />
-      {info.label}
+    <Badge
+      title={info.label}
+      className={cn(
+        "gap-0.5 px-1.5 py-0 text-[10px] font-medium leading-4",
+        styles[info.state]
+      )}
+    >
+      <Icon className="h-2.5 w-2.5" />
+      {info.shortLabel}
     </Badge>
   );
 }

src/components/tasks/task-table.tsx

@@ -165,7 +165,7 @@ export function TaskTable({
               <Fragment key={task.Id}>
                 <TableRow
                   className={cn(
-                    "group border-b transition-colors hover:bg-muted/30",
+                    "group border-b transition-colors hover:bg-muted/30 [&>td]:align-top",
                     isOpen ? "border-0 bg-muted/20" : "last:border-0"
                   )}
                 >
@@ -254,21 +254,21 @@ export function TaskTable({
                       <span className="text-sm text-muted-foreground">—</span>
                     )}
                   </TableCell>
-                  <TableCell className="py-3">
-                    <span className="whitespace-nowrap text-sm text-muted-foreground">
+                  <TableCell className="py-3 align-top">
+                    <span className="block whitespace-nowrap text-sm leading-6 text-muted-foreground">
                       {formatDateShort(task.StartDate)}
                     </span>
                   </TableCell>
-                  <TableCell className="py-3">
-                    <div className="flex items-center gap-2">
-                      <span className="whitespace-nowrap text-sm text-muted-foreground">
+                  <TableCell className="py-3 align-top">
+                    <div className="flex flex-col items-start gap-0.5">
+                      <span className="block whitespace-nowrap text-sm leading-6 text-muted-foreground">
                         {formatDateShort(task.DueDate)}
                       </span>
                       <DueBadge dueDate={task.DueDate} status={task.Status} />
                     </div>
                   </TableCell>
-                  <TableCell className="py-3">
-                    <span className="whitespace-nowrap text-sm text-muted-foreground">
+                  <TableCell className="py-3 align-top">
+                    <span className="block whitespace-nowrap text-sm leading-6 text-muted-foreground">
                       {task.CompletedDate ? (
                         <span className="text-green-600 dark:text-green-400">
                           {formatDateShort(task.CompletedDate)}
@@ -383,7 +383,7 @@ export function TaskTable({
                                   Sem responsável
                                 </span>
                               )}
-                              <div className="flex items-center gap-1.5">
+                              <div className="flex flex-col items-start gap-0.5">
                                 <span className="whitespace-nowrap text-xs text-muted-foreground">
                                   {sub.CompletedDate
                                     ? `✓ ${formatDateShort(sub.CompletedDate)}`

src/lib/dates.ts

@@ -35,7 +35,10 @@ export type DueState = "overdue" | "today" | "soon" | "ok";
 
 export interface DueInfo {
   state: DueState;
+  /** Texto completo (usado em tooltip). */
   label: string;
+  /** Texto curto para o badge compacto ("Vencida", "Hoje", "2 dias"). */
+  shortLabel: string;
 }
 
 /** Classifica o vencimento de uma tarefa para exibir alertas. */
@@ -51,14 +54,17 @@ export function getDueInfo(
     return {
       state: "overdue",
       label: days === -1 ? "Venceu ontem" : `Vencida há ${-days} dias`,
+      shortLabel: "Vencida",
     };
   }
-  if (days === 0) return { state: "today", label: "Vence hoje" };
+  if (days === 0)
+    return { state: "today", label: "Vence hoje", shortLabel: "Hoje" };
   if (days <= 3) {
     return {
       state: "soon",
       label: days === 1 ? "Vence amanhã" : `Vence em ${days} dias`,
+      shortLabel: days === 1 ? "Amanhã" : `${days} dias`,
     };
   }
-  return { state: "ok", label: `Vence em ${days} dias` };
+  return { state: "ok", label: `Vence em ${days} dias`, shortLabel: `${days} dias` };
 }