From 7e9ec32ab6e7fbdf8302d753ccbe9ca34c55193a Mon Sep 17 00:00:00 2001
From: ggurdin <46800240+ggurdin@users.noreply.github.com>
Date: Tue, 30 Dec 2025 13:58:43 -0500
Subject: [PATCH] fix: fix word card overlay in mobile vocab details page
 (#4988)

---
 .../toolbar/word_card/word_zoom_widget.dart   | 108 +++++++++---------
 1 file changed, 57 insertions(+), 51 deletions(-)

diff --git a/lib/pangea/toolbar/word_card/word_zoom_widget.dart b/lib/pangea/toolbar/word_card/word_zoom_widget.dart
index 1841da14b..8ca8036a0 100644
--- a/lib/pangea/toolbar/word_card/word_zoom_widget.dart
+++ b/lib/pangea/toolbar/word_card/word_zoom_widget.dart
@@ -69,60 +69,66 @@ class WordZoomWidget extends StatelessWidget {
                   child: Column(
                     spacing: 12.0,
                     children: [
-                      SizedBox(
-                        height: 40.0,
-                        child: Row(
-                          crossAxisAlignment: CrossAxisAlignment.start,
-                          children: [
-                            onClose != null
-                                ? IconButton(
-                                    color: Theme.of(context).iconTheme.color,
-                                    icon: const Icon(Icons.close),
-                                    onPressed: onClose,
-                                  )
-                                : const SizedBox(
-                                    width: 40.0,
-                                    height: 40.0,
-                                  ),
-                            Flexible(
-                              child: Container(
-                                constraints: const BoxConstraints(
-                                  minHeight: 40.0,
-                                ),
-                                alignment: Alignment.center,
-                                child: Text(
-                                  token.content,
-                                  textAlign: TextAlign.center,
-                                  style: TextStyle(
-                                    fontSize: 28.0,
-                                    fontWeight: FontWeight.w600,
-                                    height: 1.2,
-                                    color: Theme.of(context).brightness ==
-                                            Brightness.light
-                                        ? AppConfig.yellowDark
-                                        : AppConfig.yellowLight,
-                                    overflow: TextOverflow.ellipsis,
+                      LayoutBuilder(
+                        builder: (context, constraints) {
+                          return SizedBox(
+                            height: 40.0,
+                            width: constraints.maxWidth - 24.0,
+                            child: Row(
+                              crossAxisAlignment: CrossAxisAlignment.start,
+                              children: [
+                                onClose != null
+                                    ? IconButton(
+                                        color:
+                                            Theme.of(context).iconTheme.color,
+                                        icon: const Icon(Icons.close),
+                                        onPressed: onClose,
+                                      )
+                                    : const SizedBox(
+                                        width: 40.0,
+                                        height: 40.0,
+                                      ),
+                                Flexible(
+                                  child: Container(
+                                    constraints: const BoxConstraints(
+                                      minHeight: 40.0,
+                                    ),
+                                    alignment: Alignment.center,
+                                    child: Text(
+                                      token.content,
+                                      textAlign: TextAlign.center,
+                                      style: TextStyle(
+                                        fontSize: 28.0,
+                                        fontWeight: FontWeight.w600,
+                                        height: 1.2,
+                                        color: Theme.of(context).brightness ==
+                                                Brightness.light
+                                            ? AppConfig.yellowDark
+                                            : AppConfig.yellowLight,
+                                        overflow: TextOverflow.ellipsis,
+                                      ),
+                                    ),
                                   ),
                                 ),
-                              ),
+                                onFlagTokenInfo != null
+                                    ? TokenFeedbackButton(
+                                        textLanguage: PLanguageStore.byLangCode(
+                                              langCode,
+                                            ) ??
+                                            LanguageModel.unknown,
+                                        constructId: construct,
+                                        text: token.content,
+                                        onFlagTokenInfo: onFlagTokenInfo!,
+                                        messageInfo: event?.content ?? {},
+                                      )
+                                    : const SizedBox(
+                                        width: 40.0,
+                                        height: 40.0,
+                                      ),
+                              ],
                             ),
-                            onFlagTokenInfo != null
-                                ? TokenFeedbackButton(
-                                    textLanguage: PLanguageStore.byLangCode(
-                                          langCode,
-                                        ) ??
-                                        LanguageModel.unknown,
-                                    constructId: construct,
-                                    text: token.content,
-                                    onFlagTokenInfo: onFlagTokenInfo!,
-                                    messageInfo: event?.content ?? {},
-                                  )
-                                : const SizedBox(
-                                    width: 40.0,
-                                    height: 40.0,
-                                  ),
-                          ],
-                        ),
+                          );
+                        },
                       ),
                       Expanded(
                         child: Column(