Add Depth modal: done button not visible on small iOS screens

[CourtneyLee333]

When attempting to add a custom depth on the Soil Pit section of the Soil tab in a Site, a user with an iphone mini couldn't access the Add button and therefore couldn't add their new depth. There is no Done button on the number pad, and the modal doesn’t move up above the number pad. So they can’t enter and save numbers on the add depth modal. If they add a label, they can save it (I'm not sure what the difference was.) I'm inclined to call this a P1, but at the very least a high P2.

• We've asked what OS version they're on. Paul says: i don’t see a done button on iOS 17.5 (simulator) or 17.6.1 (real device)
• Specific to a small iPhone

[paulschreiber]

• You can work around this by tapping in the "label" field and tapping "return" on the keyboard
• I tried using <KeyboardAvoidingView> to work around this, but couldn't figure it out. Note that <Modal> (which this uses) already has a <KeyboardAvoidingView>.

[knipec]

Triage notes:

• From Courtney: Using some other sort of layout other than a modal would be a fine option, like an overlay sheet
• Let's try to solve this more generally, not just for this particular screen
• Ruxandra had a similar issue -- we added a scrolling container to the element in that case, but not sure that will work for a modal. Maybe we shouldn't add inputs in modals? Unknown.
• Similar issue: https://stackoverflow.com/questions/64961683/in-react-native-how-can-i-use-keyboardavoidingview-with-a-modal-in-ios