Openstatus
www.openstatus.dev
fix: mobile sheet date picker (#1473)
authored by
Maximilian Kaske
and committed by
GitHub
23ad67e8
3eee0dc7
+10
-4
+4
-2
apps/dashboard/src/components/forms/maintenance/form.tsx
+4
-2
apps/dashboard/src/components/forms/maintenance/form.tsx
···
33
33
import { TabsList, TabsTrigger } from "@/components/ui/tabs";
34
34
import { Tabs } from "@/components/ui/tabs";
35
35
import { Textarea } from "@/components/ui/textarea";
36
+
import { useIsMobile } from "@/hooks/use-mobile";
36
37
import { cn } from "@/lib/utils";
37
38
import { zodResolver } from "@hookform/resolvers/zod";
38
39
import { isTRPCClientError } from "@trpc/client";
···
69
70
monitors: { id: number; name: string; url: string }[];
70
71
onSubmit: (values: FormValues) => Promise<void>;
71
72
}) {
73
+
const mobile = useIsMobile();
72
74
const form = useForm<FormValues>({
73
75
resolver: zodResolver(schema),
74
76
defaultValues: defaultValues ?? {
···
166
168
<PopoverContent
167
169
className="pointer-events-auto w-auto p-0"
168
170
align="start"
169
-
side="left"
171
+
side={mobile ? "bottom" : "left"}
170
172
>
171
173
<Calendar
172
174
mode="single"
···
270
272
<PopoverContent
271
273
className="pointer-events-auto w-auto p-0"
272
274
align="start"
273
-
side="left"
275
+
side={mobile ? "bottom" : "left"}
274
276
>
275
277
<Calendar
276
278
mode="single"
+3
-1
apps/dashboard/src/components/forms/status-report-update/form.tsx
+3
-1
apps/dashboard/src/components/forms/status-report-update/form.tsx
···
33
33
import { Tabs } from "@/components/ui/tabs";
34
34
import { Textarea } from "@/components/ui/textarea";
35
35
import { colors } from "@/data/status-report-updates.client";
36
+
import { useIsMobile } from "@/hooks/use-mobile";
36
37
import { cn } from "@/lib/utils";
37
38
import { zodResolver } from "@hookform/resolvers/zod";
38
39
import { statusReportStatus } from "@openstatus/db/src/schema";
···
61
62
defaultValues?: FormValues;
62
63
onSubmit: (values: FormValues) => Promise<void>;
63
64
}) {
65
+
const mobile = useIsMobile();
64
66
const form = useForm<FormValues>({
65
67
resolver: zodResolver(schema),
66
68
defaultValues: defaultValues ?? {
···
178
180
<PopoverContent
179
181
className="pointer-events-auto w-auto p-0"
180
182
align="start"
181
-
side="left"
183
+
side={mobile ? "bottom" : "left"}
182
184
>
183
185
<Calendar
184
186
mode="single"
+3
-1
apps/dashboard/src/components/forms/status-report/form.tsx
+3
-1
apps/dashboard/src/components/forms/status-report/form.tsx
···
41
41
import { Tabs } from "@/components/ui/tabs";
42
42
import { Textarea } from "@/components/ui/textarea";
43
43
import { colors } from "@/data/status-report-updates.client";
44
+
import { useIsMobile } from "@/hooks/use-mobile";
44
45
import { cn } from "@/lib/utils";
45
46
import { zodResolver } from "@hookform/resolvers/zod";
46
47
import { statusReportStatus } from "@openstatus/db/src/schema";
···
78
79
onSubmit: (values: FormValues) => Promise<void>;
79
80
monitors: { id: number; name: string }[];
80
81
}) {
82
+
const mobile = useIsMobile();
81
83
const form = useForm<FormValues>({
82
84
resolver: zodResolver(defaultValues ? updateSchema : schema),
83
85
defaultValues: defaultValues ?? {
···
215
217
<PopoverContent
216
218
className="pointer-events-auto w-auto p-0"
217
219
align="start"
218
-
side="left"
220
+
side={mobile ? "bottom" : "left"}
219
221
>
220
222
<Calendar
221
223
mode="single"