feat(DateTimePicker): optimize onChange handling with ref for improved performance

src/components/BrandLogo.jsx

@@ -3,7 +3,7 @@ import { useBranding } from '../contexts/BrandingContext';
 
 const sizes = {
   sm: { box: 'w-8 h-8', h: 'h-8', maxW: 'max-w-[8rem]', rounded: 'rounded-lg', icon: 16, text: 'text-lg' },
-  md: { box: 'w-9 h-9', h: 'h-9', maxW: 'max-w-[10rem]', rounded: 'rounded-lg', icon: 20, text: 'text-xl' },
+  md: { box: 'w-9 h-9', h: 'h-12', maxW: 'max-w-[10rem]', rounded: 'rounded-lg', icon: 20, text: 'text-xl' },
   lg: { box: 'w-10 h-10', h: 'h-10', maxW: 'max-w-[12rem]', rounded: 'rounded-xl', icon: 22, text: 'text-2xl' },
 };
 

src/components/DateTimePicker.jsx

@@ -30,6 +30,9 @@ export default function DateTimePicker({
 }) {
   const inputRef = useRef(null);
   const fpRef = useRef(null);
+  // Always keep a current ref to onChange so flatpickr's closure never goes stale
+  const onChangeRef = useRef(onChange);
+  useEffect(() => { onChangeRef.current = onChange; });
 
   useEffect(() => {
     if (!inputRef.current) return;
@@ -44,14 +47,14 @@ export default function DateTimePicker({
       appendTo: document.body,       // portal to body → never clipped
       static: false,
       onChange: (selectedDates) => {
-        if (selectedDates.length === 0) { onChange(''); return; }
+        if (selectedDates.length === 0) { onChangeRef.current(''); return; }
         const d = selectedDates[0];
         const y = d.getFullYear();
         const mo = String(d.getMonth() + 1).padStart(2, '0');
         const day = String(d.getDate()).padStart(2, '0');
         const h = String(d.getHours()).padStart(2, '0');
         const mi = String(d.getMinutes()).padStart(2, '0');
-        onChange(`${y}-${mo}-${day}T${h}:${mi}`);
+        onChangeRef.current(`${y}-${mo}-${day}T${h}:${mi}`);
       },
     });