v012.42 updated

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rosterchirp-frontend",
-  "version": "0.12.41",
+  "version": "0.12.42",
   "private": true,
   "scripts": {
     "dev": "vite",

frontend/src/components/MobileEventForm.jsx

@@ -72,11 +72,32 @@ function fmt12(val) {
 function TimeInputMobile({ value, onChange }) {
   const [open, setOpen] = useState(false);
   const [inputVal, setInputVal] = useState(fmt12(value));
+  const [keyboardOffset, setKeyboardOffset] = useState(0);
   const wrapRef = useRef(null);
   const listRef = useRef(null);
 
   useEffect(() => { setInputVal(fmt12(value)); }, [value]);
 
+  // Handle keyboard positioning with Visual Viewport API
+  useEffect(() => {
+    const handleViewportChange = () => {
+      if (window.visualViewport) {
+        const offset = window.innerHeight - window.visualViewport.height;
+        setKeyboardOffset(offset > 0 ? offset : 0);
+      }
+    };
+
+    if (open) {
+      handleViewportChange();
+      window.visualViewport?.addEventListener('resize', handleViewportChange);
+      return () => {
+        window.visualViewport?.removeEventListener('resize', handleViewportChange);
+      };
+    } else {
+      setKeyboardOffset(0);
+    }
+  }, [open]);
+
   useEffect(() => {
     if (!open || !listRef.current) return;
     const idx = TIME_SLOTS.findIndex(s => s.value === value);
@@ -108,16 +129,24 @@ function TimeInputMobile({ value, onChange }) {
         onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); commit(inputVal); } if (e.key === 'Escape') { setInputVal(fmt12(value)); setOpen(false); } }}
         autoComplete="off"
         inputMode="text"
+        enterKeyHint="done"
         style={{ fontSize: 15, color: 'var(--primary)', fontWeight: 600, background: 'transparent', border: 'none', outline: 'none', cursor: 'text', width: 90 }}
       />
       {open && (
         <div
           ref={listRef}
           style={{
-            position: 'fixed', zIndex: 400,
-            background: 'var(--surface)', border: '1px solid var(--border)',
-            borderRadius: 8, boxShadow: '0 4px 20px rgba(0,0,0,0.2)',
-            width: 130, maxHeight: 5 * 40, overflowY: 'auto',
+            position: 'fixed', 
+            zIndex: 400,
+            background: 'var(--surface)', 
+            border: '1px solid var(--border)',
+            borderRadius: 8, 
+            boxShadow: '0 4px 20px rgba(0,0,0,0.2)',
+            width: 130, 
+            maxHeight: 5 * 40, 
+            overflowY: 'auto',
+            bottom: keyboardOffset > 0 ? keyboardOffset + 10 : 'auto',
+            top: keyboardOffset > 0 ? 'auto' : '100%',
           }}
         >
           {TIME_SLOTS.map(s => (
@@ -486,7 +515,7 @@ export default function MobileEventForm({ event, eventTypes, userGroups, selecte
 
       {/* form wrapper suppresses Chrome Android's autofill chip bar; autoComplete="new-password"
           on individual inputs is ignored by Chrome but respected on the form element */}
-      <form autoComplete="off" onSubmit={e => e.preventDefault()} style={{ flex:1,overflowY:'auto', marginBottom:'50vh' }}>
+      <form autoComplete="off" onSubmit={e => e.preventDefault()} style={{ flex:1,overflowY:'auto' }}>
         {/* Title */}
         <div style={{ padding:'16px 20px',borderBottom:'1px solid var(--border)' }}>
           <input value={title} onChange={e => setTitle(e.target.value)} autoComplete="new-password" placeholder="Add title" autoCorrect="off" autoCapitalize="sentences" spellCheck={false} style={{ width:'100%',border:'none',background:'transparent',fontSize:22,fontWeight:700,color:'var(--text-primary)',outline:'none' }}/>

frontend/src/components/SchedulePage.jsx

@@ -198,6 +198,7 @@ function TimeInput({ value, onChange, style }) {
         style={{ width: '100%', cursor: 'text' }}
         autoComplete="off"
         inputMode="text"
+        enterKeyHint="done"
         placeholder="9:00 AM"
       />
       {open && (