From f60b981ab8fedb1be42a1ae4bcbd4f587fcfe483 Mon Sep 17 00:00:00 2001
From: Weitheng Haw <wei.thenghaw@disneystreaming.com>
Date: Tue, 4 Feb 2025 02:26:39 +0000
Subject: [PATCH] small fix

---
 .../overlay/dialog/LPRDetailDialog.tsx        | 19 ++++++++++++++++++-
 web/src/pages/LPRDebug.tsx                    | 12 +++++++-----
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/web/src/components/overlay/dialog/LPRDetailDialog.tsx b/web/src/components/overlay/dialog/LPRDetailDialog.tsx
index 2f26f5cec..da1390f71 100644
--- a/web/src/components/overlay/dialog/LPRDetailDialog.tsx
+++ b/web/src/components/overlay/dialog/LPRDetailDialog.tsx
@@ -79,7 +79,24 @@ export default function LPRDetailDialog({
   }, [config, event]);
 
   if (!event) {
-    return null;
+    return (
+      <Overlay open={open} onOpenChange={setOpen}>
+        <Content
+          className={cn(
+            "scrollbar-container overflow-y-auto",
+            isDesktop &&
+              "max-h-[95dvh] sm:max-w-xl md:max-w-4xl lg:max-w-4xl xl:max-w-7xl",
+            isMobile && "px-4",
+          )}
+        >
+          <Header>
+            <Title>License Plate Image</Title>
+            <Description className="sr-only">License plate image details</Description>
+          </Header>
+          <PlateTab lprImage={lprImage} />
+        </Content>
+      </Overlay>
+    );
   }
 
   // content
diff --git a/web/src/pages/LPRDebug.tsx b/web/src/pages/LPRDebug.tsx
index a582b8239..de97b850d 100644
--- a/web/src/pages/LPRDebug.tsx
+++ b/web/src/pages/LPRDebug.tsx
@@ -214,16 +214,18 @@ function LPRAttempt({ attempt, config, onRefresh }: LPRAttemptProps) {
           className="w-full overflow-hidden rounded-t-lg border border-t-0 *:text-card-foreground cursor-pointer"
           onClick={() => setShowDialog(true)}
         >
-          <img 
-            className="h-40 w-full" 
-            src={`${baseUrl}clips/lpr/${attempt}`} 
-          />
+          <div className="aspect-[2/1] flex items-center justify-center bg-black">
+            <img 
+              className="h-40 max-w-none" 
+              src={`${baseUrl}clips/lpr/${attempt}`} 
+            />
+          </div>
         </div>
         <div className="flex w-full grow items-center justify-between rounded-b-lg border border-t-0 bg-card p-3 text-card-foreground">
           <div className="flex flex-col items-start text-xs text-primary-variant">
             <div className="capitalize">{data.plate}</div>
             <div className="text-success">
-              {Number.parseFloat(data.score) * 100}%
+              {data.score === "0" || !data.score ? "No score" : `${data.score}%`}
             </div>
             {event && (
               <div className="text-xs text-muted-foreground">