Use bottom sheet for export on mobile

web/src/components/filter/ReviewFilterGroup.tsx

@@ -108,7 +108,7 @@ export default function ReviewFilterGroup({
   );
 
   return (
-    <div className="flex justify-center">
+    <div className="flex justify-center gap-2">
       {filters.includes("cameras") && (
         <CamerasFilterButton
           allCameras={filterValues.cameras}
@@ -171,8 +171,12 @@ function CamerasFilterButton({
   );
 
   const trigger = (
-    <Button size="sm" className="mx-1 capitalize" variant="secondary">
+    <Button
-      <FaVideo className="md:mr-[10px] text-muted-foreground" />
+      className="flex items-center gap-2 capitalize"
+      variant="secondary"
+      size="sm"
+    >
+      <FaVideo className="text-muted-foreground" />
       <div className="hidden md:block">
         {selectedCameras == undefined
           ? "All Cameras"
@@ -319,8 +323,8 @@ function CalendarFilterButton({
   );
 
   const trigger = (
-    <Button size="sm" className="mx-1" variant="secondary">
+    <Button size="sm" className="flex items-center gap-2" variant="secondary">
-      <FaCalendarAlt className="md:mr-[10px] text-muted-foreground" />
+      <FaCalendarAlt className="text-muted-foreground" />
       <div className="hidden md:block">
         {day == undefined ? "Last 24 Hours" : selectedDate}
       </div>
@@ -385,8 +389,8 @@ function GeneralFilterButton({
   );
 
   const trigger = (
-    <Button size="sm" className="ml-1" variant="secondary">
+    <Button size="sm" className="flex items-center gap-2" variant="secondary">
-      <FaFilter className="md:mr-[10px] text-muted-foreground" />
+      <FaFilter className="text-muted-foreground" />
       <div className="hidden md:block">Filter</div>
     </Button>
   );

web/src/components/overlay/ExportDialog.tsx

@@ -23,6 +23,8 @@ import { FrigateConfig } from "@/types/frigateConfig";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import ReviewActivityCalendar from "./ReviewActivityCalendar";
 import { SelectSeparator } from "../ui/select";
+import { isDesktop } from "react-device-detect";
+import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
 
 const EXPORT_OPTIONS = [
   "1",
@@ -129,8 +131,12 @@ export default function ExportDialog({
       });
   }, [camera, name, range, setRange]);
 
+  const Overlay = isDesktop ? Dialog : Drawer;
+  const Trigger = isDesktop ? DialogTrigger : DrawerTrigger;
+  const Content = isDesktop ? DialogContent : DrawerContent;
+
   return (
-    <Dialog
+    <Overlay
       open={mode == "select"}
       onOpenChange={(open) => {
         if (!open) {
@@ -138,7 +144,7 @@ export default function ExportDialog({
         }
       }}
     >
-      <DialogTrigger asChild>
+      <Trigger asChild>
         <Button
           className="flex items-center gap-2"
           variant="secondary"
@@ -153,16 +159,22 @@ export default function ExportDialog({
           }}
         >
           <FaArrowDown className="p-1 fill-secondary bg-muted-foreground rounded-md" />
-          {mode != "timeline" ? "Export" : "Save"}
+          {isDesktop ? (mode != "timeline" ? "Export" : "Save") : null}
         </Button>
-      </DialogTrigger>
+      </Trigger>
-      <DialogContent className="sm:rounded-2xl">
+      <Content
+        className={isDesktop ? "sm:rounded-2xl" : "px-4 pb-4 mx-4 rounded-2xl"}
+      >
+        {isDesktop && (
+          <>
             <DialogHeader>
               <DialogTitle>Export</DialogTitle>
             </DialogHeader>
             <SelectSeparator className="bg-secondary" />
+          </>
+        )}
         <RadioGroup
-          className="flex flex-col gap-3"
+          className={`flex flex-col gap-3 ${isDesktop ? "" : "mt-4"}`}
           onValueChange={(value) => onSelectTime(value as ExportOption)}
         >
           {EXPORT_OPTIONS.map((opt) => {
@@ -196,14 +208,16 @@ export default function ExportDialog({
           />
         )}
         <Input
-          className="mt-2"
+          className="mt-3"
           type="search"
           placeholder="Name the Export"
           value={name}
           onChange={(e) => setName(e.target.value)}
         />
-        <SelectSeparator className="bg-secondary" />
+        {isDesktop && <SelectSeparator className="bg-secondary" />}
-        <DialogFooter>
+        <DialogFooter
+          className={isDesktop ? "" : "mt-3 flex flex-col-reverse gap-4"}
+        >
           <DialogClose onClick={() => setMode("none")}>Cancel</DialogClose>
           <Button
             variant="select"
@@ -221,8 +235,8 @@ export default function ExportDialog({
             {selectedOption == "timeline" ? "Select" : "Export"}
           </Button>
         </DialogFooter>
-      </DialogContent>
+      </Content>
-    </Dialog>
+    </Overlay>
   );
 }
 
@@ -276,7 +290,9 @@ function CustomTimeSelector({
   const [endOpen, setEndOpen] = useState(false);
 
   return (
-    <div className="mx-8 px-2 flex items-center gap-2 bg-secondary rounded-lg">
+    <div
+      className={`flex items-center bg-secondary rounded-lg ${isDesktop ? "mx-8 px-2 gap-2" : "pl-2 mt-3"}`}
+    >
       <FaCalendarAlt />
       <Popover
         open={startOpen}
@@ -288,7 +304,9 @@ function CustomTimeSelector({
       >
         <PopoverTrigger asChild>
           <Button
+            className={isDesktop ? "" : "text-xs"}
             variant={startOpen ? "select" : "secondary"}
+            size="sm"
             onClick={() => {
               setStartOpen(true);
               setEndOpen(false);
@@ -347,7 +365,9 @@ function CustomTimeSelector({
       >
         <PopoverTrigger asChild>
           <Button
+            className={isDesktop ? "" : "text-xs"}
             variant={endOpen ? "select" : "secondary"}
+            size="sm"
             onClick={() => {
               setEndOpen(true);
               setStartOpen(false);