fix: mobile grid issues (#4026)

* chore: some mobile grid issues

* fix: grid right padding

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/layout/sizes.dart

@@ -1,3 +1,4 @@
+import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flutter/widgets.dart';
 
 class GridSize {
@@ -6,7 +7,8 @@ class GridSize {
   static double get scrollBarSize => 8 * scale;
   static double get headerHeight => 40 * scale;
   static double get footerHeight => 40 * scale;
-  static double get leadingHeaderPadding => 40 * scale;
+  static double get leadingHeaderPadding =>
+      PlatformExtension.isDesktop ? 40 * scale : 20 * scale;
   static double get trailHeaderPadding => 140 * scale;
   static double get headerContainerPadding => 0 * scale;
   static double get cellHPadding => 10 * scale;

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/mobile_grid_page.dart

@@ -158,7 +158,7 @@ class _GridPageContentState extends State<GridPageContent> {
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             Padding(
-              padding: const EdgeInsets.only(right: 14),
+              padding: EdgeInsets.only(right: GridSize.leadingHeaderPadding),
               child:
                   _GridHeader(headerScrollController: headerScrollController),
             ),
@@ -266,6 +266,14 @@ class _GridRows extends StatelessWidget {
       },
       itemCount: rowInfos.length,
       itemBuilder: (context, index) => children[index],
+      header: Padding(
+        padding: EdgeInsets.only(left: GridSize.leadingHeaderPadding),
+        child: Container(
+          height: 1,
+          width: contentWidth,
+          color: Theme.of(context).dividerColor,
+        ),
+      ),
       footer: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/footer/grid_footer.dart

@@ -2,7 +2,6 @@ import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/database_view/grid/application/grid_bloc.dart';
 import 'package:appflowy/plugins/database_view/grid/presentation/layout/sizes.dart';
-import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/theme_extension.dart';
 
@@ -12,31 +11,27 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 class GridAddRowButton extends StatelessWidget {
-  const GridAddRowButton({Key? key}) : super(key: key);
+  const GridAddRowButton({super.key});
 
   @override
   Widget build(BuildContext context) {
-    final color =
-        PlatformExtension.isMobile ? null : Theme.of(context).hintColor;
     return FlowyButton(
       text: FlowyText.medium(
         LocaleKeys.grid_row_newRow.tr(),
-        color: color,
+        color: Theme.of(context).hintColor,
       ),
       hoverColor: AFThemeExtension.of(context).lightGreyHover,
       onTap: () => context.read<GridBloc>().add(const GridEvent.createRow()),
       leftIcon: FlowySvg(
         FlowySvgs.add_s,
-        color: color,
+        color: Theme.of(context).hintColor,
       ),
     );
   }
 }
 
 class GridRowBottomBar extends StatelessWidget {
-  const GridRowBottomBar({
-    super.key,
-  });
+  const GridRowBottomBar({super.key});
 
   @override
   Widget build(BuildContext context) {

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/grid_header.dart

@@ -107,30 +107,32 @@ class _GridHeaderState extends State<_GridHeader> {
                   : MobileFieldButton(
                       key: _getKeyById(fieldInfo.id),
                       viewId: widget.viewId,
-                      field: fieldInfo,
+                      fieldController: widget.fieldController,
+                      fieldInfo: fieldInfo,
                     ),
             )
             .toList();
 
-        return ColoredBox(
-          color: Theme.of(context).colorScheme.surface,
-          child: RepaintBoundary(
-            child: ReorderableRow(
-              crossAxisAlignment: CrossAxisAlignment.center,
-              scrollController: ScrollController(),
-              header: const _CellLeading(),
-              needsLongPressDraggable: PlatformExtension.isMobile,
-              footer: _CellTrailing(viewId: widget.viewId),
-              onReorder: (int oldIndex, int newIndex) {
-                _onReorder(
-                  cells,
-                  oldIndex,
-                  context,
-                  newIndex,
-                );
-              },
-              children: cells,
+        return RepaintBoundary(
+          child: ReorderableRow(
+            scrollController: ScrollController(),
+            buildDraggableFeedback: (context, constraints, child) => Material(
+              color: Colors.transparent,
+              child: child,
             ),
+            draggingWidgetOpacity: 0,
+            header: const _CellLeading(),
+            needsLongPressDraggable: PlatformExtension.isMobile,
+            footer: _CellTrailing(viewId: widget.viewId),
+            onReorder: (int oldIndex, int newIndex) {
+              _onReorder(
+                cells,
+                oldIndex,
+                context,
+                newIndex,
+              );
+            },
+            children: cells,
           ),
         );
       },
@@ -144,7 +146,9 @@ class _GridHeaderState extends State<_GridHeader> {
     int newIndex,
   ) {
     if (cells.length > oldIndex) {
-      final field = (cells[oldIndex] as GridFieldCell).fieldInfo.field;
+      final field = PlatformExtension.isDesktop
+          ? (cells[oldIndex] as GridFieldCell).fieldInfo.field
+          : (cells[oldIndex] as MobileFieldButton).fieldInfo.field;
       context
           .read<GridHeaderBloc>()
           .add(GridHeaderEvent.moveField(field, oldIndex, newIndex));
@@ -174,9 +178,11 @@ class _CellTrailing extends StatelessWidget {
         BorderSide(color: Theme.of(context).dividerColor, width: 1.0);
     return Container(
       width: GridSize.trailHeaderPadding,
-      decoration: BoxDecoration(
-        border: Border(bottom: borderSide),
-      ),
+      decoration: PlatformExtension.isDesktop
+          ? BoxDecoration(
+              border: Border(bottom: borderSide),
+            )
+          : null,
       padding: GridSize.headerContentInsets,
       child: CreateFieldButton(viewId: viewId),
     );
@@ -217,6 +223,8 @@ class _CreateFieldButtonState extends State<CreateFieldButton> {
         text: FlowyText.medium(
           LocaleKeys.grid_field_newProperty.tr(),
           overflow: TextOverflow.ellipsis,
+          color:
+              PlatformExtension.isDesktop ? null : Theme.of(context).hintColor,
         ),
         hoverColor: AFThemeExtension.of(context).greyHover,
         onTap: () async {
@@ -231,7 +239,11 @@ class _CreateFieldButtonState extends State<CreateFieldButton> {
             (r) => Log.error("Failed to create field type option: $r"),
           );
         },
-        leftIcon: const FlowySvg(FlowySvgs.add_s),
+        leftIcon: FlowySvg(
+          FlowySvgs.add_s,
+          color:
+              PlatformExtension.isDesktop ? null : Theme.of(context).hintColor,
+        ),
       ),
       popupBuilder: (BuildContext popoverContext) {
         return FieldEditor(

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/mobile_field_cell.dart

@@ -3,26 +3,25 @@ import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet_database_field_editor.dart';
 import 'package:appflowy/mobile/presentation/widgets/flowy_paginated_bottom_sheet.dart';
 import 'package:appflowy/plugins/database_view/application/field/field_info.dart';
-import 'package:appflowy/plugins/database_view/grid/application/grid_bloc.dart';
 import 'package:easy_localization/easy_localization.dart';
-
-import 'package:flowy_infra/theme_extension.dart';
+import 'package:appflowy/plugins/database_view/application/field/field_controller.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
 
 import 'field_type_extension.dart';
 
 class MobileFieldButton extends StatelessWidget {
   final String viewId;
-  final FieldInfo field;
+  final FieldController fieldController;
+  final FieldInfo fieldInfo;
   final int? maxLines;
   final BorderRadius? radius;
   final EdgeInsets? margin;
 
   const MobileFieldButton({
     required this.viewId,
-    required this.field,
+    required this.fieldController,
+    required this.fieldInfo,
     this.maxLines = 1,
     this.radius = BorderRadius.zero,
     this.margin,
@@ -31,51 +30,40 @@ class MobileFieldButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final border = BorderSide(
-      color: Theme.of(context).dividerColor,
-      width: 1.0,
-    );
-    final fieldController =
-        context.read<GridBloc>().databaseController.fieldController;
     return Container(
-      width: field.fieldSettings!.width.toDouble(),
+      width: fieldInfo.fieldSettings!.width.toDouble(),
       decoration: BoxDecoration(
-        border: Border(right: border, bottom: border),
+        border: Border(
+          right: BorderSide(
+            color: Theme.of(context).dividerColor,
+            width: 1.0,
+          ),
+        ),
       ),
-      child: TextButton(
-        onLongPress: () {
+      child: FlowyButton(
+        onTap: () {
           showPaginatedBottomSheet(
             context,
             page: SheetPage(
               title: LocaleKeys.grid_field_editProperty.tr(),
               body: MobileDBBottomSheetFieldEditor(
                 viewId: viewId,
-                field: field.field,
+                field: fieldInfo.field,
                 fieldController: fieldController,
               ),
             ),
           );
         },
-        style: TextButton.styleFrom(
-          padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
+        margin: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
+        leftIcon: FlowySvg(
+          fieldInfo.fieldType.icon(),
+          color: Theme.of(context).hintColor,
         ),
-        onPressed: () {},
-        child: Row(
-          children: [
-            FlowySvg(
-              field.fieldType.icon(),
-              color: Theme.of(context).iconTheme.color,
-            ),
-            const HSpace(6),
-            Expanded(
-              child: FlowyText.medium(
-                field.name,
-                maxLines: maxLines,
-                overflow: TextOverflow.ellipsis,
-                color: AFThemeExtension.of(context).textColor,
-              ),
-            ),
-          ],
+        text: FlowyText.medium(
+          fieldInfo.name,
+          maxLines: maxLines,
+          overflow: TextOverflow.ellipsis,
+          color: Theme.of(context).hintColor,
         ),
       ),
     );

frontend/appflowy_flutter/lib/plugins/database_view/tab_bar/tab_bar_view.dart

@@ -1,5 +1,6 @@
 import 'package:appflowy/plugins/database_view/application/database_controller.dart';
 import 'package:appflowy/plugins/database_view/application/tab_bar_bloc.dart';
+import 'package:appflowy/plugins/database_view/grid/presentation/layout/sizes.dart';
 import 'package:appflowy/plugins/database_view/tab_bar/mobile/mobile_tab_bar_header.dart';
 import 'package:appflowy/plugins/database_view/widgets/share_button.dart';
 import 'package:appflowy/plugins/util.dart';
@@ -101,7 +102,7 @@ class _DatabaseTabBarViewState extends State<DatabaseTabBarView> {
 
                     return Padding(
                       padding: EdgeInsets.symmetric(
-                        horizontal: PlatformExtension.isMobile ? 20 : 40,
+                        horizontal: GridSize.leadingHeaderPadding,
                       ),
                       child: PlatformExtension.isMobile
                           ? const MobileTabBarHeader()

frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/scrolling/styled_scroll_bar.dart

@@ -249,8 +249,8 @@ class ScrollbarListStack extends StatelessWidget {
         /// LIST
         /// Wrap with a bit of padding on the right
         child.padding(
-          right: axis == Axis.vertical ? barSize + Insets.sm : 0,
-          bottom: axis == Axis.horizontal ? barSize + Insets.sm : 0,
+          right: axis == Axis.vertical ? barSize + Insets.m : 0,
+          bottom: axis == Axis.horizontal ? barSize + Insets.m : 0,
         ),
 
         /// SCROLLBAR