From 16bbd1e4b88236ab57678311869e889afa4d2e4e Mon Sep 17 00:00:00 2001
From: Esdras Renan <monkeyesdras@gmail.com>
Date: Fri, 14 Nov 2025 11:17:51 -0300
Subject: [PATCH] ui: ajustar layout do prazo de reabertura abaixo da linha de
 acoes

---
 .../tickets/ticket-summary-header.tsx         | 100 +++++++++---------
 1 file changed, 50 insertions(+), 50 deletions(-)

diff --git a/src/components/tickets/ticket-summary-header.tsx b/src/components/tickets/ticket-summary-header.tsx
index 5edc9be..7cf9361 100644
--- a/src/components/tickets/ticket-summary-header.tsx
+++ b/src/components/tickets/ticket-summary-header.tsx
@@ -1096,17 +1096,17 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
 
   return (
     <div id="ticket-summary-header" className={cardClass}>
-      <div className="absolute right-6 top-6 flex items-center gap-3">
-        {status !== "RESOLVED" ? (
-          <Button
-            type="button"
-            className="inline-flex items-center gap-2 rounded-lg border border-sidebar-border bg-sidebar-accent px-3 py-1.5 text-sm font-semibold text-sidebar-accent-foreground transition-all duration-200 ease-out hover:-translate-y-0.5 hover:border-sidebar-ring hover:bg-sidebar-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--sidebar-ring)]/30 active:translate-y-0 active:border-sidebar-ring"
-            onClick={() => setCloseOpen(true)}
-          >
-            <CheckCircle2 className="size-4" /> Encerrar
-          </Button>
-        ) : canReopenTicket ? (
-          <div className="flex flex-col items-end gap-1">
+      <div className="absolute right-6 top-6 flex flex-col items-end gap-1">
+        <div className="flex items-center gap-3">
+          {status !== "RESOLVED" ? (
+            <Button
+              type="button"
+              className="inline-flex items-center gap-2 rounded-lg border border-sidebar-border bg-sidebar-accent px-3 py-1.5 text-sm font-semibold text-sidebar-accent-foreground transition-all duration-200 ease-out hover:-translate-y-0.5 hover:border-sidebar-ring hover:bg-sidebar-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--sidebar-ring)]/30 active:translate-y-0 active:border-sidebar-ring"
+              onClick={() => setCloseOpen(true)}
+            >
+              <CheckCircle2 className="size-4" /> Encerrar
+            </Button>
+          ) : canReopenTicket ? (
             <Button
               type="button"
               className="inline-flex items-center gap-2 rounded-lg border border-sidebar-border bg-white px-3 py-1.5 text-sm font-semibold text-neutral-800 transition-all duration-200 ease-out hover:-translate-y-0.5 hover:border-sidebar-ring hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--sidebar-ring)]/30 active:translate-y-0 active:border-sidebar-ring"
@@ -1116,51 +1116,51 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
               {isReopening ? <Spinner className="size-4 text-neutral-600" /> : <RotateCcw className="size-4" />}
               Reabrir
             </Button>
-            {reopenDeadlineLabel ? (
-              <p className="text-[11px] text-neutral-500">Prazo para reabrir: {reopenDeadlineLabel}</p>
-            ) : null}
-          </div>
-        ) : null}
-        {workSummary ? (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Badge
-                className="inline-flex h-9 cursor-help items-center gap-2 rounded-full border border-slate-200 bg-white px-3 text-sm font-semibold text-neutral-700 [&>svg]:size-5"
-              >
-                <IconClock className="size-5 text-neutral-700" /> {formattedTotalWorked}
-              </Badge>
-            </TooltipTrigger>
-            <TooltipContent className="rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-medium text-neutral-700 shadow-lg">
-              <div className="flex flex-col gap-1">
-                <span>Horas internas: {formatDuration(internalWorkedMs)}</span>
-                <span>Horas externas: {formatDuration(externalWorkedMs)}</span>
-              </div>
-            </TooltipContent>
-          </Tooltip>
-        ) : null}
-        {!editing ? (
+          ) : null}
+          {workSummary ? (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Badge
+                  className="inline-flex h-9 cursor-help items-center gap-2 rounded-full border border-slate-200 bg-white px-3 text-sm font-semibold text-neutral-700 [&>svg]:size-5"
+                >
+                  <IconClock className="size-5 text-neutral-700" /> {formattedTotalWorked}
+                </Badge>
+              </TooltipTrigger>
+              <TooltipContent className="rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-medium text-neutral-700 shadow-lg">
+                <div className="flex flex-col gap-1">
+                  <span>Horas internas: {formatDuration(internalWorkedMs)}</span>
+                  <span>Horas externas: {formatDuration(externalWorkedMs)}</span>
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          ) : null}
+          {!editing ? (
+            <Button
+              size="icon"
+              aria-label="Editar"
+              className="inline-flex items-center justify-center rounded-lg border border-slate-200 bg-white text-neutral-800 hover:bg-slate-50"
+              onClick={() => setEditing(true)}
+              title="Editar"
+            >
+              <IconPencil className="size-5" />
+            </Button>
+          ) : null}
           <Button
             size="icon"
-            aria-label="Editar"
+            variant="outline"
+            aria-label="Exportar PDF"
             className="inline-flex items-center justify-center rounded-lg border border-slate-200 bg-white text-neutral-800 hover:bg-slate-50"
-            onClick={() => setEditing(true)}
-            title="Editar"
+            onClick={handleExportPdf}
+            disabled={exportingPdf}
+            title="Exportar PDF"
           >
-            <IconPencil className="size-5" />
+            {exportingPdf ? <Spinner className="size-4 text-neutral-700" /> : <IconDownload className="size-5" />}
           </Button>
+          <DeleteTicketDialog ticketId={ticket.id as Id<"tickets">} />
+        </div>
+        {status === "RESOLVED" && canReopenTicket && reopenDeadlineLabel ? (
+          <p className="text-[11px] text-neutral-500">Prazo para reabrir: {reopenDeadlineLabel}</p>
         ) : null}
-        <Button
-          size="icon"
-          variant="outline"
-          aria-label="Exportar PDF"
-          className="inline-flex items-center justify-center rounded-lg border border-slate-200 bg-white text-neutral-800 hover:bg-slate-50"
-          onClick={handleExportPdf}
-          disabled={exportingPdf}
-          title="Exportar PDF"
-        >
-          {exportingPdf ? <Spinner className="size-4 text-neutral-700" /> : <IconDownload className="size-5" />}
-        </Button>
-        <DeleteTicketDialog ticketId={ticket.id as Id<"tickets">} />
       </div>
       <CloseTicketDialog
         open={closeOpen}