From 366e28752cbd66742ac35bea546afc83c52dc918 Mon Sep 17 00:00:00 2001
From: Aslam <aslam.develop912@gmail.com>
Date: Thu, 21 Dec 2023 07:01:37 +0530
Subject: [PATCH] fix: text overflow issue of font family dropdown (#3348)

* fixed text overflow issue of font family dropdown

* added tooltip delay

* code review fixes: unwanted key removed; tooltip added for all fonts;
delay time reduces;

* Update frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/font_family_setting.dart

---------

Co-authored-by: Lucas.Xu <lucas.xu@appflowy.io>
---
 .../font_family_setting.dart                  | 66 ++++++++++---------
 1 file changed, 36 insertions(+), 30 deletions(-)

diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/font_family_setting.dart b/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/font_family_setting.dart
index 1a03e7dc54..0006973d17 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/font_family_setting.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/font_family_setting.dart
@@ -173,37 +173,43 @@ class _FontFamilyDropDownState extends State<FontFamilyDropDown> {
     TextStyle style,
   ) {
     final buttonFontFamily = parseFontFamilyName(style.fontFamily!);
-    return SizedBox(
-      key: UniqueKey(),
-      height: 32,
-      child: FlowyButton(
-        key: Key(buttonFontFamily),
-        onHover: (_) => FocusScope.of(context).unfocus(),
-        text: FlowyText.medium(
-          parseFontFamilyName(style.fontFamily!),
-          fontFamily: style.fontFamily!,
-        ),
-        rightIcon:
-            buttonFontFamily == parseFontFamilyName(widget.currentFontFamily)
-                ? const FlowySvg(
-                    FlowySvgs.check_s,
-                  )
-                : null,
-        onTap: () {
-          if (widget.onFontFamilyChanged != null) {
-            widget.onFontFamilyChanged!(style.fontFamily!);
-          } else {
-            final fontFamily = style.fontFamily!.parseFontFamilyName();
-            if (parseFontFamilyName(widget.currentFontFamily) !=
-                buttonFontFamily) {
-              context.read<AppearanceSettingsCubit>().setFontFamily(fontFamily);
-              context
-                  .read<DocumentAppearanceCubit>()
-                  .syncFontFamily(fontFamily);
+
+    return Tooltip(
+      message: buttonFontFamily,
+      waitDuration: const Duration(milliseconds: 150),
+      child: SizedBox(
+        key: ValueKey(buttonFontFamily),
+        height: 32,
+        child: FlowyButton(
+          onHover: (_) => FocusScope.of(context).unfocus(),
+          text: FlowyText.medium(
+            parseFontFamilyName(style.fontFamily!),
+            fontFamily: style.fontFamily!,
+          ),
+          rightIcon:
+              buttonFontFamily == parseFontFamilyName(widget.currentFontFamily)
+                  ? const FlowySvg(
+                      FlowySvgs.check_s,
+                    )
+                  : null,
+          onTap: () {
+            if (widget.onFontFamilyChanged != null) {
+              widget.onFontFamilyChanged!(style.fontFamily!);
+            } else {
+              final fontFamily = style.fontFamily!.parseFontFamilyName();
+              if (parseFontFamilyName(widget.currentFontFamily) !=
+                  buttonFontFamily) {
+                context
+                    .read<AppearanceSettingsCubit>()
+                    .setFontFamily(fontFamily);
+                context
+                    .read<DocumentAppearanceCubit>()
+                    .syncFontFamily(fontFamily);
+              }
             }
-          }
-          PopoverContainer.of(context).close();
-        },
+            PopoverContainer.of(context).close();
+          },
+        ),
       ),
     );
   }