gabriel/beetask
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(dashboard): render custom period modal via portal with z-index to prevent stacking context overlap

Browse source
This commit is contained in:
Gabriel Menezes 2026-11-02 10:59:02 -04:00
parent 49d010eb71
commit 718c211391
1 changed files with 110 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
frontend/src/components/dashboard/PeriodSelector.tsx
View file

@ -1,4 +1,5 @@
import React, { useState, useRef, useEffect } from 'react' import React, { useState, useRef, useEffect } from 'react'
import { createPortal } from 'react-dom'
import { import {
Calendar, Calendar,
ChevronDown, ChevronDown,
@ -94,7 +95,7 @@ export const PeriodSelector: React.FC<PeriodSelectorProps> = ({
const isSecondaryActive = SECONDARY_PRESETS.includes(value) const isSecondaryActive = SECONDARY_PRESETS.includes(value)
return ( return (
<div className={`flex flex-col sm:flex-row sm:items-center justify-between gap-3 p-2.5 sm:p-3 rounded-2xl bg-surface/90 border border-border-soft backdrop-blur-md shadow-panel ${className}`}> <div className={`relative z-10 flex flex-col sm:flex-row sm:items-center justify-between gap-3 p-2.5 sm:p-3 rounded-2xl bg-surface/90 border border-border-soft backdrop-blur-md shadow-panel ${className}`}>
{/* Left: Buttons & Presets */} {/* Left: Buttons & Presets */}
<div className="flex items-center gap-1.5 flex-wrap"> <div className="flex items-center gap-1.5 flex-wrap">
<div className="flex items-center gap-1 text-xs font-bold text-muted mr-1"> <div className="flex items-center gap-1 text-xs font-bold text-muted mr-1">
@ -197,8 +198,9 @@ export const PeriodSelector: React.FC<PeriodSelectorProps> = ({
</div> </div>
{/* Modal / Dialog for Custom Date Range */} {/* Modal / Dialog for Custom Date Range */}
{customModalOpen && ( {customModalOpen && typeof document !== 'undefined' &&
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-xs animate-in fade-in duration-200"> createPortal(
<div className="fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-black/75 backdrop-blur-xs animate-in fade-in duration-200">
<div <div
className="w-full max-w-md bg-surface border border-border-soft rounded-3xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200" className="w-full max-w-md bg-surface border border-border-soft rounded-3xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200"
role="dialog" role="dialog"
@ -308,7 +310,8 @@ export const PeriodSelector: React.FC<PeriodSelectorProps> = ({
</div> </div>
</form> </form>
</div> </div>
</div> </div>,
document.body
)} )}
</div> </div>
) )