fix: UI layout issue when date select panel popup

frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_cell.dart

@@ -65,23 +65,17 @@ class _DateCellState extends GridCellState<GridDateCell> {
         builder: (context, state) {
           return AppFlowyPopover(
             controller: _popover,
-            offset: const Offset(0, 20),
+            triggerActions: PopoverTriggerFlags.none,
             direction: PopoverDirection.bottomWithLeftAligned,
             constraints: BoxConstraints.loose(const Size(320, 500)),
+            margin: EdgeInsets.zero,
             child: SizedBox.expand(
               child: GestureDetector(
                 behavior: HitTestBehavior.opaque,
-                onTap: () => _showCalendar(context),
-                child: MouseRegion(
-                  opaque: false,
-                  cursor: SystemMouseCursors.click,
-                  child: Align(
-                    alignment: alignment,
-                    child: FlowyText.medium(
-                      state.dateStr,
-                      fontSize: 12,
-                    ),
-                  ),
+                onTap: () => _popover.show(),
+                child: Align(
+                  alignment: alignment,
+                  child: FlowyText.medium(state.dateStr, fontSize: 12),
                 ),
               ),
             ),
@@ -101,10 +95,6 @@ class _DateCellState extends GridCellState<GridDateCell> {
     );
   }
 
-  void _showCalendar(BuildContext context) {
-    _popover.show();
-  }
-
   @override
   Future<void> dispose() async {
     _cellBloc.close();

frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart

@@ -2,6 +2,7 @@ import 'package:app_flowy/generated/locale_keys.g.dart';
 import 'package:app_flowy/plugins/grid/application/cell/date_cal_bloc.dart';
 import 'package:app_flowy/plugins/grid/application/field/type_option/type_option_context.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
+import 'package:dartz/dartz.dart' show Either;
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/image.dart';
 import 'package:flowy_infra/theme.dart';
@@ -11,6 +12,7 @@ import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/widget/rounded_input_field.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flowy_sdk/log.dart';
+import 'package:flowy_sdk/protobuf/flowy-error/errors.pbserver.dart';
 import 'package:flowy_sdk/protobuf/flowy-grid/date_type_option.pb.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -39,34 +41,37 @@ class DateCellEditor extends StatefulWidget {
 }
 
 class _DateCellEditor extends State<DateCellEditor> {
-  DateTypeOptionPB? _dateTypeOptionPB;
-
-  @override
-  void initState() {
-    super.initState();
-    _fetchData();
-  }
-
-  _fetchData() async {
-    final result = await widget.cellController
-        .getFieldTypeOption(DateTypeOptionDataParser());
-
-    result.fold((dateTypeOptionPB) {
-      setState(() {
-        _dateTypeOptionPB = dateTypeOptionPB;
-      });
-    }, (err) => Log.error(err));
-  }
-
   @override
   Widget build(BuildContext context) {
-    if (_dateTypeOptionPB == null) {
-      return Container();
-    }
+    return FutureBuilder<Either<dynamic, FlowyError>>(
+      future: widget.cellController.getFieldTypeOption(
+        DateTypeOptionDataParser(),
+      ),
+      builder: (BuildContext context, snapshot) {
+        if (snapshot.hasData) {
+          return _buildWidget(snapshot);
+        } else {
+          return const SizedBox();
+        }
+      },
+    );
+  }
 
-    return _CellCalendarWidget(
-      cellContext: widget.cellController,
-      dateTypeOptionPB: _dateTypeOptionPB!,
+  Widget _buildWidget(AsyncSnapshot<Either<dynamic, FlowyError>> snapshot) {
+    return snapshot.data!.fold(
+      (dateTypeOptionPB) {
+        return Padding(
+          padding: const EdgeInsets.all(12),
+          child: _CellCalendarWidget(
+            cellContext: widget.cellController,
+            dateTypeOptionPB: dateTypeOptionPB,
+          ),
+        );
+      },
+      (err) {
+        Log.error(err);
+        return const SizedBox();
+      },
     );
   }
 }

frontend/app_flowy/packages/flowy_infra_ui/lib/flowy_infra_ui.dart

@@ -9,4 +9,4 @@ export 'src/flowy_overlay/flowy_overlay.dart';
 export 'src/flowy_overlay/list_overlay.dart';
 export 'src/flowy_overlay/option_overlay.dart';
 export 'src/flowy_overlay/flowy_dialog.dart';
-export 'src/flowy_overlay/appflowy_stype_popover.dart';
+export 'src/flowy_overlay/appflowy_popover.dart';

frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/appflowy_stype_popover.dart → frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/appflowy_popover.dart

@@ -1,7 +1,10 @@
-import 'package:flowy_infra_ui/flowy_infra_ui_web.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:flutter/material.dart';
 
+import 'package:flowy_infra/theme.dart';
+import 'package:flowy_infra_ui/style_widget/decoration.dart';
+import 'package:provider/provider.dart';
+
 class AppFlowyPopover extends StatelessWidget {
   final Widget child;
   final PopoverController? controller;
@@ -13,6 +16,7 @@ class AppFlowyPopover extends StatelessWidget {
   final PopoverMutex? mutex;
   final Offset? offset;
   final bool asBarrier;
+  final EdgeInsets margin;
 
   const AppFlowyPopover({
     Key? key,
@@ -26,6 +30,7 @@ class AppFlowyPopover extends StatelessWidget {
     this.offset,
     this.controller,
     this.asBarrier = false,
+    this.margin = const EdgeInsets.all(12),
   }) : super(key: key);
 
   @override
@@ -39,13 +44,44 @@ class AppFlowyPopover extends StatelessWidget {
       triggerActions: triggerActions,
       popupBuilder: (context) {
         final child = popupBuilder(context);
-        debugPrint('$child popover');
-        return OverlayContainer(
+        debugPrint('Show $child popover');
+        return _PopoverContainer(
           constraints: constraints,
-          child: popupBuilder(context),
+          margin: margin,
+          child: child,
         );
       },
       child: child,
     );
   }
 }
+
+class _PopoverContainer extends StatelessWidget {
+  final Widget child;
+  final BoxConstraints? constraints;
+  final EdgeInsets margin;
+  const _PopoverContainer({
+    required this.child,
+    required this.margin,
+    this.constraints,
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = context.watch<AppTheme>();
+    final decoration = FlowyDecoration.decoration(
+      theme.surface,
+      theme.shadowColor.withOpacity(0.15),
+    );
+    return Material(
+      type: MaterialType.transparency,
+      child: Container(
+        padding: margin,
+        decoration: decoration,
+        constraints: constraints,
+        child: child,
+      ),
+    );
+  }
+}

frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/flowy_overlay.dart

@@ -4,7 +4,6 @@ import 'dart:ui';
 import 'package:flowy_infra_ui/src/flowy_overlay/layout.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
-export './overlay_container.dart';
 
 /// Specifies how overlay are anchored to the SourceWidget
 enum AnchorDirection {

frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/list_overlay.dart

@@ -1,5 +1,8 @@
-import 'package:flowy_infra_ui/flowy_infra_ui_web.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
+import 'package:flowy_infra/theme.dart';
+import 'package:flowy_infra_ui/style_widget/decoration.dart';
+import 'package:provider/provider.dart';
 
 class ListOverlayFooter {
   Widget widget;
@@ -96,3 +99,33 @@ class ListOverlay extends StatelessWidget {
     );
   }
 }
+
+const overlayContainerPadding = EdgeInsets.all(12);
+
+class OverlayContainer extends StatelessWidget {
+  final Widget child;
+  final BoxConstraints? constraints;
+  final EdgeInsets padding;
+  const OverlayContainer({
+    required this.child,
+    this.constraints,
+    this.padding = overlayContainerPadding,
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final theme =
+        context.watch<AppTheme?>() ?? AppTheme.fromType(ThemeType.light);
+    return Material(
+      type: MaterialType.transparency,
+      child: Container(
+        padding: padding,
+        decoration: FlowyDecoration.decoration(
+            theme.surface, theme.shadowColor.withOpacity(0.15)),
+        constraints: constraints,
+        child: child,
+      ),
+    );
+  }
+}

frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/overlay_container.dart

@@ -1,34 +0,0 @@
-import 'package:flowy_infra/theme.dart';
-import 'package:flowy_infra_ui/style_widget/decoration.dart';
-import 'package:flutter/material.dart';
-import 'package:provider/provider.dart';
-
-const overlayContainerPadding = EdgeInsets.all(12);
-
-class OverlayContainer extends StatelessWidget {
-  final Widget child;
-  final BoxConstraints? constraints;
-  final EdgeInsets padding;
-  const OverlayContainer({
-    required this.child,
-    this.constraints,
-    this.padding = overlayContainerPadding,
-    Key? key,
-  }) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    final theme =
-        context.watch<AppTheme?>() ?? AppTheme.fromType(ThemeType.light);
-    return Material(
-      type: MaterialType.transparency,
-      child: Container(
-        padding: padding,
-        decoration: FlowyDecoration.decoration(
-            theme.surface, theme.shadowColor.withOpacity(0.15)),
-        constraints: constraints,
-        child: child,
-      ),
-    );
-  }
-}