minor

src/app/fyle/add-edit-mileage/add-edit-mileage.page.ts

@@ -2975,6 +2975,7 @@ export class AddEditMileagePage implements OnInit {
   async openCommuteDetailsModal(): Promise<Subscription> {
     const commuteDetailsModal = await this.modalController.create({
       component: FySelectCommuteDetailsComponent,
+      mode: 'ios',
     });
 
     await commuteDetailsModal.present();

src/app/fyle/dashboard/tasks/tasks.component.ts

@@ -681,6 +681,7 @@ export class TasksComponent implements OnInit {
   async onCommuteDetailsTaskClick(): Promise<void> {
     const commuteDetailsModal = await this.modalController.create({
       component: FySelectCommuteDetailsComponent,
+      mode: 'ios',
     });
 
     await commuteDetailsModal.present();

src/app/fyle/my-profile/my-profile.page.ts

@@ -423,6 +423,7 @@ export class MyProfilePage {
       componentProps: {
         existingCommuteDetails: this.commuteDetails,
       },
+      mode: 'ios',
     });
 
     await commuteDetailsModal.present();

src/app/shared/components/fy-select-commute-details/fy-select-commute-details.component.html

@@ -1,5 +1,5 @@
 <ion-header mode="md">
-  <ion-toolbar class="text-center fy-modal-toolbar">
+  <ion-toolbar class="text-center commute-details--toolbar fy-modal-toolbar">
     <ion-buttons slot="start">
       <ion-button (click)="close()">
         <mat-icon class="fy-icon-close" svgIcon="cross"></mat-icon>

src/app/shared/components/fy-select-commute-details/fy-select-commute-details.component.scss

@@ -1,6 +1,10 @@
 @import '../../../../theme/colors.scss';
 
 .commute-details {
+  &--toolbar {
+    margin-top: calc(env(safe-area-inset-top));
+  }
+
   &--header {
     &-save {
       --color: $brand-primary;