diff --git a/apps/dashboard/src/components/forms/maintenance/form.tsx b/apps/dashboard/src/components/forms/maintenance/form.tsx
index ba3a021f..03d38c25 100644
--- a/apps/dashboard/src/components/forms/maintenance/form.tsx
+++ b/apps/dashboard/src/components/forms/maintenance/form.tsx
@@ -33,6 +33,7 @@ import { TabsContent } from "@/components/ui/tabs";
 import { TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Tabs } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
+import { useIsMobile } from "@/hooks/use-mobile";
 import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { isTRPCClientError } from "@trpc/client";
@@ -69,6 +70,7 @@ export function FormMaintenance({
   monitors: { id: number; name: string; url: string }[];
   onSubmit: (values: FormValues) => Promise<void>;
 }) {
+  const mobile = useIsMobile();
   const form = useForm<FormValues>({
     resolver: zodResolver(schema),
     defaultValues: defaultValues ?? {
@@ -166,7 +168,7 @@ export function FormMaintenance({
                   <PopoverContent
                     className="pointer-events-auto w-auto p-0"
                     align="start"
-                    side="left"
+                    side={mobile ? "bottom" : "left"}
                   >
                     <Calendar
                       mode="single"
@@ -270,7 +272,7 @@ export function FormMaintenance({
                   <PopoverContent
                     className="pointer-events-auto w-auto p-0"
                     align="start"
-                    side="left"
+                    side={mobile ? "bottom" : "left"}
                   >
                     <Calendar
                       mode="single"
diff --git a/apps/dashboard/src/components/forms/status-report-update/form.tsx b/apps/dashboard/src/components/forms/status-report-update/form.tsx
index b6b62509..23bb3630 100644
--- a/apps/dashboard/src/components/forms/status-report-update/form.tsx
+++ b/apps/dashboard/src/components/forms/status-report-update/form.tsx
@@ -33,6 +33,7 @@ import { TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Tabs } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
 import { colors } from "@/data/status-report-updates.client";
+import { useIsMobile } from "@/hooks/use-mobile";
 import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { statusReportStatus } from "@openstatus/db/src/schema";
@@ -61,6 +62,7 @@ export function FormStatusReportUpdate({
   defaultValues?: FormValues;
   onSubmit: (values: FormValues) => Promise<void>;
 }) {
+  const mobile = useIsMobile();
   const form = useForm<FormValues>({
     resolver: zodResolver(schema),
     defaultValues: defaultValues ?? {
@@ -178,7 +180,7 @@ export function FormStatusReportUpdate({
                   <PopoverContent
                     className="pointer-events-auto w-auto p-0"
                     align="start"
-                    side="left"
+                    side={mobile ? "bottom" : "left"}
                   >
                     <Calendar
                       mode="single"
diff --git a/apps/dashboard/src/components/forms/status-report/form.tsx b/apps/dashboard/src/components/forms/status-report/form.tsx
index 8bc85ee4..2d1d105e 100644
--- a/apps/dashboard/src/components/forms/status-report/form.tsx
+++ b/apps/dashboard/src/components/forms/status-report/form.tsx
@@ -41,6 +41,7 @@ import { TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Tabs } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
 import { colors } from "@/data/status-report-updates.client";
+import { useIsMobile } from "@/hooks/use-mobile";
 import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { statusReportStatus } from "@openstatus/db/src/schema";
@@ -78,6 +79,7 @@ export function FormStatusReport({
   onSubmit: (values: FormValues) => Promise<void>;
   monitors: { id: number; name: string }[];
 }) {
+  const mobile = useIsMobile();
   const form = useForm<FormValues>({
     resolver: zodResolver(defaultValues ? updateSchema : schema),
     defaultValues: defaultValues ?? {
@@ -215,7 +217,7 @@ export function FormStatusReport({
                       <PopoverContent
                         className="pointer-events-auto w-auto p-0"
                         align="start"
-                        side="left"
+                        side={mobile ? "bottom" : "left"}
                       >
                         <Calendar
                           mode="single"