From 8a718421accc5ff060f7bb1cca33224a589da7c3 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 1 Jan 2026 21:44:38 -0700
Subject: [PATCH] Fix ability to specify if card is using heading

---
 web/src/components/card/EmptyCard.tsx | 12 +++++++++++-
 web/src/views/events/EventView.tsx    |  3 ++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/web/src/components/card/EmptyCard.tsx b/web/src/components/card/EmptyCard.tsx
index 8d6b67a68..00b22d197 100644
--- a/web/src/components/card/EmptyCard.tsx
+++ b/web/src/components/card/EmptyCard.tsx
@@ -8,6 +8,7 @@ type EmptyCardProps = {
   className?: string;
   icon: React.ReactNode;
   title: string;
+  titleHeading?: boolean;
   description?: string;
   buttonText?: string;
   link?: string;
@@ -16,14 +17,23 @@ export function EmptyCard({
   className,
   icon,
   title,
+  titleHeading = true,
   description,
   buttonText,
   link,
 }: EmptyCardProps) {
+  let TitleComponent;
+
+  if (titleHeading) {
+    TitleComponent = <Heading as="h4">{title}</Heading>;
+  } else {
+    TitleComponent = <div>{title}</div>;
+  }
+
   return (
     <div className={cn("flex flex-col items-center gap-2", className)}>
       {icon}
-      <Heading as="h4">{title}</Heading>
+      {TitleComponent}
       {description && (
         <div className="mb-3 text-secondary-foreground">{description}</div>
       )}
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index 9e015dfe4..70067ff5c 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -762,8 +762,9 @@ function DetectionReview({
 
         {!loading && currentItems?.length === 0 && (
           <EmptyCard
-            className="y-translate-1/2 absolute left-[50%] top-[50%] -translate-x-1/2"
+            className="absolute left-[50%] top-[50%] -translate-x-1/2 -translate-y-1/2 items-center text-center"
             title={emptyCardData.title}
+            titleHeading={false}
             description={emptyCardData.description}
             icon={<LuFolderCheck className="size-16" />}
           />