fix: mobile view and field list bottom sheets (#4727)

frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/show_mobile_bottom_sheet.dart

@@ -3,6 +3,25 @@ import 'package:appflowy/plugins/base/drag_handler.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart' hide WidgetBuilder;
 import 'package:flutter/material.dart';
 
+extension BottomSheetPaddingExtension on BuildContext {
+  /// Calculates the total amount of space that should be added to the bottom of
+  /// a bottom sheet
+  double bottomSheetPadding({
+    bool ignoreViewPadding = true,
+  }) {
+    final viewPadding = MediaQuery.viewPaddingOf(this);
+    final viewInsets = MediaQuery.viewInsetsOf(this);
+    double bottom = 0.0;
+    if (!ignoreViewPadding) {
+      bottom += viewPadding.bottom;
+    }
+    // for screens with 0 view padding, add some even more space
+    bottom += viewPadding.bottom == 0 ? 28.0 : 16.0;
+    bottom += viewInsets.bottom;
+    return bottom;
+  }
+}
+
 Future<T?> showMobileBottomSheet<T>(
   BuildContext context, {
   required WidgetBuilder builder,
@@ -120,12 +139,11 @@ Future<T?> showMobileBottomSheet<T>(
       }
 
       // ----- content area -----
-      // make sure the keyboard won't cover the content
+      // add content padding and extra bottom padding
       children.add(
         Padding(
-          padding: padding.copyWith(
+          padding:
-            bottom: padding.bottom + MediaQuery.of(context).viewInsets.bottom,
+              padding + EdgeInsets.only(bottom: context.bottomSheetPadding()),
-          ),
           child: child,
         ),
       );
@@ -135,13 +153,6 @@ Future<T?> showMobileBottomSheet<T>(
         return children.first;
       }
 
-      // add default padding
-      // for full screen bottom sheet, the padding should be 16.0
-      // for non full screen bottom sheet, the padding should be 28.0
-      children.add(
-        VSpace(MediaQuery.of(context).padding.bottom == 0 ? 28.0 : 16.0),
-      );
-
       return useSafeArea
           ? SafeArea(
               child: Column(

frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_field_list.dart

@@ -2,6 +2,7 @@ import 'dart:ui';
 
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
 import 'package:appflowy/mobile/presentation/widgets/flowy_option_tile.dart';
 import 'package:appflowy/plugins/database/application/database_controller.dart';
 import 'package:appflowy/plugins/database/application/field/field_controller.dart';
@@ -61,6 +62,7 @@ class _MobileDatabaseFieldListBody extends StatelessWidget {
           if (state.fieldContexts.isEmpty) {
             return const SizedBox.shrink();
           }
+
           final fields = [...state.fieldContexts];
           final firstField = fields.removeAt(0);
           final firstCell = DatabaseFieldListTile(
@@ -124,10 +126,16 @@ class _MobileDatabaseFieldListBody extends StatelessWidget {
                     children: [
                       _divider(),
                       _NewDatabaseFieldTile(viewId: viewId),
-                      const VSpace(24),
+                      VSpace(
+                        context.bottomSheetPadding(
+                          ignoreViewPadding: false,
+                        ),
+                      ),
                     ],
                   )
-                : const VSpace(24),
+                : VSpace(
+                    context.bottomSheetPadding(ignoreViewPadding: false),
+                  ),
             itemCount: cells.length,
             itemBuilder: (context, index) => cells[index],
           );

frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_view_list.dart

@@ -44,8 +44,10 @@ class MobileDatabaseViewList extends StatelessWidget {
               useFilledDoneButton: false,
               onDone: (context) => Navigator.pop(context),
             ),
-            SingleChildScrollView(
+            Expanded(
-              child: Column(
+              child: ListView(
+                shrinkWrap: true,
+                padding: EdgeInsets.zero,
                 children: [
                   ...views.mapIndexed(
                     (index, view) => MobileDatabaseViewListButton(
@@ -55,6 +57,9 @@ class MobileDatabaseViewList extends StatelessWidget {
                   ),
                   const VSpace(20),
                   const MobileNewDatabaseViewButton(),
+                  VSpace(
+                    context.bottomSheetPadding(ignoreViewPadding: false),
+                  ),
                 ],
               ),
             ),

frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/mobile_select_option_editor.dart

@@ -480,7 +480,11 @@ class _MoreOptionsState extends State<_MoreOptions> {
   Widget _buildDeleteButton(BuildContext context) {
     return FlowyOptionTile.text(
       text: LocaleKeys.button_delete.tr(),
-      leftIcon: const FlowySvg(FlowySvgs.m_delete_s),
+      textColor: Theme.of(context).colorScheme.error,
+      leftIcon: FlowySvg(
+        FlowySvgs.m_delete_s,
+        color: Theme.of(context).colorScheme.error,
+      ),
       onTap: widget.onDelete,
     );
   }