Add ability to filter search by time range (#13946)

* Add ability to filter by time range

* Cleanup

* Handle input with tags

* fix input for time_range filter

* fix before and after filters

* clean up

* Ensure the default value works as expected

* Handle time range in am/pm based on browser

* Fix arrow

* Fix text

* Handle midnight case

* fix width

* Fix bg

* Fix bg

* Fix mobile spacing

* y spacing

* remove left padding

---------

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

web/src/components/overlay/dialog/PlatformAwareDialog.tsx

@@ -0,0 +1,44 @@
+import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { isMobile } from "react-device-detect";
+
+type PlatformAwareDialogProps = {
+  trigger: JSX.Element;
+  content: JSX.Element;
+  triggerClassName?: string;
+  contentClassName?: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+export default function PlatformAwareDialog({
+  trigger,
+  content,
+  triggerClassName = "",
+  contentClassName = "",
+  open,
+  onOpenChange,
+}: PlatformAwareDialogProps) {
+  if (isMobile) {
+    return (
+      <Drawer open={open} onOpenChange={onOpenChange}>
+        <DrawerTrigger asChild>{trigger}</DrawerTrigger>
+        <DrawerContent className="max-h-[75dvh] overflow-hidden p-4">
+          {content}
+        </DrawerContent>
+      </Drawer>
+    );
+  }
+
+  return (
+    <Popover open={open} onOpenChange={onOpenChange}>
+      <PopoverTrigger asChild className={triggerClassName}>
+        {trigger}
+      </PopoverTrigger>
+      <PopoverContent className={contentClassName}>{content}</PopoverContent>
+    </Popover>
+  );
+}