From e20c04ac4fffc6e2fa80d87183d0b2221340a2ce Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Tue, 3 Mar 2026 16:26:49 +0800
Subject: [PATCH] Fix DatePicker popup flashing at top-left in Chromium

Latent bug: useEffect runs after paint, so the popup rendered at
{top:0, left:0} before repositioning. Switched to useLayoutEffect
which runs synchronously before paint, ensuring correct position
on first frame. Both Chromium and Firefox unaffected by the change.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/ui/date-picker.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/ui/date-picker.tsx b/frontend/src/components/ui/date-picker.tsx
index 359d2be..b846ad2 100644
--- a/frontend/src/components/ui/date-picker.tsx
+++ b/frontend/src/components/ui/date-picker.tsx
@@ -160,7 +160,7 @@ const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(
       });
     }, [mode, usesNativeInput]);
 
-    React.useEffect(() => {
+    React.useLayoutEffect(() => {
       if (!open) return;
       updatePosition();
       window.addEventListener('scroll', updatePosition, true);