From 9e0782953c1405beef5b0571cf34742fcf001ba7 Mon Sep 17 00:00:00 2001
From: Ricky Stretch <rick@stretchy.ca>
Date: Sun, 29 Mar 2026 15:09:39 -0400
Subject: [PATCH] v0.12.45 update

---
 backend/package.json                        |  2 +-
 build.sh                                    |  2 +-
 frontend/package.json                       |  2 +-
 frontend/src/components/MobileEventForm.jsx | 26 +++++++++++++++++++--
 4 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/backend/package.json b/backend/package.json
index aa93e07..84789f6 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rosterchirp-backend",
-  "version": "0.12.44",
+  "version": "0.12.45",
   "description": "RosterChirp backend server",
   "main": "src/index.js",
   "scripts": {
diff --git a/build.sh b/build.sh
index 1d4582a..ecf5cd5 100644
--- a/build.sh
+++ b/build.sh
@@ -13,7 +13,7 @@
 # ─────────────────────────────────────────────────────────────
 set -euo pipefail
 
-VERSION="${1:-0.12.44}"
+VERSION="${1:-0.12.45}"
 ACTION="${2:-}"
 REGISTRY="${REGISTRY:-}"
 IMAGE_NAME="rosterchirp-dev"
diff --git a/frontend/package.json b/frontend/package.json
index 214055d..9858803 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rosterchirp-frontend",
-  "version": "0.12.44",
+  "version": "0.12.45",
   "private": true,
   "scripts": {
     "dev": "vite",
diff --git a/frontend/src/components/MobileEventForm.jsx b/frontend/src/components/MobileEventForm.jsx
index 15e5532..e6a4e4c 100644
--- a/frontend/src/components/MobileEventForm.jsx
+++ b/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',
           }}
         >