fix: android navigation bar issues (#5294)

frontend/appflowy_flutter/lib/mobile/presentation/base/mobile_view_page.dart

@@ -1,6 +1,7 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/application/base/mobile_view_page_bloc.dart';
 import 'package:appflowy/mobile/application/page_style/document_page_style_bloc.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar/app_bar.dart';
 import 'package:appflowy/mobile/presentation/base/view_page/app_bar_buttons.dart';
 import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_state_container.dart';
 import 'package:appflowy/plugins/base/emoji/emoji_text.dart';
@@ -103,19 +104,21 @@ class _MobileViewPageState extends State<MobileViewPage> {
     ViewPB? view,
     Widget child,
   ) {
-    final isImmersiveMode = view?.layout.isDocumentView ?? false;
+    final isDocument = view?.layout.isDocumentView ?? false;
     final title = _buildTitle(context, view);
-    final appBar = MobileViewPageImmersiveAppBar(
+    final actions = _buildAppBarActions(context, view);
-      preferredSize: Size(
+    final appBar = isDocument
-        double.infinity,
+        ? MobileViewPageImmersiveAppBar(
-        AppBarTheme.of(context).toolbarHeight ?? kToolbarHeight,
+            preferredSize: Size(
-      ),
+              double.infinity,
-      title: title,
+              AppBarTheme.of(context).toolbarHeight ?? kToolbarHeight,
-      isImmersiveMode: isImmersiveMode,
+            ),
-      appBarOpacity: _appBarOpacity,
+            title: title,
-      actions: _buildAppBarActions(context, view),
+            appBarOpacity: _appBarOpacity,
-    );
+            actions: actions,
-    final body = isImmersiveMode
+          )
+        : FlowyAppBar(title: title, actions: actions);
+    final body = isDocument
         ? Builder(
             builder: (context) {
               _rebuildScrollNotificationObserver(context);
@@ -124,7 +127,7 @@ class _MobileViewPageState extends State<MobileViewPage> {
           )
         : child;
     return Scaffold(
-      extendBodyBehindAppBar: isImmersiveMode,
+      extendBodyBehindAppBar: isDocument,
       appBar: appBar,
       body: body,
     );
@@ -190,12 +193,12 @@ class _MobileViewPageState extends State<MobileViewPage> {
           ),
           const HSpace(16.0),
           DocumentSyncIndicator(view: view),
-          const HSpace(8.0),
+          const HSpace(12.0),
         ]);
       } else {
         actions.addAll([
           DatabaseSyncIndicator(view: view),
-          const HSpace(8.0),
+          const HSpace(12.0),
         ]);
       }
     }

frontend/appflowy_flutter/lib/mobile/presentation/base/view_page/app_bar_buttons.dart

@@ -1,5 +1,6 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/application/base/mobile_view_page_bloc.dart';
 import 'package:appflowy/mobile/application/page_style/document_page_style_bloc.dart';
 import 'package:appflowy/mobile/presentation/base/app_bar/app_bar.dart';
 import 'package:appflowy/mobile/presentation/base/app_bar/app_bar_actions.dart';
@@ -21,13 +22,11 @@ class MobileViewPageImmersiveAppBar extends StatelessWidget
   const MobileViewPageImmersiveAppBar({
     super.key,
     required this.preferredSize,
-    required this.isImmersiveMode,
     required this.appBarOpacity,
     required this.title,
     required this.actions,
   });
 
-  final bool isImmersiveMode;
   final ValueListenable appBarOpacity;
   final Widget title;
   final List<Widget> actions;
@@ -37,13 +36,6 @@ class MobileViewPageImmersiveAppBar extends StatelessWidget
 
   @override
   Widget build(BuildContext context) {
-    if (!isImmersiveMode) {
-      FlowyAppBar(
-        title: title,
-        actions: actions,
-      );
-    }
-
     return ValueListenableBuilder(
       valueListenable: appBarOpacity,
       builder: (_, opacity, __) => FlowyAppBar(
@@ -68,7 +60,8 @@ class MobileViewPageImmersiveAppBar extends StatelessWidget
         icon: FlowySvgs.m_app_bar_back_s,
         dimension: 30.0,
         iconPadding: 6.0,
-        isImmersiveMode: isImmersiveMode,
+        isImmersiveMode:
+            context.read<MobileViewPageBloc>().state.isImmersiveMode,
         appBarOpacity: appBarOpacity,
       ),
     );

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/cover/document_immersive_cover.dart

@@ -162,9 +162,12 @@ class _DocumentImmersiveCoverState extends State<DocumentImmersiveCover> {
 
   Widget _buildIcon(BuildContext context, String icon) {
     return GestureDetector(
-      child: EmojiIconWidget(
+      child: ConstrainedBox(
-        emoji: icon,
+        constraints: const BoxConstraints.tightFor(width: 34.0),
-        emojiSize: 26,
+        child: EmojiIconWidget(
+          emoji: icon,
+          emojiSize: 26,
+        ),
       ),
       onTap: () async {
         final result = await context.push<EmojiPickerResult>(