Review stream tweaks (#20656)

* add blue dot instead of blue outline

* fix layout for portrait cameras

* fix light mode

web/src/components/timeline/DetailStream.tsx

@@ -291,19 +291,29 @@ function ReviewGroup({
   return (
     <div
       data-review-id={id}
-      className={`cursor-pointer rounded-lg bg-secondary p-3 outline outline-[3px] -outline-offset-[2.8px] ${
+      className="cursor-pointer rounded-lg bg-secondary py-3"
-        isActive
-          ? "shadow-selected outline-selected"
-          : "outline-transparent duration-500"
-      }`}
     >
       <div
-        className="flex items-center justify-between"
+        className={cn(
+          "flex items-start",
+          open && "border-b border-secondary-highlight pb-4",
+        )}
         onClick={() => {
           onActivate?.();
           onSeek(start);
         }}
       >
+        <div className="ml-4 mr-2 mt-1.5 flex flex-row items-start">
+          <LuCircle
+            className={cn(
+              "size-3",
+              isActive
+                ? "fill-selected text-selected"
+                : "fill-muted duration-500 dark:fill-secondary-highlight dark:text-secondary-highlight",
+            )}
+          />
+        </div>
+        <div className="mr-3 flex w-full justify-between">
           <div className="ml-1 flex flex-col items-start gap-1.5">
             <div className="flex flex-row gap-3">
               <div className="text-sm font-medium">{displayTime}</div>
@@ -313,7 +323,7 @@ function ReviewGroup({
                     key={`${lbl}-${idx}`}
                     className="rounded-full bg-muted-foreground p-1"
                   >
-                  {getIconForLabel(lbl, "size-3 text-primary dark:text-white")}
+                    {getIconForLabel(lbl, "size-3 text-white")}
                   </div>
                 ))}
               </div>
@@ -343,7 +353,6 @@ function ReviewGroup({
               e.stopPropagation();
               setOpen((v) => !v);
             }}
-          aria-label={open ? "Collapse" : "Expand"}
             className="ml-2 inline-flex items-center justify-center rounded p-1 hover:bg-secondary/10"
           >
             {open ? (
@@ -353,9 +362,10 @@ function ReviewGroup({
             )}
           </div>
         </div>
+      </div>
 
       {open && (
-        <div className="mt-2 space-y-0.5">
+        <div className="space-y-0.5">
           {shouldFetchEvents && isValidating && !fetchedEvents ? (
             <ActivityIndicator />
           ) : (
@@ -385,10 +395,7 @@ function ReviewGroup({
                 >
                   <div className="ml-1.5 flex items-center gap-2 text-sm font-medium">
                     <div className="rounded-full bg-muted-foreground p-1">
-                      {getIconForLabel(
+                      {getIconForLabel(audioLabel, "size-3 text-white")}
-                        audioLabel,
-                        "size-3 text-primary dark:text-white",
-                      )}
                     </div>
                     <span>{getTranslatedLabel(audioLabel)}</span>
                   </div>
@@ -446,9 +453,9 @@ function EventList({
     <>
       <div
         className={cn(
-          "rounded-md bg-secondary p-2 outline outline-[3px] -outline-offset-[2.8px]",
+          "rounded-md bg-secondary p-2",
           event.id == selectedObjectId
-            ? "bg-secondary-highlight shadow-selected outline-selected"
+            ? "bg-secondary-highlight"
             : "outline-transparent duration-500",
           event.id != selectedObjectId &&
             (effectiveTime ?? 0) >= (event.start_time ?? 0) - 0.5 &&
@@ -476,10 +483,7 @@ function EventList({
                   : "bg-muted-foreground",
               )}
             >
-              {getIconForLabel(
+              {getIconForLabel(event.label, "size-3 text-white")}
-                event.label,
-                "size-3 text-primary dark:text-white",
-              )}
             </div>
             <div className="flex items-end gap-2">
               <span>{getTranslatedLabel(event.label)}</span>
@@ -593,7 +597,9 @@ function LifecycleItem({
       <div className="flex w-full flex-row justify-between">
         <Tooltip>
           <TooltipTrigger>
-            <span>{getLifecycleItemDescription(item)}</span>
+            <div className="flex items-start text-left">
+              {getLifecycleItemDescription(item)}
+            </div>
           </TooltipTrigger>
           <TooltipContent>
             <div className="mt-1 flex flex-wrap items-start gap-3 text-sm text-secondary-foreground">

web/src/views/recording/RecordingView.tsx

@@ -695,7 +695,7 @@ export function RecordingView({
               "flex flex-1 flex-wrap",
               isDesktop
                 ? timelineType === "detail"
-                  ? "w-full"
+                  ? "md:w-[40%] lg:w-[70%] xl:w-full"
                   : "w-[80%]"
                 : "",
             )}
@@ -703,9 +703,7 @@ export function RecordingView({
             <div
               className={cn(
                 "flex size-full items-center",
-                timelineType === "detail" && isDesktop
+                mainCameraAspect == "tall"
-                  ? "flex-col"
-                  : mainCameraAspect == "tall"
                   ? "flex-row justify-evenly"
                   : "flex-col justify-center gap-2",
               )}
@@ -975,7 +973,7 @@ function Timeline({
       className={cn(
         "relative",
         isDesktop
-          ? `${timelineType == "timeline" ? "w-[100px]" : timelineType == "detail" ? "w-[30%]" : "w-60"} no-scrollbar overflow-y-auto`
+          ? `${timelineType == "timeline" ? "w-[100px]" : timelineType == "detail" ? "w-[30%] min-w-[350px]" : "w-60"} no-scrollbar overflow-y-auto`
           : `overflow-hidden portrait:flex-grow ${timelineType == "timeline" ? "landscape:w-[100px]" : timelineType == "detail" && isDesktop ? "flex-1" : "landscape:w-[300px]"} `,
       )}
     >