fix: auto size filter menu (#1552)

Co-authored-by: nathan <[email protected]>

Author: appflowy

frontend/app_flowy/lib/plugins/grid/application/filter/filter_create_bloc.dart

@@ -62,7 +62,7 @@ class GridCreateFilterBloc
     final List<FieldInfo> allFields = List.from(fields);
     final keyword = filterText.toLowerCase();
     allFields.retainWhere((field) {
-      if (field.canCreateFilter) {
+      if (!field.canCreateFilter) {
         return false;
       }
 

frontend/app_flowy/lib/plugins/grid/presentation/widgets/filter/menu.dart

@@ -54,21 +54,26 @@ class GridFilterMenu extends StatelessWidget {
   }
 
   Widget buildFilterItems(String viewId, GridFilterMenuState state) {
-    final List<Widget> children = state.filters
-        .map((filterInfo) => FilterMenuItem(filterInfo: filterInfo))
-        .toList();
+    final List<Widget> children = [];
+    children.addAll(
+      state.filters
+          .map((filterInfo) => FilterMenuItem(filterInfo: filterInfo))
+          .toList(),
+    );
+
+    if (state.creatableFields.isNotEmpty) {
+      children.add(AddFilterButton(viewId: viewId));
+    }
+
     return Row(
       children: [
-        SingleChildScrollView(
-          controller: ScrollController(),
-          scrollDirection: Axis.horizontal,
+        Expanded(
           child: Wrap(
-            spacing: 4,
+            spacing: 6,
+            runSpacing: 4,
             children: children,
           ),
         ),
-        const HSpace(4),
-        if (state.creatableFields.isNotEmpty) AddFilterButton(viewId: viewId),
       ],
     );
   }

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

@@ -24,7 +24,7 @@ class FlowyButton extends StatelessWidget {
     required this.text,
     this.onTap,
     this.onHover,
-    this.margin = const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
+    this.margin = const EdgeInsets.symmetric(horizontal: 10, vertical: 2),
     this.leftIcon,
     this.rightIcon,
     this.hoverColor,
@@ -63,9 +63,9 @@ class FlowyButton extends StatelessWidget {
     children.add(Expanded(child: text));
 
     if (rightIcon != null) {
-      children.add(const HSpace(6));
-      children.add(
-          SizedBox.fromSize(size: const Size.square(16), child: rightIcon!));
+      children.add(const HSpace(10));
+      // No need to define the size of rightIcon. Just use its intrinsic width
+      children.add(rightIcon!);
     }
 
     Widget child = Row(