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
All checks were successful
Build & Push Docker Image / build (push) Successful in 7m4s
This commit is contained in:
@@ -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 } },
|
||||||
|
|||||||
@@ -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) ─────────────────────────────────── */
|
||||||
|
|||||||
Reference in New Issue
Block a user