fix: can't find overlay exists above editabletext

frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/header.dart

@@ -81,7 +81,6 @@ class MenuAppHeader extends StatelessWidget {
           onSecondaryTap: () {
             final actionList = AppDisclosureActionSheet(onSelected: (action) => _handleAction(context, action));
             actionList.show(
-              context,
               context,
               anchorDirection: AnchorDirection.bottomWithCenterAligned,
             );

frontend/app_flowy/lib/workspace/presentation/home/menu/app/section/disclosure_action.dart

@@ -32,7 +32,7 @@ class ViewDisclosureButton extends StatelessWidget
       width: 26,
       onPressed: () {
         onTap();
-        show(context, context);
+        show(context);
       },
       icon: svg("editor/details", color: theme.iconColor),
     );

frontend/app_flowy/lib/workspace/presentation/home/menu/app/section/section.dart

@@ -9,7 +9,6 @@ import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:styled_widget/styled_widget.dart';
 import 'item.dart';
-import 'package:async/async.dart';
 
 class ViewSection extends StatelessWidget {
   final AppDataNotifier appData;

frontend/app_flowy/lib/workspace/presentation/plugins/doc/document.dart

@@ -188,7 +188,6 @@ class DocumentShareButton extends StatelessWidget {
       });
     });
     actionList.show(
-      context,
       context,
       anchorDirection: AnchorDirection.bottomWithCenterAligned,
       anchorOffset: offset,

frontend/app_flowy/lib/workspace/presentation/plugins/doc/src/widget/toolbar/color_picker.dart

@@ -117,15 +117,6 @@ class _FlowyColorButtonState extends State<FlowyColorButton> {
   }
 
   void _showColorPicker() {
-    // FlowyPoppuWindow.show(
-    //   context,
-    //   size: Size(600, 200),
-    //   child: MaterialPicker(
-    //     pickerColor: const Color(0x00000000),
-    //     onColorChanged: (color) => _changeColor(context, color),
-    //   ),
-    // );
-
     final style = widget.controller.getSelectionStyle();
     final values = style.values.where((v) => v.key == Attribute.background.key).map((v) => v.value);
     int initialColor = 0;

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/layout/sizes.dart

@@ -8,13 +8,13 @@ class GridSize {
   static double get footerHeight => 40 * scale;
   static double get leadingHeaderPadding => 30 * scale;
   static double get trailHeaderPadding => 140 * scale;
-  static double get headerContentPadding => 8 * scale;
-  static double get cellContentPadding => 8 * scale;
+  static double get headerContainerPadding => 0 * scale;
+  static double get cellContentPadding => 10 * scale;
 
   //
   static EdgeInsets get headerContentInsets => EdgeInsets.symmetric(
-        horizontal: GridSize.headerContentPadding,
-        vertical: GridSize.headerContentPadding,
+        horizontal: GridSize.headerContainerPadding,
+        vertical: GridSize.headerContainerPadding,
       );
   static EdgeInsets get cellContentInsets => EdgeInsets.symmetric(
         horizontal: GridSize.cellContentPadding,
@@ -23,8 +23,8 @@ class GridSize {
 
   static EdgeInsets get footerContentInsets => EdgeInsets.fromLTRB(
         0,
-        GridSize.headerContentPadding,
-        GridSize.headerContentPadding,
-        GridSize.headerContentPadding,
+        GridSize.headerContainerPadding,
+        GridSize.headerContainerPadding,
+        GridSize.headerContainerPadding,
       );
 }

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/footer/grid_footer.dart

@@ -39,7 +39,7 @@ class _AddRowButton extends StatelessWidget {
       text: const FlowyText.medium('New row', fontSize: 12),
       hoverColor: theme.hover,
       onTap: () => context.read<GridBloc>().add(const GridEvent.createRow()),
-      icon: svg("home/add"),
+      leftIcon: svg("home/add"),
     );
   }
 }

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/header.dart

@@ -61,9 +61,9 @@ class GridHeader extends StatelessWidget {
             child: Row(
               crossAxisAlignment: CrossAxisAlignment.stretch,
               children: [
-                const LeadingHeaderCell(),
+                const _HeaderLeading(),
                 ...headers,
-                const TrailingHeaderCell(),
+                const _HeaderTrailing(),
               ],
             ),
           );
@@ -73,8 +73,8 @@ class GridHeader extends StatelessWidget {
   }
 }
 
-class LeadingHeaderCell extends StatelessWidget {
-  const LeadingHeaderCell({Key? key}) : super(key: key);
+class _HeaderLeading extends StatelessWidget {
+  const _HeaderLeading({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -84,8 +84,8 @@ class LeadingHeaderCell extends StatelessWidget {
   }
 }
 
-class TrailingHeaderCell extends StatelessWidget {
-  const TrailingHeaderCell({Key? key}) : super(key: key);
+class _HeaderTrailing extends StatelessWidget {
+  const _HeaderTrailing({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -112,7 +112,7 @@ class CreateColumnButton extends StatelessWidget {
       text: const FlowyText.medium('New column', fontSize: 12),
       hoverColor: theme.hover,
       onTap: () => context.read<ColumnBloc>().add(const ColumnEvent.createColumn()),
-      icon: svg("home/add"),
+      leftIcon: svg("home/add"),
     );
   }
 }

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/header_cell.dart

@@ -1,7 +1,10 @@
 import 'package:app_flowy/workspace/presentation/plugins/grid/src/layout/sizes.dart';
+import 'package:app_flowy/workspace/presentation/widgets/pop_up_window.dart';
+import 'package:flowy_infra/image.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
+import 'package:flowy_infra_ui/widget/dialog/styled_dialogs.dart';
 import 'package:flowy_sdk/protobuf/flowy-grid-data-model/grid.pb.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -14,9 +17,31 @@ class HeaderCell extends StatelessWidget {
   Widget build(BuildContext context) {
     final theme = context.watch<AppTheme>();
     return FlowyButton(
-      text: FlowyText.medium(field.name, fontSize: 12),
+      text: Padding(padding: GridSize.cellContentInsets, child: FlowyText.medium(field.name, fontSize: 12)),
       hoverColor: theme.hover,
-      onTap: () {},
+      onTap: () {
+        FlowyPoppuWindow.show(
+          context,
+          size: Size(300, 100),
+          child: Container(
+            color: Colors.red,
+            child: TextField(
+              decoration: InputDecoration(hintText: 'Please enter a text'),
+              onSubmitted: print,
+            ),
+          ),
+        );
+
+        // StyledDialog(
+        //   child: SingleChildScrollView(
+        //     child: Container(
+        //       color: Colors.red,
+        //       child: TextField(),
+        //     ),
+        //   ),
+        // ).show(context);
+      },
+      rightIcon: svg("editor/details", color: theme.iconColor),
     );
   }
 }

frontend/app_flowy/lib/workspace/presentation/plugins/trash/trash.dart

@@ -146,7 +146,7 @@ class _TrashPageState extends State<TrashPage> {
             size: const Size(102, 30),
             child: FlowyButton(
               text: FlowyText.medium(LocaleKeys.trash_restoreAll.tr(), fontSize: 12),
-              icon: svg('editor/restore', color: theme.iconColor),
+              leftIcon: svg('editor/restore', color: theme.iconColor),
               hoverColor: theme.hover,
               onTap: () => context.read<TrashBloc>().add(const TrashEvent.restoreAll()),
             ),
@@ -156,7 +156,7 @@ class _TrashPageState extends State<TrashPage> {
             size: const Size(102, 30),
             child: FlowyButton(
               text: FlowyText.medium(LocaleKeys.trash_deleteAll.tr(), fontSize: 12),
-              icon: svg('editor/delete', color: theme.iconColor),
+              leftIcon: svg('editor/delete', color: theme.iconColor),
               hoverColor: theme.hover,
               onTap: () => context.read<TrashBloc>().add(const TrashEvent.deleteAll()),
             ),

frontend/app_flowy/lib/workspace/presentation/widgets/float_bubble/question_bubble.dart

@@ -112,7 +112,6 @@ class QuestionBubble extends StatelessWidget {
             });
           });
           actionList.show(
-            context,
             context,
             anchorDirection: AnchorDirection.topWithRightAligned,
             anchorOffset: const Offset(0, -10),

frontend/app_flowy/lib/workspace/presentation/widgets/pop_up_action.dart

@@ -24,8 +24,8 @@ abstract class ActionList<T extends ActionItem> {
   FlowyOverlayDelegate? get delegate;
 
   void show(
-    BuildContext buildContext,
-    BuildContext anchorContext, {
+    BuildContext buildContext, {
+    BuildContext? anchorContext,
     AnchorDirection anchorDirection = AnchorDirection.bottomRight,
     Offset? anchorOffset,
   }) {
@@ -47,7 +47,7 @@ abstract class ActionList<T extends ActionItem> {
       identifier: identifier,
       itemCount: widgets.length,
       itemBuilder: (context, index) => widgets[index],
-      anchorContext: anchorContext,
+      anchorContext: anchorContext ?? buildContext,
       anchorDirection: anchorDirection,
       width: maxWidth,
       height: widgets.length * (itemHeight + ActionListSizes.padding * 2),

frontend/app_flowy/lib/workspace/presentation/widgets/pop_up_window.dart

@@ -21,6 +21,7 @@ class FlowyPoppuWindow extends StatelessWidget {
     required Size size,
   }) async {
     final window = await getWindowInfo();
+
     FlowyOverlay.of(context).insertWithRect(
       widget: SizedBox.fromSize(
         size: size,

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

@@ -279,8 +279,11 @@ class FlowyOverlayState extends State<FlowyOverlay> {
       children.add(child);
     }
 
-    return Stack(
-      children: children..addAll(overlays),
+    return MaterialApp(
+      debugShowCheckedModeBanner: false,
+      home: Stack(
+        children: children..addAll(overlays),
+      ),
     );
   }
 

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

@@ -103,38 +103,4 @@ class ListOverlay extends StatelessWidget {
       style: style,
     );
   }
-
-  static void showWithRect(
-    BuildContext context, {
-    required BuildContext anchorContext,
-    required String identifier,
-    required IndexedWidgetBuilder itemBuilder,
-    int? itemCount,
-    ScrollController? controller,
-    double maxWidth = double.infinity,
-    double maxHeight = double.infinity,
-    required Offset anchorPosition,
-    required Size anchorSize,
-    AnchorDirection? anchorDirection,
-    FlowyOverlayDelegate? delegate,
-    OverlapBehaviour? overlapBehaviour,
-    FlowyOverlayStyle? style,
-  }) {
-    FlowyOverlay.of(context).insertWithRect(
-      widget: ListOverlay(
-        itemBuilder: itemBuilder,
-        itemCount: itemCount,
-        controller: controller,
-        width: maxWidth,
-        height: maxHeight,
-      ),
-      identifier: identifier,
-      anchorPosition: anchorPosition,
-      anchorSize: anchorSize,
-      anchorDirection: anchorDirection,
-      delegate: delegate,
-      overlapBehaviour: overlapBehaviour,
-      style: style,
-    );
-  }
 }

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

@@ -8,14 +8,16 @@ class FlowyButton extends StatelessWidget {
   final Widget text;
   final VoidCallback? onTap;
   final EdgeInsets padding;
-  final Widget? icon;
+  final Widget? leftIcon;
+  final Widget? rightIcon;
   final Color hoverColor;
   const FlowyButton({
     Key? key,
     required this.text,
     this.onTap,
     this.padding = const EdgeInsets.symmetric(horizontal: 3, vertical: 2),
-    this.icon,
+    this.leftIcon,
+    this.rightIcon,
     this.hoverColor = Colors.transparent,
   }) : super(key: key);
 
@@ -33,13 +35,19 @@ class FlowyButton extends StatelessWidget {
   Widget _render() {
     List<Widget> children = List.empty(growable: true);
 
-    if (icon != null) {
-      children.add(SizedBox.fromSize(size: const Size.square(16), child: icon!));
+    if (leftIcon != null) {
+      children.add(SizedBox.fromSize(size: const Size.square(16), child: leftIcon!));
       children.add(const HSpace(6));
     }
 
     children.add(Align(child: text));
 
+    if (rightIcon != null) {
+      children.add(const Spacer());
+      children.add(SizedBox.fromSize(size: const Size.square(16), child: rightIcon!));
+      children.add(const HSpace(6));
+    }
+
     return Padding(
       padding: padding,
       child: Row(