Handle mobile landscape

This commit is contained in:
Nicolas Mowen 2024-08-02 06:56:45 -06:00
parent 612562c009
commit bc6bd0c577

View File

@ -17,6 +17,7 @@ import { cn } from "@/lib/utils";
import { DeleteClipType, Export } from "@/types/export"; import { DeleteClipType, Export } from "@/types/export";
import axios from "axios"; import axios from "axios";
import { useCallback, useEffect, useMemo, useState } from "react"; import { useCallback, useEffect, useMemo, useState } from "react";
import { isMobile } from "react-device-detect";
import { LuFolderX } from "react-icons/lu"; import { LuFolderX } from "react-icons/lu";
import { toast } from "sonner"; import { toast } from "sonner";
import useSWR from "swr"; import useSWR from "swr";
@ -131,14 +132,16 @@ function Exports() {
} }
}} }}
> >
<DialogContent className="max-w-[80%]"> <DialogContent
className={cn("max-w-[80%]", isMobile && "landscape:max-w-[60%]")}
>
<DialogTitle className="capitalize"> <DialogTitle className="capitalize">
{selected?.name?.replaceAll("_", " ")} {selected?.name?.replaceAll("_", " ")}
</DialogTitle> </DialogTitle>
<video <video
className={cn( className={cn(
"size-full rounded-lg md:rounded-2xl", "size-full rounded-lg md:rounded-2xl",
selectedAspect < 1.5 ? "aspect-video h-full" : "", selectedAspect < 1.5 && "aspect-video h-full",
)} )}
playsInline playsInline
preload="auto" preload="auto"