fix responsiveness issues

component/bookingMenuPage/bookingConfirmationPage.tsx

@@ -19,8 +19,8 @@ const BookingConfirmationPage = () => {
             style={{ flex: 1, backgroundColor: 'white' }}
             edges={['top', 'left', 'right']}
         >
-            <ScrollView className="flex-1">
-                <View className="h-[50vh]">
+            <ScrollView className="flex-1" showsVerticalScrollIndicator={false}>
+                <View className="flex-1">
                     <View className="pl-8 pt-8">
                         <Pressable
                             style={{ alignSelf: 'flex-start' }}
@@ -36,18 +36,19 @@ const BookingConfirmationPage = () => {
                         </Pressable>
                         <Text className="text-3xl mt-8">確認您的預約</Text>
                     </View>
+
                     <View className="flex-1 mt-4 mx-[5%]">
-                        <View className="flex-1 flex-row items-center ">
+                        <View className="flex-1 flex-row items-center pb-3">
                             <View className="flex-1 flex-column">
                                 <Text
                                     style={styles.grayColor}
-                                    className="text-xs "
+                                    className="text-base"
                                 >
                                     日期
                                 </Text>
                                 <Text
                                     style={styles.greenColor}
-                                    className="text-5xl text-center pt-2"
+                                    className="text-6xl text-center  pt-2"
                                 >
                                     3月14
                                 </Text>
@@ -55,37 +56,40 @@ const BookingConfirmationPage = () => {
                             <View className="flex-1 flex-column">
                                 <Text
                                     style={styles.grayColor}
-                                    className="text-xs pl-7"
+                                    className="text-base pl-7"
                                 >
                                     時間
                                 </Text>
                                 <Text
                                     style={styles.greenColor}
-                                    className="text-5xl text-center pt-2"
+                                    className="text-6xl text-center pt-2"
                                 >
                                     15:15
                                 </Text>
                             </View>
                         </View>
-                        <View className="flex-1 flex-column justify-center space-y-1">
-                            <Text style={styles.grayColor} className="text-xs">
+                        <View className="flex-1 flex-column justify-center space-y-1 pb-3">
+                            <Text
+                                style={styles.grayColor}
+                                className="text-base"
+                            >
                                 充電地點
                             </Text>
                             <Text
                                 style={styles.greenColor}
-                                className="text-2xl"
+                                className="text-3xl "
                             >
                                 上環街市充電站
                             </Text>
-                            <Text style={styles.grayColor} className="text-lg">
+                            <Text style={styles.grayColor} className="text-sm">
                                 香港上環皇后大道中345號
                             </Text>
                         </View>
-                        <View className="flex-1 flex-row items-center">
+                        <View className="flex-1 flex-row  pb-3  ">
                             <View className="flex-column flex-1">
                                 <Text
                                     style={styles.grayColor}
-                                    className="text-xs"
+                                    className="text-base"
                                 >
                                     方案
                                 </Text>
@@ -105,7 +109,7 @@ const BookingConfirmationPage = () => {
                             <View className="flex-column flex-1">
                                 <Text
                                     style={styles.grayColor}
-                                    className="text-xs"
+                                    className="text-base"
                                 >
                                     車輛
                                 </Text>
@@ -120,7 +124,7 @@ const BookingConfirmationPage = () => {
                     </View>
                 </View>
                 <View className="w-full h-1 bg-[#DBE4E8]" />
-                <View className="h-[50vh] mx-[5%]">
+                <View className="flex-1 mx-[5%]">
                     <Text className="text-xl py-4">收費概要</Text>
                     <View className="flex-row justify-between">
                         <Text className="text-base">充電費用</Text>

component/bookingMenuPage/bookingSuccessPage.tsx

@@ -20,20 +20,21 @@ const BookingSuccessPage = () => {
             edges={['top', 'left', 'right']}
         >
             <ScrollView className="flex-1">
-                <View className="h-[42vh] ">
+                <View>
                     <View className="flex-row pl-8 pt-8 space-x-4 items-center">
                         <TickLogoSvg />
                         <Text className="text-3xl">成功預約</Text>
                     </View>
+
                     <View
-                        className="flex-1 m-4"
+                        className="m-4"
                         style={{
                             borderWidth: 1,
                             borderColor: '#EEEEEE',
                             borderRadius: 12
                         }}
                     >
-                        <View className="flex-1 mt-4 mx-[5%]">
+                        <View className="space-y-3  py-4 mx-[5%]">
                             <View className="flex-1 flex-row items-center ">
                                 <View className="flex-1 flex-column">
                                     <Text
@@ -44,9 +45,9 @@ const BookingSuccessPage = () => {
                                     </Text>
                                     <Text
                                         style={styles.greenColor}
-                                        className="text-3xl  pt-2"
+                                        className="text-4xl  pt-2 "
                                     >
-                                        3月14． 16:15
+                                        3月14 · 16:15
                                     </Text>
                                 </View>
                             </View>
@@ -107,9 +108,11 @@ const BookingSuccessPage = () => {
                                 </View>
                             </View>
                         </View>
+
                     </View>
                 </View>
-                <View className="min-h-[50vh] h-[70vh] mx-[5%]">
+
+                <View className="mx-[5%]">
                     <Text className="text-xl py-4">收費概要</Text>
                     <View className="flex-row justify-between">
                         <Text className="text-base">充電費用</Text>
@@ -170,7 +173,7 @@ const BookingSuccessPage = () => {
                         </View>
                     </View>
 
-                    <View className="mt-4">
+                    <View className="my-4 pb-8">
                         <NormalButton
                             title={
                                 <Text