Fix playback rate not showing

web/src/components/player/VideoControls.tsx

@@ -1,9 +1,10 @@
-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 {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuPortal,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuTrigger,
@@ -90,6 +91,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 +190,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 +238,7 @@ 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}