Fix : Add an Appointment modal UI and scrolling behaviour#190
Fix : Add an Appointment modal UI and scrolling behaviour#190swathi2006 wants to merge 6 commits intoAOSSIE-Org:mainfrom
Conversation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughWrapped the Add Appointment modal content in a Platform-aware KeyboardAvoidingView, adjusted ScrollView keyboard/content props and modal padding/maxHeight, removed Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Modal
participant KAV as KeyboardAvoidingView
participant Scroll as ScrollView
participant Inputs as FormInputs
participant Keyboard as SystemKeyboard
User->>Modal: Open "Add Appointment"
Modal->>KAV: Render modal content inside KAV
KAV->>Scroll: Wrap form in ScrollView (contentContainerStyle set)
User->>Inputs: Focus text input
Inputs->>Keyboard: Request keyboard
Keyboard-->>KAV: Keyboard appears
KAV->>Scroll: Adjust layout (behavior: ios -> padding, others -> height)
Scroll->>Inputs: Ensure focused input is visible / allow scrolling
User->>Inputs: Type / scroll form
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
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, },
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.
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
|
@coderabbitai approve |
✅ Actions performedComments resolved. Auto-approval is disabled; enable |
|
Hi @shashbha14 , |
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