UI tweaks (#14088)

* fix squashed alert thumbnails in filmstrip

* add genai debug logs

* consistent themed image loading indicator background color

* improve image loading skeleton in object lifecycle pane

* less rounding when screen is smaller

* use browser back button to dismiss review pane

* initial state

web/src/components/overlay/detail/ObjectLifecycle.tsx

@@ -77,6 +77,17 @@ export default function ObjectLifecycle({
   const [showControls, setShowControls] = useState(false);
   const [showZones, setShowZones] = useState(true);
 
+  const aspectRatio = useMemo(() => {
+    if (!config) {
+      return 16 / 9;
+    }
+
+    return (
+      config.cameras[event.camera].detect.width /
+      config.cameras[event.camera].detect.height
+    );
+  }, [config, event]);
+
   const getZoneColor = useCallback(
     (zoneName: string) => {
       const zoneColor =
@@ -240,7 +251,15 @@ export default function ObjectLifecycle({
         </div>
       )}
 
-      <div className="relative flex flex-row justify-center">
+      <div
+        className={cn(
+          "relative mx-auto flex max-h-[50dvh] flex-row justify-center",
+          !imgLoaded && aspectRatio < 16 / 9 && "h-full",
+        )}
+        style={{
+          aspectRatio: !imgLoaded ? aspectRatio : undefined,
+        }}
+      >
         <ImageLoadingIndicator
           className="absolute inset-0"
           imgLoaded={imgLoaded}
@@ -263,7 +282,7 @@ export default function ObjectLifecycle({
             key={event.id}
             ref={imgRef}
             className={cn(
-              "max-h-[50dvh] max-w-full select-none rounded-lg object-contain transition-opacity",
+              "max-h-[50dvh] max-w-full select-none rounded-lg object-contain",
             )}
             loading={isSafari ? "eager" : "lazy"}
             style={

web/src/components/overlay/detail/ReviewDetailDialog.tsx

@@ -37,6 +37,7 @@ import {
   MobilePageHeader,
   MobilePageTitle,
 } from "@/components/mobile/MobilePage";
+import { useOverlayState } from "@/hooks/use-overlay-state";
 
 type ReviewDetailDialogProps = {
   review?: ReviewSegment;
@@ -83,10 +84,15 @@ export default function ReviewDetailDialog({
 
   // dialog and mobile page
 
-  const [isOpen, setIsOpen] = useState(review != undefined);
+  const [isOpen, setIsOpen] = useOverlayState(
+    "reviewPane",
+    review != undefined,
+  );
 
   useEffect(() => {
     setIsOpen(review != undefined);
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [review]);
 
   const Overlay = isDesktop ? Sheet : MobilePage;
@@ -102,7 +108,7 @@ export default function ReviewDetailDialog({
   return (
     <>
       <Overlay
-        open={isOpen}
+        open={isOpen ?? false}
         onOpenChange={(open) => {
           if (!open) {
             setReview(undefined);