From ed3ca1fd25a0f34ae7b0847425dd0f28a4685be3 Mon Sep 17 00:00:00 2001
From: ggurdin <46800240+ggurdin@users.noreply.github.com>
Date: Fri, 31 Jan 2025 16:22:25 -0500
Subject: [PATCH] fix: resolve overflow for long lemmas (#1680)

---
 .../emoji_practice_button.dart                | 17 ++++++----
 .../word_text_with_audio_button.dart          | 34 ++++++++-----------
 .../widgets/word_zoom/lemma_widget.dart       |  8 ++++-
 .../widgets/word_zoom/word_zoom_widget.dart   |  2 +-
 4 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/lib/pangea/toolbar/widgets/practice_activity/emoji_practice_button.dart b/lib/pangea/toolbar/widgets/practice_activity/emoji_practice_button.dart
index b6487e473..ee4b67ea1 100644
--- a/lib/pangea/toolbar/widgets/practice_activity/emoji_practice_button.dart
+++ b/lib/pangea/toolbar/widgets/practice_activity/emoji_practice_button.dart
@@ -26,13 +26,16 @@ class EmojiPracticeButton extends StatelessWidget {
   Widget build(BuildContext context) {
     final emoji = token.getEmoji();
     return _shouldDoActivity || emoji != null
-        ? WordZoomActivityButton(
-            icon: emoji == null
-                ? const Icon(Icons.add_reaction_outlined)
-                : Text(emoji),
-            isSelected: isSelected,
-            onPressed: onPressed,
+        ? SizedBox(
+            width: 30,
+            child: WordZoomActivityButton(
+              icon: emoji == null
+                  ? const Icon(Icons.add_reaction_outlined)
+                  : Text(emoji),
+              isSelected: isSelected,
+              onPressed: onPressed,
+            ),
           )
-        : const SizedBox(width: 60);
+        : const SizedBox(width: 30);
   }
 }
diff --git a/lib/pangea/toolbar/widgets/practice_activity/word_text_with_audio_button.dart b/lib/pangea/toolbar/widgets/practice_activity/word_text_with_audio_button.dart
index df892c6a8..be49fb7fc 100644
--- a/lib/pangea/toolbar/widgets/practice_activity/word_text_with_audio_button.dart
+++ b/lib/pangea/toolbar/widgets/practice_activity/word_text_with_audio_button.dart
@@ -66,28 +66,24 @@ class WordAudioButtonState extends State<WordTextWithAudioButton> {
           decoration: BoxDecoration(
             color: Colors.transparent,
             borderRadius: BorderRadius.circular(4),
-            boxShadow: _isHovering
-                ? [
-                    BoxShadow(
-                      color: Theme.of(context).colorScheme.secondary,
-                      blurRadius: 4,
-                      spreadRadius: 1,
-                    ),
-                  ]
-                : [],
           ),
           child: Row(
             mainAxisSize: MainAxisSize.min,
+            mainAxisAlignment: MainAxisAlignment.center,
             children: [
-              Text(
-                widget.text,
-                style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                      color: _isPlaying
-                          ? Theme.of(context).colorScheme.secondary
-                          : null,
-                      fontSize:
-                          Theme.of(context).textTheme.titleLarge?.fontSize,
-                    ),
+              ConstrainedBox(
+                constraints: const BoxConstraints(maxWidth: 180),
+                child: Text(
+                  widget.text,
+                  style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                        color: _isPlaying
+                            ? Theme.of(context).colorScheme.secondary
+                            : null,
+                        fontSize:
+                            Theme.of(context).textTheme.titleLarge?.fontSize,
+                      ),
+                  overflow: TextOverflow.ellipsis,
+                ),
               ),
               const SizedBox(width: 4),
               Icon(
@@ -100,6 +96,4 @@ class WordAudioButtonState extends State<WordTextWithAudioButton> {
       ),
     );
   }
-
-  final bool _isHovering = false;
 }
diff --git a/lib/pangea/toolbar/widgets/word_zoom/lemma_widget.dart b/lib/pangea/toolbar/widgets/word_zoom/lemma_widget.dart
index 95f7d9d7e..7702ee91d 100644
--- a/lib/pangea/toolbar/widgets/word_zoom/lemma_widget.dart
+++ b/lib/pangea/toolbar/widgets/word_zoom/lemma_widget.dart
@@ -19,7 +19,13 @@ class LemmaWidget extends StatelessWidget {
       child: Row(
         crossAxisAlignment: CrossAxisAlignment.center,
         children: [
-          Text(token.lemma.text),
+          ConstrainedBox(
+            constraints: const BoxConstraints(maxWidth: 180),
+            child: Text(
+              token.lemma.text,
+              overflow: TextOverflow.ellipsis,
+            ),
+          ),
           const SizedBox(width: 6),
           SizedBox(
             width: 20,
diff --git a/lib/pangea/toolbar/widgets/word_zoom/word_zoom_widget.dart b/lib/pangea/toolbar/widgets/word_zoom/word_zoom_widget.dart
index 1d08841e6..b74f9d1fc 100644
--- a/lib/pangea/toolbar/widgets/word_zoom/word_zoom_widget.dart
+++ b/lib/pangea/toolbar/widgets/word_zoom/word_zoom_widget.dart
@@ -237,7 +237,7 @@ class WordZoomWidgetState extends State<WordZoomWidget> {
                               ),
                           ],
                         ),
-                        const SizedBox(width: 40),
+                        const SizedBox(width: 30),
                       ],
                     ),
                   ),