fix: title flash when resizing (#6481)

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/cover_title.dart

@@ -1,6 +1,7 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/application/document_appearance_cubit.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/shared_context/shared_context.dart';
+import 'package:appflowy/plugins/document/presentation/editor_style.dart';
 import 'package:appflowy/shared/text_field/text_filed_with_metric_lines.dart';
 import 'package:appflowy/workspace/application/appearance_defaults.dart';
 import 'package:appflowy/workspace/application/view/view_bloc.dart';
@@ -16,11 +17,9 @@ class CoverTitle extends StatelessWidget {
   const CoverTitle({
     super.key,
     required this.view,
-    required this.offset,
   });
 
   final ViewPB view;
-  final double offset;
 
   @override
   Widget build(BuildContext context) {
@@ -28,7 +27,6 @@ class CoverTitle extends StatelessWidget {
       create: (context) => ViewBloc(view: view)..add(const ViewEvent.initial()),
       child: _InnerCoverTitle(
         view: view,
-        offset: offset,
       ),
     );
   }
@@ -37,11 +35,9 @@ class CoverTitle extends StatelessWidget {
 class _InnerCoverTitle extends StatefulWidget {
   const _InnerCoverTitle({
     required this.view,
-    required this.offset,
   });
 
   final ViewPB view;
-  final double offset;
 
   @override
   State<_InnerCoverTitle> createState() => _InnerCoverTitleState();
@@ -50,6 +46,7 @@ class _InnerCoverTitle extends StatefulWidget {
 class _InnerCoverTitleState extends State<_InnerCoverTitle> {
   final titleTextController = TextEditingController();
   final titleFocusNode = FocusNode();
+
   late final editorContext = context.read<SharedEditorContext>();
   late final editorState = context.read<EditorState>();
   bool isTitleFocused = false;
@@ -99,12 +96,14 @@ class _InnerCoverTitleState extends State<_InnerCoverTitle> {
         .textTheme
         .bodyMedium!
         .copyWith(fontSize: 38.0, fontWeight: FontWeight.w700);
+    final width = context.read<DocumentAppearanceCubit>().state.width;
     return BlocConsumer<ViewBloc, ViewState>(
       listener: _onListen,
       builder: (context, state) {
         final appearance = context.read<DocumentAppearanceCubit>().state;
         return Container(
-          padding: EdgeInsets.symmetric(horizontal: widget.offset),
+          padding: EditorStyleCustomizer.documentPaddingWithOptionMenu,
+          constraints: BoxConstraints(maxWidth: width),
           child: Theme(
             data: Theme.of(context).copyWith(
               textSelectionTheme: TextSelectionThemeData(

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/document_cover_widget.dart

@@ -168,35 +168,45 @@ class _DocumentCoverWidgetState extends State<DocumentCoverWidget> {
                     onChangeCover: (type, details) =>
                         _saveIconOrCover(cover: (type, details)),
                   ),
-                // don't render the icon if the offset is 0
-                if (hasIcon && offset != 0)
-                  Positioned(
-                    left: offset,
+                _buildCoverIcon(
+                  context,
+                  constraints,
+                  offset,
+                ),
+              ],
+            ),
+            Padding(
+              padding: const EdgeInsets.only(bottom: 12.0),
+              child: CoverTitle(
+                view: widget.view,
+              ),
+            ),
+          ],
+        );
+      },
+    );
+  }
+
+  Widget _buildCoverIcon(
+    BuildContext context,
+    BoxConstraints constraints,
+    double offset,
+  ) {
+    if (!hasIcon || offset == 0) {
+      return const SizedBox.shrink();
+    }
+
+    return Positioned(
       // if hasCover, there shouldn't be icons present so the icon can
       // be closer to the bottom.
-                    bottom: hasCover
-                        ? kToolbarHeight - kIconHeight / 2
-                        : kToolbarHeight,
+      left: offset,
+      bottom: hasCover ? kToolbarHeight - kIconHeight / 2 : kToolbarHeight,
       child: DocumentIcon(
         editorState: widget.editorState,
         node: widget.node,
         icon: viewIcon,
         onChangeIcon: (icon) => _saveIconOrCover(icon: icon),
       ),
-                  ),
-              ],
-            ),
-            if (offset != 0)
-              Padding(
-                padding: const EdgeInsets.only(bottom: 12.0),
-                child: CoverTitle(
-                  view: widget.view,
-                  offset: offset,
-                ),
-              ),
-          ],
-        );
-      },
     );
   }
 

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_style.dart

@@ -43,7 +43,15 @@ class EditorStyleCustomizer {
 
   static EdgeInsets get documentPadding => UniversalPlatform.isMobile
       ? const EdgeInsets.symmetric(horizontal: 24)
-      : const EdgeInsets.only(left: 40, right: 40 + 44);
+      : EdgeInsets.only(
+          left: 40,
+          right: 40 + EditorStyleCustomizer.optionMenuWidth,
+        );
+
+  static EdgeInsets get documentPaddingWithOptionMenu =>
+      documentPadding + EdgeInsets.only(left: optionMenuWidth);
+
+  static double get optionMenuWidth => UniversalPlatform.isMobile ? 0 : 44;
 
   EditorStyle style() {
     if (UniversalPlatform.isDesktopOrWeb) {