Skip to content

Fix : Add an Appointment modal UI and scrolling behaviour #190

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
swathi2006 wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Fix : Add an Appointment modal UI and scrolling behaviour #190

Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7659489
Fix : Add an Appointment modal UI and scrolling behaviour
swathi2006 Feb 13, 2026
52de91b
Remove commented transparent prop from Modal
swathi2006 Feb 13, 2026
26c0834
Enhance keyboard handling in CalendarScreen
swathi2006 Feb 15, 2026
bdeef85
Change KeyboardAvoidingView behavior for Android
swathi2006 Feb 15, 2026
1e6d652
Fix KeyboardAvoidingView placement in CalendarScreen
swathi2006 Feb 18, 2026
ca6da31
Increase maxHeight of CalendarScreen to 95%
swathi2006 Feb 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 30 additions & 18 deletions Frontend/src/Screens/CalendarScreen.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import React, {useEffect, useRef, useState} from 'react';
import { KeyboardAvoidingView, Platform } from 'react-native';

import {
View,
Text,
Expand Down Expand Up @@ -425,7 +427,6 @@ const ScheduleScreen = () => {

<Modal
visible={isAddAppointmentModalVisible}
transparent={true}
animationType="fade"
onRequestClose={hideAddAppointmentModal}>
<View style={styles.overlay}>
Expand All @@ -451,13 +452,20 @@ const ScheduleScreen = () => {
</Text>

{/* Form Inputs */}
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
style={{ flex: 1 }}
>

<ScrollView
style={styles.formContainer}
showsVerticalScrollIndicator={false}>
contentContainerStyle={{ flexGrow: 1 , paddingBottom: 20}}
keyboardShouldPersistTaps="handled"
showsVerticalScrollIndicator={false}>
{/* Title Input */}
<View style={styles.inputWrapper}>
<TextInput
placeholder="Appointment title"
placeholder="Appointment Title"
placeholderTextColor="#999"
style={styles.input}
value={newAppointment.title}
Expand Down Expand Up @@ -523,7 +531,7 @@ const ScheduleScreen = () => {
}
/>
</View>
</ScrollView>


{/* Action Buttons */}
<View style={styles.buttonContainer}>
Expand All @@ -538,7 +546,8 @@ const ScheduleScreen = () => {
<Text style={styles.cancelButtonText}>Cancel</Text>
</TouchableOpacity>
</View>

</ScrollView>
</KeyboardAvoidingView>
{/* Decorative Element */}
<View style={styles.decorativeBottom} />
</View>
Expand Down Expand Up @@ -828,20 +837,23 @@ const styles = StyleSheet.create({
justifyContent: 'center',
alignItems: 'center',
padding: 20,

},
modalContent: {
backgroundColor: '#fff',
borderRadius: 24,
padding: 24,
width: '100%',
maxWidth: 400,
maxHeight: '90%',
shadowColor: '#000',
shadowOffset: {width: 0, height: 10},
shadowOpacity: 0.15,
shadowRadius: 20,
elevation: 10,
},
modalContent: {
backgroundColor: '#fff',
borderRadius: 24,
paddingLeft: 24,
paddingRight:24,
width: '100%',
maxWidth: 400,
maxHeight:'90%',
shadowColor: '#000',
shadowOffset: {width: 0, height: 10},
shadowOpacity: 0.15,
shadowRadius: 20,
elevation: 10,
}
,
Comment on lines 844 to 858
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

flex: 1 makes the modal content fill the entire screen; formatting is broken.

  1. flex: 1 causes modalContent to stretch to fill its parent, turning the dialog into a full-height panel. If a centered dialog is intended, use maxHeight (e.g., maxHeight: '90%') instead of flex: 1 so content can grow with the keyboard but still look like a modal.

  2. The // ⭐ IMPORTANT comment doesn't explain why it's important — replace with a meaningful comment or remove it.

  3. 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.

closeButton: {
position: 'absolute',
top: 16,
Expand Down