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/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>