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>