v0.12.45 update

frontend/src/components/MobileEventForm.jsx

@@ -73,6 +73,7 @@ function TimeInputMobile({ value, onChange }) {
   const [open, setOpen] = useState(false);
   const [inputVal, setInputVal] = useState(fmt12(value));
   const [keyboardOffset, setKeyboardOffset] = useState(0);
+  const [dropdownPosition, setDropdownPosition] = useState({ top: 'auto', bottom: 'auto' });
   const wrapRef = useRef(null);
   const listRef = useRef(null);
 
@@ -98,6 +99,27 @@ function TimeInputMobile({ value, onChange }) {
     }
   }, [open]);
 
+  // Calculate dropdown position based on available space
+  useEffect(() => {
+    if (open && wrapRef.current) {
+      const rect = wrapRef.current.getBoundingClientRect();
+      const dropdownHeight = 200; // Approximate height of 5 time slots
+      const spaceAbove = rect.top;
+      const spaceBelow = window.innerHeight - rect.bottom - keyboardOffset;
+      
+      if (spaceBelow >= dropdownHeight) {
+        // Show below if enough space
+        setDropdownPosition({ top: '100%', bottom: 'auto' });
+      } else if (spaceAbove >= dropdownHeight) {
+        // Show above if more space above
+        setDropdownPosition({ top: 'auto', bottom: '100%' });
+      } else {
+        // Show above anyway (better than being hidden)
+        setDropdownPosition({ top: 'auto', bottom: '100%' });
+      }
+    }
+  }, [open, keyboardOffset]);
+
   useEffect(() => {
     if (!open || !listRef.current) return;
     const idx = TIME_SLOTS.findIndex(s => s.value === value);
@@ -145,8 +167,8 @@ function TimeInputMobile({ value, onChange }) {
             width: 130, 
             maxHeight: 5 * 40, 
             overflowY: 'auto',
-            bottom: keyboardOffset > 0 ? keyboardOffset + 10 : 'auto',
-            top: keyboardOffset > 0 ? 'auto' : '100%',
+            ...dropdownPosition,
+            left: wrapRef.current ? wrapRef.current.getBoundingClientRect().left : 'auto',
             pointerEvents: 'auto',
           }}
         >