fix: overflow of SelectOptionTagCell

Author: appflowy

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

@@ -87,7 +87,7 @@ class SelectOptionTag extends StatelessWidget {
   Widget build(BuildContext context) {
     return ChoiceChip(
       pressElevation: 1,
-      label: FlowyText.medium(name, fontSize: 12),
+      label: FlowyText.medium(name, fontSize: 12, overflow: TextOverflow.ellipsis),
       selectedColor: color,
       backgroundColor: color,
       labelPadding: const EdgeInsets.symmetric(horizontal: 6),
@@ -130,11 +130,18 @@ class SelectOptionTagCell extends StatelessWidget {
           child: InkWell(
             child: Padding(
               padding: const EdgeInsets.symmetric(horizontal: 3),
-              child: Row(children: [
-                SelectOptionTag.fromSelectOption(context: context, option: option),
-                const Spacer(),
-                ...children,
-              ]),
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Flexible(
+                    fit: FlexFit.loose,
+                    flex: 2,
+                    child: SelectOptionTag.fromSelectOption(context: context, option: option),
+                  ),
+                  const Spacer(),
+                  ...children,
+                ],
+              ),
             ),
             onTap: () => onSelected(option),
           ),

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

@@ -225,7 +225,18 @@ class _SelectOptionCell extends StatelessWidget {
       height: GridSize.typeOptionItemHeight,
       child: Row(
         children: [
-          Expanded(child: _body(theme, context)),
+          Flexible(
+            fit: FlexFit.loose,
+            child: SelectOptionTagCell(
+              option: option,
+              onSelected: (option) {
+                context.read<SelectOptionCellEditorBloc>().add(SelectOptionEditorEvent.selectOption(option.id));
+              },
+              children: [
+                if (isSelected) svgWidget("grid/checkmark"),
+              ],
+            ),
+          ),
           FlowyIconButton(
             width: 30,
             onPressed: () => _showEditPannel(context),
@@ -237,18 +248,6 @@ class _SelectOptionCell extends StatelessWidget {
     );
   }
 
-  Widget _body(AppTheme theme, BuildContext context) {
-    return SelectOptionTagCell(
-      option: option,
-      onSelected: (option) {
-        context.read<SelectOptionCellEditorBloc>().add(SelectOptionEditorEvent.selectOption(option.id));
-      },
-      children: [
-        if (isSelected) svgWidget("grid/checkmark"),
-      ],
-    );
-  }
-
   void _showEditPannel(BuildContext context) {
     final pannel = SelectOptionTypeOptionEditor(
       option: option,

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

@@ -67,7 +67,7 @@ class _RowDetailPageState extends State<RowDetailPage> {
         return bloc;
       },
       child: Padding(
-        padding: const EdgeInsets.symmetric(horizontal: 80, vertical: 40),
+        padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 20),
         child: Column(
           children: [
             SizedBox(