From a0956ebe0f5c813c7ef66a671f4b101e836ab569 Mon Sep 17 00:00:00 2001
From: 0x464e <36742501+0x464e@users.noreply.github.com>
Date: Fri, 20 Mar 2026 18:44:49 +0200
Subject: [PATCH] Add missing cancel button & separators to dialog

---
 .../components/overlay/ShareTimestampDialog.tsx   | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/web/src/components/overlay/ShareTimestampDialog.tsx b/web/src/components/overlay/ShareTimestampDialog.tsx
index 80d713a95..4c13811e1 100644
--- a/web/src/components/overlay/ShareTimestampDialog.tsx
+++ b/web/src/components/overlay/ShareTimestampDialog.tsx
@@ -15,6 +15,7 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { SelectSeparator } from "@/components/ui/select";
 import { useFormattedTimestamp } from "@/hooks/use-date-utils";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { getUTCOffset } from "@/utils/dateUtil";
@@ -73,6 +74,7 @@ export default function ShareTimestampDialog({
         onShareTimestamp(timestamp);
         onOpenChange(false);
       }}
+      onCancel={() => onOpenChange(false)}
     />
   );
 
@@ -146,6 +148,8 @@ export function ShareTimestampContent({
         </div>
       </div>
 
+      {isDesktop && <SelectSeparator className="my-4 bg-secondary" />}
+
       <RadioGroup
         className="mt-4 flex flex-col gap-4"
         value={selectedOption}
@@ -197,18 +201,19 @@ export function ShareTimestampContent({
         </div>
       </RadioGroup>
 
+      {isDesktop && <SelectSeparator className="my-4 bg-secondary" />}
+
       <DialogFooter
         className={isDesktop ? "mt-4" : "mt-4 flex flex-col-reverse gap-4"}
       >
         {onCancel && (
-          <Button
-            className={isDesktop ? "p-2" : "w-full"}
-            variant="ghost"
-            size="sm"
+          <button
+            type="button"
+            className={`cursor-pointer p-2 text-center ${isDesktop ? "" : "w-full"}`}
             onClick={onCancel}
           >
             {t("button.cancel", { ns: "common" })}
-          </Button>
+          </button>
         )}
         <Button
           className={isDesktop ? "" : "w-full"}