fix: grid cell abnormal on click behaviour (#1278)

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

@@ -1,4 +1,5 @@
 import 'package:flowy_infra/theme.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
 import 'package:provider/provider.dart';
 import 'package:styled_widget/styled_widget.dart';
@@ -56,7 +57,6 @@ class CellContainer extends StatelessWidget {
             child: Container(
               constraints: BoxConstraints(maxWidth: width, minHeight: 46),
               decoration: _makeBoxDecoration(context, isFocus),
-              padding: GridSize.cellContentInsets,
               child: container,
             ),
           );
@@ -92,8 +92,11 @@ class _GridCellEnterRegion extends StatelessWidget {
       builder: (context, onEnter, _) {
         List<Widget> children = [child];
         if (onEnter) {
-          children.add(CellAccessoryContainer(accessories: accessories)
+          children.add(
-              .positioned(right: 0));
+            CellAccessoryContainer(accessories: accessories).positioned(
+              right: GridSize.cellContentInsets.right,
+            ),
+          );
         }
 
         return MouseRegion(

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

@@ -4,6 +4,7 @@ import 'package:flowy_infra/image.dart';
 import 'package:flowy_infra_ui/style_widget/icon_button.dart';
 import 'package:flutter/widgets.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import '../../layout/sizes.dart';
 import 'cell_builder.dart';
 
 class GridCheckboxCell extends GridCellWidget {
@@ -40,13 +41,16 @@ class _CheckboxCellState extends GridCellState<GridCheckboxCell> {
               : svgWidget('editor/editor_uncheck');
           return Align(
             alignment: Alignment.centerLeft,
-            child: FlowyIconButton(
+            child: Padding(
-              onPressed: () => context
+              padding: GridSize.cellContentInsets,
-                  .read<CheckboxCellBloc>()
+              child: FlowyIconButton(
-                  .add(const CheckboxCellEvent.select()),
+                onPressed: () => context
-              iconPadding: EdgeInsets.zero,
+                    .read<CheckboxCellBloc>()
-              icon: icon,
+                    .add(const CheckboxCellEvent.select()),
-              width: 20,
+                iconPadding: EdgeInsets.zero,
+                icon: icon,
+                width: 20,
+              ),
             ),
           );
         },

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

@@ -6,6 +6,7 @@ import 'package:app_flowy/startup/startup.dart';
 import 'package:app_flowy/plugins/grid/application/prelude.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 
+import '../../../layout/sizes.dart';
 import '../cell_builder.dart';
 import 'date_editor.dart';
 
@@ -75,7 +76,10 @@ class _DateCellState extends GridCellState<GridDateCell> {
                 onTap: () => _popover.show(),
                 child: Align(
                   alignment: alignment,
-                  child: FlowyText.medium(state.dateStr, fontSize: 12),
+                  child: Padding(
+                    padding: GridSize.cellContentInsets,
+                    child: FlowyText.medium(state.dateStr, fontSize: 12),
+                  ),
                 ),
               ),
             ),

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

@@ -4,6 +4,7 @@ import 'package:app_flowy/plugins/grid/application/prelude.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
+import '../../layout/sizes.dart';
 import 'cell_builder.dart';
 
 class GridNumberCell extends GridCellWidget {
@@ -45,18 +46,21 @@ class _NumberCellState extends GridFocusNodeCellState<GridNumberCell> {
                 _controller.text = contentFromState(state),
           ),
         ],
-        child: TextField(
+        child: Padding(
-          controller: _controller,
+          padding: GridSize.cellContentInsets,
-          focusNode: focusNode,
+          child: TextField(
-          onEditingComplete: () => focusNode.unfocus(),
+            controller: _controller,
-          onSubmitted: (_) => focusNode.unfocus(),
+            focusNode: focusNode,
-          maxLines: 1,
+            onEditingComplete: () => focusNode.unfocus(),
-          style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
+            onSubmitted: (_) => focusNode.unfocus(),
-          textInputAction: TextInputAction.done,
+            maxLines: 1,
-          decoration: const InputDecoration(
+            style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
-            contentPadding: EdgeInsets.zero,
+            textInputAction: TextInputAction.done,
-            border: InputBorder.none,
+            decoration: const InputDecoration(
-            isDense: true,
+              contentPadding: EdgeInsets.zero,
+              border: InputBorder.none,
+              isDense: true,
+            ),
           ),
         ),
       ),

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

@@ -11,6 +11,7 @@ import 'package:flowy_sdk/protobuf/flowy-grid/select_type_option.pb.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
+import '../../../layout/sizes.dart';
 import '../cell_builder.dart';
 import 'extension.dart';
 import 'select_option_editor.dart';
@@ -170,7 +171,10 @@ class _SelectOptionWrapState extends State<SelectOptionWrap> {
       alignment: AlignmentDirectional.center,
       fit: StackFit.expand,
       children: [
-        _wrapPopover(child),
+        Padding(
+          padding: GridSize.cellContentInsets,
+          child: _wrapPopover(child),
+        ),
         InkWell(onTap: () => _popover.show()),
       ],
     );

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

@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:app_flowy/startup/startup.dart';
 import 'package:app_flowy/plugins/grid/application/prelude.dart';
+import '../../layout/sizes.dart';
 import 'cell_builder.dart';
 
 class GridTextCellStyle extends GridCellStyle {
@@ -56,18 +57,21 @@ class _GridTextCellState extends GridFocusNodeCellState<GridTextCell> {
             _controller.text = state.content;
           }
         },
-        child: TextField(
+        child: Padding(
-          controller: _controller,
+          padding: GridSize.cellContentInsets,
-          focusNode: focusNode,
+          child: TextField(
-          onChanged: (value) => focusChanged(),
+            controller: _controller,
-          onEditingComplete: () => focusNode.unfocus(),
+            focusNode: focusNode,
-          maxLines: null,
+            onChanged: (value) => focusChanged(),
-          style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
+            onEditingComplete: () => focusNode.unfocus(),
-          decoration: InputDecoration(
+            maxLines: null,
-            contentPadding: EdgeInsets.zero,
+            style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
-            border: InputBorder.none,
+            decoration: InputDecoration(
-            hintText: widget.cellStyle?.placeholder,
+              contentPadding: EdgeInsets.zero,
-            isDense: true,
+              border: InputBorder.none,
+              hintText: widget.cellStyle?.placeholder,
+              isDense: true,
+            ),
           ),
         ),
       ),

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

@@ -12,6 +12,7 @@ import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:app_flowy/plugins/grid/application/prelude.dart';
 import 'package:url_launcher/url_launcher.dart';
+import '../../../layout/sizes.dart';
 import '../cell_accessory.dart';
 import '../cell_builder.dart';
 import 'cell_editor.dart';
@@ -115,14 +116,17 @@ class _GridURLCellState extends GridCellState<GridURLCell> {
       value: _cellBloc,
       child: BlocBuilder<URLCellBloc, URLCellState>(
         builder: (context, state) {
-          final richText = RichText(
+          final richText = Padding(
-            textAlign: TextAlign.left,
+            padding: GridSize.cellContentInsets,
-            text: TextSpan(
+            child: RichText(
-              text: state.content,
+              textAlign: TextAlign.left,
-              style: TextStyle(
+              text: TextSpan(
-                color: theme.main2,
+                text: state.content,
-                fontSize: 14,
+                style: TextStyle(
-                decoration: TextDecoration.underline,
+                  color: theme.main2,
+                  fontSize: 14,
+                  decoration: TextDecoration.underline,
+                ),
               ),
             ),
           );