From 188518e06c77dec461f07f0e16277bf88c9bcd7d Mon Sep 17 00:00:00 2001
From: Esdras Renan <monkeyesdras@gmail.com>
Date: Wed, 19 Nov 2025 11:17:07 -0300
Subject: [PATCH] Refresh device cards layout

---
 .../admin/devices/admin-devices-overview.tsx  | 83 ++++++++++---------
 1 file changed, 44 insertions(+), 39 deletions(-)

diff --git a/src/components/admin/devices/admin-devices-overview.tsx b/src/components/admin/devices/admin-devices-overview.tsx
index 4f87279..4a72ead 100644
--- a/src/components/admin/devices/admin-devices-overview.tsx
+++ b/src/components/admin/devices/admin-devices-overview.tsx
@@ -5743,42 +5743,53 @@ function DeviceCard({ device, companyName }: { device: DevicesQueryItem; company
           ) : null}
         </div>
         <CardHeader className="pb-2">
-          <CardTitle className="line-clamp-1 flex items-center gap-2 text-base font-semibold">
-            <DeviceIcon className="size-4 text-slate-500" /> {deviceLabel}
+          <CardTitle className="flex items-center gap-2 text-base font-semibold">
+            <DeviceIcon className="size-4 text-slate-500" />
+            <span className="line-clamp-1">{deviceLabel}</span>
           </CardTitle>
-          <div className="flex flex-wrap items-center gap-2 text-xs text-slate-500">
-            <span>{deviceTypeLabel}</span>
-            {device.devicePlatform ? (
-              <>
-                <span className="text-slate-300">•</span>
-                <span>{device.devicePlatform}</span>
-              </>
-            ) : null}
-            {device.authEmail ? (
-              <>
-                <span className="text-slate-300">•</span>
-                <span>{device.authEmail}</span>
-              </>
+          <div className="flex flex-col gap-1">
+            <div className="flex flex-wrap items-center gap-2 text-xs text-slate-500">
+              <span>{deviceTypeLabel}</span>
+              {device.devicePlatform ? (
+                <>
+                  <span className="text-slate-300">•</span>
+                  <span>{device.devicePlatform}</span>
+                </>
+              ) : null}
+              {device.authEmail ? (
+                <>
+                  <span className="text-slate-300">•</span>
+                  <span className="truncate max-w-[140px]" title={device.authEmail}>
+                    {device.authEmail}
+                  </span>
+                </>
+              ) : null}
+            </div>
+            {collaborator?.email ? (
+              <div className="flex flex-wrap items-center gap-2 text-xs text-slate-600">
+                <div className="flex flex-col rounded-lg border border-slate-200 bg-slate-50 px-3 py-1">
+                  <span className="text-[11px] uppercase text-slate-400">Usuário vinculado</span>
+                  <span className="text-sm font-medium text-slate-800 line-clamp-1" title={collaborator.name ?? collaborator.email}>
+                    {collaborator.name ?? "Usuário"}
+                  </span>
+                  <span className="text-[11px] text-slate-500 line-clamp-1" title={collaborator.email}>
+                    {collaborator.email}
+                  </span>
+                </div>
+                <button
+                  type="button"
+                  className="text-[11px] font-semibold text-slate-500 underline underline-offset-4 hover:text-slate-800"
+                  onClick={(event) => {
+                    event.preventDefault()
+                    event.stopPropagation()
+                    router.push("/admin/users")
+                  }}
+                >
+                  Gerenciar usuários
+                </button>
+              </div>
             ) : null}
           </div>
-          {collaborator?.email ? (
-            <div className="mt-2 flex flex-wrap items-center gap-2 text-[11px] text-slate-600">
-              <span className="rounded-full border border-slate-300 bg-slate-100 px-2 py-0.5">
-                Usuário vinculado: {collaborator.name ? `${collaborator.name} · ` : ""}{collaborator.email}
-              </span>
-              <button
-                type="button"
-                className="underline underline-offset-4 hover:text-slate-800"
-                onClick={(event) => {
-                  event.preventDefault()
-                  event.stopPropagation()
-                  router.push("/admin/users")
-                }}
-              >
-                Gerenciar usuários
-              </button>
-            </div>
-          ) : null}
           {!isActive ? (
             <Badge variant="outline" className="mt-2 w-fit border-rose-200 bg-rose-50 text-[10px] font-semibold uppercase tracking-wide text-rose-700">
               Desativado
@@ -5800,12 +5811,6 @@ function DeviceCard({ device, companyName }: { device: DevicesQueryItem; company
               </Badge>
             ) : null}
           </div>
-          {collaborator?.email ? (
-            <p className="text-[11px] text-muted-foreground">
-              {persona}: {collaborator.name ? `${collaborator.name} · ` : ""}
-              {collaborator.email}
-            </p>
-          ) : null}
           <div className="flex flex-wrap items-center gap-2">
             <Badge variant="outline" className="border-slate-300 bg-slate-100 text-xs font-medium text-slate-700">
               {deviceTypeLabel}