feat(DateTimePicker): remove custom popper container and adjust z-index for improved layout
All checks were successful
Build & Push Docker Image / build (push) Successful in 7m4s

This commit is contained in:
2026-03-04 11:00:39 +01:00
parent fcb83a9b72
commit 15bfcc80c3
2 changed files with 2 additions and 12 deletions

View File

@@ -2,13 +2,8 @@ import ReactDatePicker from 'react-datepicker';
import { de } from 'date-fns/locale'; import { de } from 'date-fns/locale';
import { Calendar as CalendarIcon, Clock } from 'lucide-react'; import { Calendar as CalendarIcon, Clock } from 'lucide-react';
import { forwardRef } from 'react'; import { forwardRef } from 'react';
import { createPortal } from 'react-dom';
import 'react-datepicker/dist/react-datepicker.css'; 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 * Custom DateTimePicker that reads the app's CSS variables and
* fully matches whatever theme is active. * fully matches whatever theme is active.
@@ -64,7 +59,6 @@ export default function DateTimePicker({
minDate={minDate} minDate={minDate}
required={required} required={required}
popperPlacement="bottom-start" popperPlacement="bottom-start"
popperContainer={PopperContainer}
popperModifiers={[ popperModifiers={[
{ name: 'offset', options: { offset: [0, 4] } }, { name: 'offset', options: { offset: [0, 4] } },
{ name: 'preventOverflow', options: { rootBoundary: 'viewport', tether: false, altAxis: true } }, { name: 'preventOverflow', options: { rootBoundary: 'viewport', tether: false, altAxis: true } },

View File

@@ -801,10 +801,6 @@
} }
/* ── Popper & calendar container ──────────────────────────────── */ /* ── Popper & calendar container ──────────────────────────────── */
.react-datepicker-popper {
z-index: 100 !important;
}
.dtp-calendar.react-datepicker { .dtp-calendar.react-datepicker {
background: var(--card-bg); background: var(--card-bg);
border: 1px solid var(--border); border: 1px solid var(--border);
@@ -823,9 +819,9 @@
display: none; 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 { .react-datepicker-popper {
z-index: 9999 !important; z-index: 200 !important;
} }
/* ── Header (custom rendered) ─────────────────────────────────── */ /* ── Header (custom rendered) ─────────────────────────────────── */