From 1f328be1bdbbad577514395c991fd1ecfa3bd395 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 27 Sep 2024 07:52:31 -0500
Subject: [PATCH] UI fixes (#14010)

* Fix export time picker on iOS

* Fix dialog on iPad
---
 web/src/components/overlay/ExportDialog.tsx | 22 +++++++++++++--------
 web/src/components/ui/drawer.tsx            |  1 +
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/web/src/components/overlay/ExportDialog.tsx b/web/src/components/overlay/ExportDialog.tsx
index 8e865c923..c9018c579 100644
--- a/web/src/components/overlay/ExportDialog.tsx
+++ b/web/src/components/overlay/ExportDialog.tsx
@@ -22,7 +22,7 @@ import { FrigateConfig } from "@/types/frigateConfig";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import { TimezoneAwareCalendar } from "./ReviewActivityCalendar";
 import { SelectSeparator } from "../ui/select";
-import { isDesktop } from "react-device-detect";
+import { isDesktop, isIOS } from "react-device-detect";
 import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
 import SaveExportOverlay from "./SaveExportOverlay";
 import { getUTCOffset } from "@/utils/dateUtil";
@@ -435,15 +435,18 @@ function CustomTimeSelector({
             id="startTime"
             type="time"
             value={startClock}
-            step="1"
+            step={isIOS ? "60" : "1"}
             onChange={(e) => {
               const clock = e.target.value;
-              const [hour, minute, second] = clock.split(":");
+              const [hour, minute, second] = isIOS
+                ? [...clock.split(":"), "00"]
+                : clock.split(":");
+
               const start = new Date(startTime * 1000);
               start.setHours(
                 parseInt(hour),
                 parseInt(minute),
-                parseInt(second),
+                parseInt(second ?? 0),
                 0,
               );
               setRange({
@@ -497,15 +500,18 @@ function CustomTimeSelector({
             id="startTime"
             type="time"
             value={endClock}
-            step="1"
+            step={isIOS ? "60" : "1"}
             onChange={(e) => {
               const clock = e.target.value;
-              const [hour, minute, second] = clock.split(":");
-              const end = new Date(endTime * 1000);
+              const [hour, minute, second] = isIOS
+                ? [...clock.split(":"), "00"]
+                : clock.split(":");
+
+              const end = new Date(startTime * 1000);
               end.setHours(
                 parseInt(hour),
                 parseInt(minute),
-                parseInt(second),
+                parseInt(second ?? 0),
                 0,
               );
               setRange({
diff --git a/web/src/components/ui/drawer.tsx b/web/src/components/ui/drawer.tsx
index ea53a3970..25c4acded 100644
--- a/web/src/components/ui/drawer.tsx
+++ b/web/src/components/ui/drawer.tsx
@@ -46,6 +46,7 @@ const DrawerContent = React.forwardRef<
         "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
         className,
         isIOS && isPWA && "pb-5",
+        isIOS && !isPWA && "md:pb-5",
       )}
       {...props}
     >