Fix : Add an Appointment modal UI and scrolling behaviour#190
Fix : Add an Appointment modal UI and scrolling behaviour#190swathi2006 wants to merge 4 commits intoAOSSIE-Org:mainfrom
Conversation
📝 WalkthroughWalkthroughWrapped the Add Appointment modal form in a Platform-aware KeyboardAvoidingView, removed Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
⚔️ Resolve merge conflicts (beta)
No actionable comments were generated in the recent review. 🎉 Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@Frontend/src/Screens/CalendarScreen.jsx`:
- Around line 426-430: The Modal was made opaque by commenting out
transparent={true}, which hides the overlay and combined with modalContent's
flex:1 makes the dialog full-screen; either restore transparent={true} on the
Modal (so the overlay rgba(0,0,0,0.5) and centered dialog work) and handle
keyboard by wrapping the modal inner content with KeyboardAvoidingView (or
adjust styles) or, if you intend a full-screen form, remove the overlay wrapper
and ensure modalContent is styled for full-screen form layout; update the Modal
invocation (isAddAppointmentModalVisible, hideAddAppointmentModal) and the
modalContent/overlay structure accordingly.
- Around line 835-849: The modalContent style uses flex: 1 which makes the
dialog expand to full height and breaks formatting; replace flex: 1 with a
maxHeight (e.g., maxHeight: '90%') so the dialog can grow with keyboard input
but remain centered, remove or replace the "// ⭐ IMPORTANT" comment with a
concise explanation (e.g., "// allow vertical growth but don't fill screen") and
fix the trailing brace/comma formatting so the object closes on a single line;
locate and update the modalContent style object in CalendarScreen.jsx
accordingly.
🧹 Nitpick comments (2)
Frontend/src/Screens/CalendarScreen.jsx (2)
454-458: Inconsistent indentation on the new ScrollView props.The new props have mismatched leading whitespace —
contentContainerStyleis indented with extra spaces (16),keyboardShouldPersistTapsdifferently, andshowsVerticalScrollIndicatorwith yet another indent. This harms readability.Also, for a keyboard-aware scrolling form, consider wrapping the modal content with
KeyboardAvoidingView(withbehavior="padding"on iOS) instead of relying solely onScrollView— the ScrollView alone won't automatically scroll the focused input into view on all platforms.
905-907: Minor formatting: multiple properties on one line.Split for readability:
Suggested format
formContainer: { - marginBottom: 20,paddingBottom:20, + marginBottom: 20, + paddingBottom: 20, },
| modalContent: { | ||
| backgroundColor: '#fff', | ||
| borderRadius: 24, | ||
| paddingLeft: 24, | ||
| paddingRight:24, | ||
| width: '100%', | ||
| maxWidth: 400, | ||
| flex: 1, // ⭐ IMPORTANT | ||
| shadowColor: '#000', | ||
| shadowOffset: {width: 0, height: 10}, | ||
| shadowOpacity: 0.15, | ||
| shadowRadius: 20, | ||
| elevation: 10, | ||
| } | ||
| , |
There was a problem hiding this comment.
flex: 1 makes the modal content fill the entire screen; formatting is broken.
-
flex: 1causesmodalContentto stretch to fill its parent, turning the dialog into a full-height panel. If a centered dialog is intended, usemaxHeight(e.g.,maxHeight: '90%') instead offlex: 1so content can grow with the keyboard but still look like a modal. -
The
// ⭐ IMPORTANTcomment doesn't explain why it's important — replace with a meaningful comment or remove it. -
The closing
}and,on separate lines (848–849) is malformed formatting.
Suggested fix (dialog that grows but doesn't fill the screen)
modalContent: {
backgroundColor: '#fff',
borderRadius: 24,
- paddingLeft: 24,
- paddingRight:24,
+ paddingHorizontal: 24,
width: '100%',
maxWidth: 400,
- flex: 1, // ⭐ IMPORTANT
+ maxHeight: '90%',
shadowColor: '#000',
shadowOffset: {width: 0, height: 10},
shadowOpacity: 0.15,
shadowRadius: 20,
elevation: 10,
-}
-,
+},🤖 Prompt for AI Agents
In `@Frontend/src/Screens/CalendarScreen.jsx` around lines 835 - 849, The
modalContent style uses flex: 1 which makes the dialog expand to full height and
breaks formatting; replace flex: 1 with a maxHeight (e.g., maxHeight: '90%') so
the dialog can grow with keyboard input but remain centered, remove or replace
the "// ⭐ IMPORTANT" comment with a concise explanation (e.g., "// allow
vertical growth but don't fill screen") and fix the trailing brace/comma
formatting so the object closes on a single line; locate and update the
modalContent style object in CalendarScreen.jsx accordingly.
Removed commented-out transparent prop from Modal.
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
Frontend/src/Screens/CalendarScreen.jsx (1)
453-542:⚠️ Potential issue | 🟠 MajorAction buttons are now inside the ScrollView — consider wrapping with
KeyboardAvoidingViewfor iOS.Moving the "Save" and "Cancel" buttons inside the
ScrollView(closed at line 542) is reasonable so users can scroll to them when the keyboard is open. However, this PR's objective is keyboard-aware behavior, yet there is noKeyboardAvoidingViewwrapping the modal content. On iOS, the keyboard does not automatically resize the modal content the way Android'swindowSoftInputModecan — withoutKeyboardAvoidingView, the bottom of the form may still be obscured on iOS.A typical pattern:
import { KeyboardAvoidingView, Platform } from 'react-native'; <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={{ flex: 1 }} > <ScrollView ...> {/* form + buttons */} </ScrollView> </KeyboardAvoidingView>
🤖 Fix all issues with AI agents
In `@Frontend/src/Screens/CalendarScreen.jsx`:
- Around line 904-906: The ScrollView is using the styles.formContainer object
(which currently includes paddingBottom: 20) as its style prop, but
paddingBottom on the ScrollView frame doesn't add scrollable space; move
paddingBottom from the formContainer style into the ScrollView's
contentContainerStyle instead. Edit the style object named formContainer to
remove paddingBottom and keep marginBottom, then update the ScrollView where
styles.formContainer is passed (the component rendering the ScrollView) to add
contentContainerStyle={{ paddingBottom: 20 }} (or merge with any existing
contentContainerStyle) so the bottom of the scrollable content gets proper
padding.
🧹 Nitpick comments (1)
Frontend/src/Screens/CalendarScreen.jsx (1)
455-457: Inconsistent indentation on ScrollView props.The three props have mismatched leading whitespace (
contentContainerStyleis indented further thankeyboardShouldPersistTaps, which differs fromshowsVerticalScrollIndicator). This is a minor formatting nit but hurts readability.<ScrollView style={styles.formContainer} - contentContainerStyle={{ flexGrow: 1 }} - keyboardShouldPersistTaps="handled" - showsVerticalScrollIndicator={false}> + contentContainerStyle={{flexGrow: 1}} + keyboardShouldPersistTaps="handled" + showsVerticalScrollIndicator={false}>
Added KeyboardAvoidingView to improve keyboard handling on iOS devices and adjusted ScrollView padding.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@Frontend/src/Screens/CalendarScreen.jsx`:
- Around line 455-458: KeyboardAvoidingView in CalendarScreen.jsx is currently
passed behavior={Platform.OS === 'ios' ? 'padding' : undefined}, which makes it
a no-op on Android; change the prop to use 'height' on Android (e.g.
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}) so it actually adjusts
layout on Android, or alternatively enable
android:windowSoftInputMode="adjustResize" in the Android manifest if you prefer
handling it at the native config level.
🧹 Nitpick comments (1)
Frontend/src/Screens/CalendarScreen.jsx (1)
460-464: Inconsistent indentation makes the nesting hard to follow.The
ScrollViewprops use mixed indentation (some lines indented 16 spaces, the closing>at 15 spaces). This whole block (through to the closing tags at lines 549-550) has inconsistent indentation that obscures the component nesting structure.
1 participant
Closes #188
📝 Description
This PR improves the usability of the "Add Appointment" modal when the keyboard opens .
Previously:
Now:
🔧 Changes Made
📷 Screenshots or Visual Changes (if applicable)
🤝 Collaboration
Collaborated with: Self
✅ Checklist
Summary by CodeRabbit
Style
Bug Fixes / Usability