feat(DateTimePicker): implement custom popper container for improved layout handling

feat(Modal): enhance modal styling with rounded corners and improved overflow handling
style: adjust z-index for datepicker popper to ensure proper layering above modals

src/components/DateTimePicker.jsx

@@ -1,9 +1,14 @@
 import ReactDatePicker from 'react-datepicker';
 import { de } from 'date-fns/locale';
-import { Calendar as CalendarIcon, Clock, X } from 'lucide-react';
+import { Calendar as CalendarIcon, Clock } from 'lucide-react';
 import { forwardRef } from 'react';
+import { createPortal } from 'react-dom';
 import 'react-datepicker/dist/react-datepicker.css';
 
+// Renders the calendar popper into document.body so it never affects the form
+// layout (prevents the "everything shifts down + auto-scroll" bug).
+const PopperContainer = ({ children }) => createPortal(children, document.body);
+
 /**
  * Custom DateTimePicker that reads the app's CSS variables and
  * fully matches whatever theme is active.
@@ -59,6 +64,7 @@ export default function DateTimePicker({
           minDate={minDate}
           required={required}
           popperPlacement="bottom-start"
+          popperContainer={PopperContainer}
           popperModifiers={[
             { name: 'offset', options: { offset: [0, 4] } },
             { name: 'preventOverflow', options: { rootBoundary: 'viewport', tether: false, altAxis: true } },
@@ -68,8 +74,6 @@ export default function DateTimePicker({
           dayClassName={(date) => 'dtp-day'}
           timeClassName={() => 'dtp-time-item'}
           renderCustomHeader={CalendarHeader}
-          isClearable
-          clearButtonClassName="dtp-clear-btn"
           wrapperClassName="dtp-dp-wrapper"
         />
       </div>

src/components/Modal.jsx

@@ -4,9 +4,9 @@ export default function Modal({ title, children, onClose, maxWidth = 'max-w-lg'
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
       <div className="fixed inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
-      <div className={`relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full ${maxWidth} overflow-hidden`}>
+      <div className={`relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full ${maxWidth}`}>
         {/* Header */}
-        <div className="flex items-center justify-between px-6 py-4 border-b border-th-border">
+        <div className="flex items-center justify-between px-6 py-4 border-b border-th-border rounded-t-2xl">
           <h2 className="text-lg font-semibold text-th-text">{title}</h2>
           <button
             onClick={onClose}
@@ -16,7 +16,7 @@ export default function Modal({ title, children, onClose, maxWidth = 'max-w-lg'
           </button>
         </div>
         {/* Body */}
-        <div className="p-6">
+        <div className="p-6 overflow-y-auto max-h-[calc(90vh-4rem)]">
           {children}
         </div>
       </div>

src/index.css

@@ -823,6 +823,11 @@
   display: none;
 }
 
+/* Portal-rendered popper must sit above modals (z-50 = 50 in Tailwind) */
+.react-datepicker-popper {
+  z-index: 9999 !important;
+}
+
 /* ── Header (custom rendered) ─────────────────────────────────── */
 .dtp-calendar .react-datepicker__header {
   background: var(--bg-secondary);