It looks like long multiline forms in the mobile app are clipped in the form field, in this case with lots of short lines. If desktop shows the full content, the backend data is still there. I'm assuming the behavior happens on iOS and Android since they both use React Native, which you guys switched to a few years ago.
The current TextInput implementation probably uses a fixed height or limited auto-grow without enabling scrolling past the maximum height. Any parent container constraints or missing scrollEnabled could cause it as well. Android has a vertical alignment thing that may also cause it if not accounted for.
Should be an easy fix. Looking at the React Native reference:
- TextInput with multiline={true}
- Dynamically grow height using onContentSizeChange up to a defined maxHeight
- Enable scrolling past maxHeight (scrollEnabled={true})
- Set textAlignVertical="top" for Android alignment
- Wrap in KeyboardAvoidingView and ScrollView if the form spans multiple fields or page height
Example:
<TextInput
multiline
value={value}
onChangeText={setValue}
onContentSizeChange={e =>
setHeight(Math.min(e.nativeEvent.contentSize.height, 400)) // auto-grow until max
}
scrollEnabled={height >= 400} // allow scrolling past max
textAlignVertical="top" // fix Android vertical alignment
style={{ height, minHeight: 100, maxHeight: 400, borderWidth: 1, borderColor: '#ccc', padding: 10 }}
/>
That would prevent clipping, works on iOS and Android, maintain the layout, and handle keyboard interactions and flex layouts correctly.
Or I could be completely wrong about the exact cause, but it should still be an easy fix since it's certainly a css issue.
As for QA, this is the kind of issue that can slip past all of the non-manual / device testing test methods, including E2E because simulated keyboard and layout stuff can behave differently from real devices. Even then, it's an edge case for manual testing.