bug: fixed calender modal stacking issue #209

2026-04-15T22:31:24Z

DeveshSingh commented

2026-04-15 22:31:24 +00:00

Fix #205: Calendar event form borked

Problem

The date picker calendar popup in the Create/Edit Event form rendered behind adjacent form fields (End date, Location, Time input), making it impossible to select dates without the calendar being obscured.

The DateTimeInput component had no stacking context, so the absolutely-positioned calendar popup from date-picker-svelte followed default DOM paint order — later siblings (End field, Location field) always rendered on top of earlier siblings' popups (Start field's calendar).

What changed

Updated `src/lib/components/DateTimeInput.svelte`

Added focus-within:z-modal on the root container so whichever date picker is actively focused dynamically elevates above all sibling fields
Added z-popover on the date input wrapper so the calendar popup renders above the adjacent time input
Added group + group-focus-within:opacity-0 + group-focus-within:pointer-events-none on the icon overlay so the calendar/clear icon hides and becomes non-interactive when the picker popup is open, preventing ghost clicks that would close the calendar
Added pointer-events-auto on icon buttons so they remain clickable when the overlay is not in focus-within state

Behavior after fix

Start date picker popup renders above the End field and Location field
End date picker popup renders above the Location field
Neither picker permanently traps the other — only the active one elevates
Calendar icon overlay does not intercept clicks when the popup is open
Single click on the date input opens the calendar (no double-click needed)

Manual verification

Open app locally and navigate to any Space
Go to Calendar tab → click Create Event
Click the Start date input — calendar popup should render above End and Location fields
Select a date, then click the End date input — calendar popup should render above Location field

Scope

Single-file change (DateTimeInput.svelte)

# Fix #205: Calendar event form borked ## Problem The date picker calendar popup in the Create/Edit Event form rendered **behind** adjacent form fields (End date, Location, Time input), making it impossible to select dates without the calendar being obscured. The `DateTimeInput` component had no stacking context, so the absolutely-positioned calendar popup from `date-picker-svelte` followed default DOM paint order — later siblings (End field, Location field) always rendered on top of earlier siblings' popups (Start field's calendar). ## What changed ### Updated `src/lib/components/DateTimeInput.svelte` - Added `focus-within:z-modal` on the root container so whichever date picker is actively focused dynamically elevates above all sibling fields - Added `z-popover` on the date input wrapper so the calendar popup renders above the adjacent time input - Added `group` + `group-focus-within:opacity-0` + `group-focus-within:pointer-events-none` on the icon overlay so the calendar/clear icon hides and becomes non-interactive when the picker popup is open, preventing ghost clicks that would close the calendar - Added `pointer-events-auto` on icon buttons so they remain clickable when the overlay is not in focus-within state ## Behavior after fix - **Start** date picker popup renders above the End field and Location field - **End** date picker popup renders above the Location field - Neither picker permanently traps the other — only the active one elevates - Calendar icon overlay does not intercept clicks when the popup is open - Single click on the date input opens the calendar (no double-click needed) ## Manual verification 1. Open app locally and navigate to any Space 2. Go to **Calendar** tab → click **Create Event** 3. Click the **Start** date input — calendar popup should render above End and Location fields 4. Select a date, then click the **End** date input — calendar popup should render above Location field ## Scope - Single-file change (`DateTimeInput.svelte`)

Screen Recording 2026-04-16 032944.mp4

11 MiB

DeveshSingh added 1 commit 2026-04-15 22:31:25 +00:00

fixed calendor modal stacking issue 77479d987d

hodlbod commented

2026-04-16 01:01:58 +00:00

Looks good, only thing is can you use rhe z stack defined in the tailwind config file

DeveshSingh added 1 commit 2026-04-16 12:06:50 +00:00

changed z-index values according to tailwind config 222bed914f

DeveshSingh commented

2026-04-16 12:08:21 +00:00