diff --git a/.changeset/quiet-apples-develop.md b/.changeset/quiet-apples-develop.md
new file mode 100644
index 0000000000..e32cf3a8d7
--- /dev/null
+++ b/.changeset/quiet-apples-develop.md
@@ -0,0 +1,5 @@
+---
+"@sumup-oss/circuit-ui": patch
+---
+
+Improved the DateInput component's calendar dialog to be placed on the side with the most available space and to scroll when it overflows the viewport.
diff --git a/.changeset/silent-lobsters-peel.md b/.changeset/silent-lobsters-peel.md
new file mode 100644
index 0000000000..193ee9307f
--- /dev/null
+++ b/.changeset/silent-lobsters-peel.md
@@ -0,0 +1,5 @@
+---
+"@sumup-oss/circuit-ui": patch
+---
+
+Stretched the DateInput component to take up the available width.
diff --git a/packages/circuit-ui/components/DateInput/DateInput.module.css b/packages/circuit-ui/components/DateInput/DateInput.module.css
index 8aaef15423..3da7cbbec6 100644
--- a/packages/circuit-ui/components/DateInput/DateInput.module.css
+++ b/packages/circuit-ui/components/DateInput/DateInput.module.css
@@ -10,6 +10,7 @@
   position: relative;
   z-index: var(--cui-z-index-absolute);
   display: flex;
+  flex-grow: 1;
   gap: 2px;
   min-width: 170px;
   padding: var(--cui-spacings-byte) var(--cui-spacings-mega);
diff --git a/packages/circuit-ui/components/DateInput/DateInput.tsx b/packages/circuit-ui/components/DateInput/DateInput.tsx
index 6f4b04a9ed..d58fbba74c 100644
--- a/packages/circuit-ui/components/DateInput/DateInput.tsx
+++ b/packages/circuit-ui/components/DateInput/DateInput.tsx
@@ -24,7 +24,7 @@ import {
   type InputHTMLAttributes,
 } from 'react';
 import type { Temporal } from 'temporal-polyfill';
-import { flip, offset, shift, useFloating } from '@floating-ui/react-dom';
+import { flip, offset, shift, size, useFloating } from '@floating-ui/react-dom';
 import { Calendar as CalendarIcon } from '@sumup-oss/icons';
 
 import type { ClickEvent } from '../../types/events.js';
@@ -211,7 +211,16 @@ export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(
     const { floatingStyles, update } = useFloating({
       open,
       placement: 'bottom-start',
-      middleware: [offset(4), flip(), shift()],
+      middleware: [
+        offset(4),
+        flip({ fallbackAxisSideDirection: 'end', crossAxis: false }),
+        shift(),
+        size({
+          apply({ availableHeight, elements }) {
+            elements.floating.style.maxHeight = `${availableHeight}px`;
+          },
+        }),
+      ],
       elements: {
         reference: fieldRef.current,
         floating: dialogRef.current,
diff --git a/packages/circuit-ui/components/DateInput/components/Dialog.tsx b/packages/circuit-ui/components/DateInput/components/Dialog.tsx
index a483fe5114..7ca6c0f8ff 100644
--- a/packages/circuit-ui/components/DateInput/components/Dialog.tsx
+++ b/packages/circuit-ui/components/DateInput/components/Dialog.tsx
@@ -94,7 +94,7 @@ export const Dialog = forwardRef<HTMLDialogElement, DialogProps>(
         dialogElement.removeEventListener('close', onClose);
         dialogElement.removeEventListener('click', onClickListener);
       };
-    }, [onClose]);
+    }, [onClose, onClickListener]);
 
     useEffect(() => {
       const dialogElement = dialogRef.current;