From d56bb3e7b3b941d5629c0eafe63651ca13bd08da Mon Sep 17 00:00:00 2001
From: esdrasrenan <esdrasrenan@users.noreply.github.com>
Date: Sun, 5 Oct 2025 00:15:30 -0300
Subject: [PATCH] style: align active session badge with timer

---
 .../components/tickets/ticket-summary-header.tsx | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/web/src/components/tickets/ticket-summary-header.tsx b/web/src/components/tickets/ticket-summary-header.tsx
index 199eb4f..37f4389 100644
--- a/web/src/components/tickets/ticket-summary-header.tsx
+++ b/web/src/components/tickets/ticket-summary-header.tsx
@@ -3,7 +3,7 @@
 import { useEffect, useMemo, useState } from "react"
 import { format, formatDistanceToNow } from "date-fns"
 import { ptBR } from "date-fns/locale"
-import { IconPlayerPause, IconPlayerPlay } from "@tabler/icons-react"
+import { IconClock, IconPlayerPause, IconPlayerPlay } from "@tabler/icons-react"
 import { useMutation, useQuery } from "convex/react"
 import { toast } from "sonner"
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -199,6 +199,11 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
   return (
     <div className={cardClass}>
       <div className="absolute right-6 top-6 flex items-center gap-3">
+        {isPlaying ? (
+          <Badge className="inline-flex h-9 items-center gap-2 rounded-full border border-black bg-black px-3 text-sm font-semibold text-white">
+            <IconClock className="size-4" /> Sessão atual: {formattedCurrentSession}
+          </Badge>
+        ) : null}
         {workSummary ? (
           <Badge className="inline-flex h-9 items-center gap-2 rounded-full border border-slate-200 bg-white px-3 text-sm font-semibold text-neutral-700">
             Tempo total: {formattedTotalWorked}
@@ -256,15 +261,6 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
               )}
             </Button>
           </div>
-          {workSummary ? (
-            <div className="flex flex-wrap items-center gap-2">
-              {isPlaying ? (
-                <Badge className="inline-flex items-center gap-1 rounded-full border border-black bg-black px-3 py-1 text-xs font-semibold text-white">
-                  Sessão atual: {formattedCurrentSession}
-                </Badge>
-              ) : null}
-            </div>
-          ) : null}
           {editing ? (
             <div className="space-y-2">
               <Input