From c1829c346092ec339bfb317cd9e0068dbe8aac92 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 27 Mar 2025 15:54:24 -0600
Subject: [PATCH] layout improvements

---
 web/src/pages/FaceLibrary.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/web/src/pages/FaceLibrary.tsx b/web/src/pages/FaceLibrary.tsx
index a3c3a7bf4..b515932ce 100644
--- a/web/src/pages/FaceLibrary.tsx
+++ b/web/src/pages/FaceLibrary.tsx
@@ -494,13 +494,14 @@ function TrainingGrid({
           }
 
           return (
-            <div className="flex flex-col gap-2 rounded-lg bg-card p-4">
+            <div className="flex flex-col gap-2 rounded-lg bg-card p-2">
               <div className="capitalize">
-                {event.label} ({Math.round(event.data.top_score * 100)}%){" "}
-                {event.sub_label &&
-                  `${event.sub_label} (${Math.round((event.data.sub_label_score || 0) * 100)}%)`}
+                {event.label}:
+                {event.sub_label
+                  ? ` ${event.sub_label} (${Math.round((event.data.sub_label_score || 0) * 100)}%)`
+                  : " Unknown"}
               </div>
-              <div className="flex flex-row">
+              <div className="flex flex-row flex-wrap gap-2">
                 {group.map((data: RecognizedFaceData) => (
                   <FaceAttempt
                     key={data.timestamp}
@@ -623,7 +624,7 @@ function FaceAttempt({
           : "outline-transparent duration-500",
       )}
     >
-      <div className="relative w-full overflow-hidden rounded-t-lg border border-t-0 *:text-card-foreground">
+      <div className="relative w-full overflow-hidden rounded-lg border border-t-0 *:text-card-foreground">
         <img
           ref={imgRef}
           className="size-44"
@@ -634,7 +635,7 @@ function FaceAttempt({
           <TimeAgo className="text-white" time={data.timestamp * 1000} dense />
         </div>
       </div>
-      <div className="rounded-b-lg bg-card p-2">
+      <div className="p-2">
         <div className="flex w-full flex-row items-center justify-between gap-2">
           <div className="flex flex-col items-start text-xs text-primary-variant">
             <div className="capitalize">{data.name}</div>