Dialog with Scrollbar on the Window Instead of the Dialog

[info-teofilm]

I have been trying to build a dialog like Netflix's preview modal where the scrollbar is on the window, not the dialog. I have tried any combination I or ChatGPT or Copilot could suggest, and none have worked. I would be very grateful if anyone could point me in the right direction.

For reference, the code that I have deployed, which looks really bad on WIndows (because the scrollbar appears all the time), is as follows:

    <Dialog open={open} onOpenChange={(open) => !open && onClose()}>
      <DialogContent
        className="my-10 max-h-screen overflow-y-scroll p-0 sm:max-w-6xl"
        showCloseButton={false}
      >
        <DesktopFilmDetails film={film} />
        <DialogPrimitive.Close
          data-slot="dialog-close"
          className="bg-primary absolute right-4 top-4 flex size-8 cursor-pointer items-center justify-center rounded-full outline-none focus-visible:outline-none focus-visible:ring-0"
        >
          <XIcon size={28} color="white" strokeWidth={1} />
          <span className="sr-only">Close</span>
        </DialogPrimitive.Close>
      </DialogContent>
    </Dialog>