diff --git a/packages/components/src/components/DatePicker/DatePicker.module.scss b/packages/components/src/components/DatePicker/DatePicker.module.scss
index 3dc5c916b2..0b3cc87cd4 100644
--- a/packages/components/src/components/DatePicker/DatePicker.module.scss
+++ b/packages/components/src/components/DatePicker/DatePicker.module.scss
@@ -1,3 +1,5 @@
 .calendar {
-  padding: var(--popover--padding--m);
+  &:not(.small) {
+    padding: var(--popover--padding--s);
+  }
 }
diff --git a/packages/components/src/components/DatePicker/DatePicker.tsx b/packages/components/src/components/DatePicker/DatePicker.tsx
index 25681407d0..513254bbac 100644
--- a/packages/components/src/components/DatePicker/DatePicker.tsx
+++ b/packages/components/src/components/DatePicker/DatePicker.tsx
@@ -12,6 +12,7 @@ import {
 import { Calendar } from "@/components/Calendar";
 import { useFieldComponent } from "@/lib/hooks/useFieldComponent";
 import styles from "./DatePicker.module.scss";
+import { getBodyInnerWidth } from "@/lib/dom/getBodyInnerWidth";
 
 export interface DatePickerProps<T extends Aria.DateValue = Aria.DateValue>
   extends
@@ -32,6 +33,11 @@ export const DatePicker = flowComponent("DatePicker", (props) => {
 
   const rootClassName = clsx(fieldProps.className, className);
 
+  const calendarClassName = clsx(
+    styles.calendar,
+    getBodyInnerWidth() < 300 && styles.small,
+  );
+
   return (
     <Aria.DatePicker
       {...rest}
@@ -56,7 +62,7 @@ export const DatePicker = flowComponent("DatePicker", (props) => {
           isDialogContent
           controller={popoverController}
         >
-          <Calendar className={styles.calendar} />
+          <Calendar className={calendarClassName} />
         </Popover>
       </FieldErrorCaptureContext>
       <FieldErrorView />
diff --git a/packages/components/src/components/Popover/components/PopoverContent/PopoverContent.tsx b/packages/components/src/components/Popover/components/PopoverContent/PopoverContent.tsx
index 0f7ccaa971..3297d555e1 100644
--- a/packages/components/src/components/Popover/components/PopoverContent/PopoverContent.tsx
+++ b/packages/components/src/components/Popover/components/PopoverContent/PopoverContent.tsx
@@ -2,6 +2,7 @@ import type { FC, PropsWithChildren, Ref, RefObject } from "react";
 import * as Aria from "react-aria-components";
 import styles from "../../Popover.module.scss";
 import type { PropsWithClassName } from "@/lib/types/props";
+import { getBodyInnerWidth } from "@/lib/dom/getBodyInnerWidth";
 
 export interface PopoverContentProps
   extends PropsWithChildren, PropsWithClassName {
@@ -38,7 +39,7 @@ export const PopoverContent: FC<PopoverContentProps> = (props) => {
       ref={ref}
       isOpen={isOpen}
       onOpenChange={onOpenChange}
-      style={{ width }}
+      style={{ width, maxWidth: getBodyInnerWidth() }}
     >
       {withTip && (
         <Aria.OverlayArrow className={styles.tip}>
diff --git a/packages/components/src/lib/dom/getBodyInnerWidth.ts b/packages/components/src/lib/dom/getBodyInnerWidth.ts
new file mode 100644
index 0000000000..bd5af0e45c
--- /dev/null
+++ b/packages/components/src/lib/dom/getBodyInnerWidth.ts
@@ -0,0 +1,11 @@
+export const getBodyInnerWidth = () => {
+  if (typeof window === "undefined") {
+    return 0;
+  }
+  const bodyStyles = window.getComputedStyle(document.body);
+  return (
+    document.documentElement.clientWidth -
+    parseFloat(bodyStyles.paddingLeft) -
+    parseFloat(bodyStyles.paddingRight)
+  );
+};
diff --git a/packages/remote-react-components/src/tests/visual/__screenshots__/DatePicker.browser.test.tsx/DatePicker-calendar-visible-firefox-linux.png b/packages/remote-react-components/src/tests/visual/__screenshots__/DatePicker.browser.test.tsx/DatePicker-calendar-visible-firefox-linux.png
index 10f931e8fa..a2277f7f6c 100644
Binary files a/packages/remote-react-components/src/tests/visual/__screenshots__/DatePicker.browser.test.tsx/DatePicker-calendar-visible-firefox-linux.png and b/packages/remote-react-components/src/tests/visual/__screenshots__/DatePicker.browser.test.tsx/DatePicker-calendar-visible-firefox-linux.png differ
diff --git a/packages/remote-react-components/src/tests/visual/__screenshots__/DatePicker.browser.test.tsx/DatePicker-calendar-visible-webkit-linux.png b/packages/remote-react-components/src/tests/visual/__screenshots__/DatePicker.browser.test.tsx/DatePicker-calendar-visible-webkit-linux.png
index 2e61a78d6a..2072608017 100644
Binary files a/packages/remote-react-components/src/tests/visual/__screenshots__/DatePicker.browser.test.tsx/DatePicker-calendar-visible-webkit-linux.png and b/packages/remote-react-components/src/tests/visual/__screenshots__/DatePicker.browser.test.tsx/DatePicker-calendar-visible-webkit-linux.png differ