From 15bfcc80c3579b9dc236287224aa29a1186f0682 Mon Sep 17 00:00:00 2001
From: Michelle <michelle.winkler@miichelle.moe>
Date: Wed, 4 Mar 2026 11:00:39 +0100
Subject: [PATCH] feat(DateTimePicker): remove custom popper container and
 adjust z-index for improved layout

---
 src/components/DateTimePicker.jsx | 6 ------
 src/index.css                     | 8 ++------
 2 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/src/components/DateTimePicker.jsx b/src/components/DateTimePicker.jsx
index 3384eda..51afa3e 100644
--- a/src/components/DateTimePicker.jsx
+++ b/src/components/DateTimePicker.jsx
@@ -2,13 +2,8 @@ import ReactDatePicker from 'react-datepicker';
 import { de } from 'date-fns/locale';
 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.
@@ -64,7 +59,6 @@ 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 } },
diff --git a/src/index.css b/src/index.css
index f2d84f5..136d53c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -801,10 +801,6 @@
 }
 
 /* ── Popper & calendar container ──────────────────────────────── */
-.react-datepicker-popper {
-  z-index: 100 !important;
-}
-
 .dtp-calendar.react-datepicker {
   background: var(--card-bg);
   border: 1px solid var(--border);
@@ -823,9 +819,9 @@
   display: none;
 }
 
-/* Portal-rendered popper must sit above modals (z-50 = 50 in Tailwind) */
+/* Must sit above the modal backdrop (z-50 stacking context) */
 .react-datepicker-popper {
-  z-index: 9999 !important;
+  z-index: 200 !important;
 }
 
 /* ── Header (custom rendered) ─────────────────────────────────── */