add draft declaration

apps/edr-freight-web/backoffice/src/components/trainScheduling/CheckpointTimeModal.tsx

@@ -1,5 +1,6 @@
 import { Button, Group, Modal, Stack, Text, Textarea } from "@mantine/core";
 import { DateTimePicker } from "@mantine/dates";
+import { useMediaQuery } from "@mantine/hooks";
 import { useEffect, useState } from "react";
 
 /**
@@ -34,6 +35,7 @@ export function CheckpointTimeModal({
   loading: boolean;
   onSubmit: (values: { occurredAt: string; note: string }) => void;
 }) {
+  const isSmallScreen = useMediaQuery("(max-width: 48em)");
   const [at, setAt] = useState<Date | null>(null);
   const [note, setNote] = useState("");
   useEffect(() => {
@@ -47,6 +49,7 @@ export function CheckpointTimeModal({
       opened={opened}
       onClose={onClose}
       centered
+      fullScreen={isSmallScreen}
       radius="lg"
       title={
         <Group gap={8}>
@@ -67,6 +70,8 @@ export function CheckpointTimeModal({
           value={at}
           onChange={(v) => setAt(v ? new Date(v) : null)}
           maxDate={new Date()}
+          dropdownType={isSmallScreen ? "modal" : "popover"}
+          popoverProps={{ withinPortal: true }}
           valueFormat="DD MMM YYYY HH:mm"
           clearable={false}
           radius="md"