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

@@ -72,12 +72,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import {
+import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
-  Drawer,
-  DrawerContent,
-  DrawerTitle,
-  DrawerTrigger,
-} from "@/components/ui/drawer";
 import { LuInfo } from "react-icons/lu";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { FaPencilAlt } from "react-icons/fa";
@@ -131,7 +126,7 @@ function TabsWithActions({
   return (
     <div className="flex items-center justify-between gap-1">
       <ScrollArea className="flex-1 whitespace-nowrap">
-        <div className="mb-2 flex flex-row">
+        <div className="mb-2 flex flex-row md:mb-0">
           <ToggleGroup
             className="*:rounded-md *:px-3 *:py-4"
             type="single"
@@ -229,7 +224,6 @@ function AnnotationSettings({
   const Overlay = isDesktop ? Popover : Drawer;
   const Trigger = isDesktop ? PopoverTrigger : DrawerTrigger;
   const Content = isDesktop ? PopoverContent : DrawerContent;
-  const Title = isDesktop ? "div" : DrawerTitle;
   const contentProps = isDesktop
     ? { align: "end" as const, container: container ?? undefined }
     : {};
@@ -254,9 +248,7 @@ function AnnotationSettings({
             <PiSlidersHorizontalBold className="size-5" />
           </Button>
         </Trigger>
-        <Title className="sr-only">
+
-          {t("trackingDetails.adjustAnnotationSettings")}
-        </Title>
         <Content
           className={
             isDesktop
@@ -348,7 +340,7 @@ function DialogContentComponent({
       }
     />
   ) : (
-    <div className={cn(!isDesktop ? "mb-4 w-full md:max-w-lg" : "size-full")}>
+    <div className={cn(!isDesktop ? "mb-4 w-full" : "size-full")}>
       <img
         className="w-full select-none rounded-lg object-contain transition-opacity"
         style={
@@ -594,11 +586,6 @@ export default function SearchDetailDialog({
               "max-h-[95dvh] sm:max-w-xl md:max-w-4xl lg:max-w-[70%]",
             isMobile && "flex h-full flex-col px-4",
           )}
-          onEscapeKeyDown={(event) => {
-            if (isPopoverOpen) {
-              event.preventDefault();
-            }
-          }}
           onInteractOutside={(e) => {
             if (isPopoverOpen) {
               e.preventDefault();

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

@@ -454,7 +454,7 @@ export function TrackingDetails({
         )}
       >
         {isDesktop && tabs && (
-          <div className="mb-2 flex items-center justify-between">
+          <div className="mb-4 flex items-center justify-between">
             <div className="flex-1">{tabs}</div>
           </div>
         )}

web/src/components/timeline/DetailStream.tsx

@@ -391,8 +391,8 @@ function ReviewGroup({
             )}
           />
         </div>
-        <div className="mr-3 grid w-full grid-cols-[1fr_auto] gap-2">
+        <div className="mr-3 flex w-full justify-between">
-          <div className="ml-1 flex min-w-0 flex-col gap-1.5">
+          <div className="ml-1 mr-6 flex min-w-0 flex-col items-start gap-1.5">
             <div className="flex flex-row gap-3">
               <div className="text-sm font-medium">{displayTime}</div>
               <div className="relative flex items-center gap-2 text-white">
@@ -408,7 +408,7 @@ function ReviewGroup({
             </div>
             <div className="flex flex-col gap-0.5">
               {review.data.metadata?.title && (
-                <div className="mb-1 flex min-w-0 items-center gap-1 text-sm text-primary-variant">
+                <div className="mb-1 flex items-center gap-1 text-sm text-primary-variant">
                   <MdAutoAwesome className="size-3 shrink-0" />
                   <span className="truncate">{review.data.metadata.title}</span>
                 </div>
@@ -432,7 +432,7 @@ function ReviewGroup({
               e.stopPropagation();
               setOpen((v) => !v);
             }}
-            className="inline-flex items-center justify-center self-center rounded p-1 hover:bg-secondary/10"
+            className="ml-2 inline-flex items-center justify-center rounded p-1 hover:bg-secondary/10"
           >
             {open ? (
               <LuChevronDown className="size-4 text-primary-variant" />

web/src/components/timeline/ReviewTimeline.tsx

@@ -515,7 +515,7 @@ export function ReviewTimeline({
         <div
           className={`absolute z-30 flex gap-2 ${
             isMobile
-              ? "bottom-4 right-1 flex-col-reverse gap-3"
+              ? "bottom-4 right-1 flex-col gap-3"
               : "bottom-2 left-1/2 -translate-x-1/2"
           }`}
         >