UI Fixes (#11602)

* Fix playback rate not showing

* Fix export image

* Formatting

* Formatting

web/src/components/card/ExportCard.tsx

@@ -177,7 +177,7 @@ export default function ExportCard({
             {exportedRecording.thumb_path.length > 0 ? (
               <img
                 className="absolute inset-0 aspect-video size-full rounded-lg object-contain md:rounded-2xl"
-                src={exportedRecording.thumb_path.replace("/media/frigate", "")}
+                src={`${baseUrl}${exportedRecording.thumb_path.replace("/media/frigate", "")}`}
                 onLoad={() => setLoading(false)}
               />
             ) : (

web/src/components/player/VideoControls.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import { isMobileOnly, isSafari } from "react-device-detect";
 import { LuPause, LuPlay } from "react-icons/lu";
 import {
@@ -90,6 +90,12 @@ export default function VideoControls({
   onUploadFrame,
   setFullscreen,
 }: VideoControlsProps) {
+  // layout
+
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  // controls
+
   const onReplay = useCallback(
     (e: React.MouseEvent<SVGElement>) => {
       e.stopPropagation();
@@ -183,6 +189,7 @@ export default function VideoControls({
             MIN_ITEMS_WRAP &&
           "min-w-[75%] flex-wrap",
       )}
+      ref={containerRef}
     >
       {video && features.volume && (
         <div className="flex cursor-pointer items-center justify-normal gap-2">
@@ -230,7 +237,9 @@ export default function VideoControls({
           }}
         >
           <DropdownMenuTrigger>{`${playbackRate}x`}</DropdownMenuTrigger>
-          <DropdownMenuContent>
+          <DropdownMenuContent
+            portalProps={{ container: containerRef.current }}
+          >
             <DropdownMenuRadioGroup
               onValueChange={(rate) => onSetPlaybackRate(parseFloat(rate))}
             >

web/src/components/ui/dropdown-menu.tsx

@@ -56,9 +56,11 @@ DropdownMenuSubContent.displayName =
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
+    portalProps?: DropdownMenuPrimitive.DropdownMenuPortalProps;
+  }
+>(({ className, portalProps, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal {...portalProps}>
     <DropdownMenuPrimitive.Content
       ref={ref}
       sideOffset={sideOffset}