fix: row banner overlay (#3009)

frontend/appflowy_flutter/integration_test/database_row_page_test.dart

@@ -2,6 +2,7 @@ import 'package:appflowy/plugins/database_view/widgets/row/row_banner.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pbenum.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 
@@ -194,6 +195,48 @@ void main() {
       );
     });
 
+    testWidgets(
+        'check if the title wraps properly when a long text is inserted',
+        (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      // Create a new grid
+      await tester.tapAddButton();
+      await tester.tapCreateGridButton();
+
+      // Hover first row and then open the row page
+      await tester.openFirstRowDetailPage();
+
+      // Wait for the document to be loaded
+      await tester.wait(500);
+
+      // Focus on the editor
+      final textField = find
+          .descendant(
+            of: find.byType(SimpleDialog),
+            matching: find.byType(TextField),
+          )
+          .first;
+
+      // Input a long text
+      await tester.enterText(textField, 'Long text' * 25);
+      await tester.pumpAndSettle();
+
+      // Tap outside to dismiss the field
+      await tester.tapAt(Offset.zero);
+      await tester.pumpAndSettle();
+
+      // Check if there is any overflow in the widget tree
+      expect(tester.takeException(), isNull);
+
+      // Re-open the document
+      await tester.openFirstRowDetailPage();
+
+      // Check again if there is any overflow in the widget tree
+      expect(tester.takeException(), isNull);
+    });
+
     testWidgets('delete row in row detail page', (tester) async {
       await tester.initializeAppFlowy();
       await tester.tapGoButton();

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/row_banner.dart

@@ -40,24 +40,21 @@ class _RowBannerState extends State<RowBanner> {
       child: MouseRegion(
         onEnter: (event) => _isHovering.value = true,
         onExit: (event) => _isHovering.value = false,
-        child: SizedBox(
+        child: Column(
-          height: 80,
+          crossAxisAlignment: CrossAxisAlignment.start,
-          child: Column(
+          children: [
-            crossAxisAlignment: CrossAxisAlignment.start,
+            SizedBox(
-            children: [
+              height: 30,
-              SizedBox(
+              child: _BannerAction(
-                height: 30,
+                isHovering: _isHovering,
-                child: _BannerAction(
-                  isHovering: _isHovering,
-                  popoverController: popoverController,
-                ),
-              ),
-              _BannerTitle(
-                cellBuilder: widget.cellBuilder,
                 popoverController: popoverController,
               ),
-            ],
+            ),
-          ),
+            _BannerTitle(
+              cellBuilder: widget.cellBuilder,
+              popoverController: popoverController,
+            ),
+          ],
         ),
       ),
     );