feat(app): fix overflowing text

hpi-dhc · Mar 22, 2024 · 6916ed8 · 6916ed8
1 parent 9d8ced8
commit 6916ed8
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 24 deletions.
diff --git a/app/lib/common/widgets/drug_search/filter_menu.dart b/app/lib/common/widgets/drug_search/filter_menu.dart
@@ -132,25 +132,25 @@ class FilterMenu extends HookWidget {
   }) {
     final numberTextColor = darkenColor(PharMeTheme.onSurfaceText, -0.2);
     final disabledTextColor = darkenColor(numberTextColor, -0.2);
-    return Row(
-      mainAxisSize: MainAxisSize.min,
-      crossAxisAlignment: CrossAxisAlignment.center,
-      children: [
-        Text(
-          text,
+    return Text.rich(
+      TextSpan(children: [
+        TextSpan(
+          text: text,
           style: PharMeTheme.textTheme.bodyMedium!.copyWith(
             color: enabled
               ? PharMeTheme.textTheme.bodyMedium!.color
               : disabledTextColor,
           ),
         ),
-        Text(
-          ' (${_getFilteredNumber(itemFilter: itemFilter, drugs: drugs)})',
+        TextSpan(
+          text: ' (${
+            _getFilteredNumber(itemFilter: itemFilter, drugs: drugs)
+          })',
           style: PharMeTheme.textTheme.labelMedium!.copyWith(
             color: enabled ? numberTextColor : disabledTextColor,
           ),
         ),
-      ],
+      ]),
     );
   }
 

diff --git a/app/lib/drug/widgets/annotation_cards/drug.dart b/app/lib/drug/widgets/annotation_cards/drug.dart
@@ -101,25 +101,18 @@ class DrugAnnotationCards extends StatelessWidget {
                 DropdownMenuItem<bool>(
                   key: Key('drug-status-selection-${drug.name}-active'),
                   value: true,
-                  child: Row(
-                    children: [
-                      Icon(
-                        Icons.check_circle_outline,
-                        color: PharMeTheme.iconColor,
-                      ),
-                      SizedBox(width: PharMeTheme.smallSpace),
-                      Text(context.l10n.drugs_page_active),
-                    ]),
+                  child: _buildStatusMenuItem(
+                    context.l10n.drugs_page_active,
+                    Icons.check_circle_outline,
+                  ),
                 ),
                 DropdownMenuItem<bool>(
                   key: Key('drug-status-selection-${drug.name}-inactive'),
                   value: false,
-                  child: Row(
-                    children: [
-                      Icon(Icons.cancel_outlined, color: PharMeTheme.iconColor),
-                      SizedBox(width: PharMeTheme.smallSpace),
-                      Text(context.l10n.drugs_page_inactive),
-                    ]),
+                  child: _buildStatusMenuItem(
+                    context.l10n.drugs_page_inactive,
+                    Icons.cancel_outlined,
+                  ),
                 ),
               ],
             ),
@@ -128,4 +121,21 @@ class DrugAnnotationCards extends StatelessWidget {
       ],
     );
   }
+
+  Widget _buildStatusMenuItem(String text, IconData iconData) => Text.rich(
+    TextSpan(
+      children: [
+        WidgetSpan(
+          child: Icon(
+            iconData,
+            color: PharMeTheme.iconColor,
+          ),
+        ),
+        TextSpan(text: ' $text'),
+      ],
+    ),
+    maxLines: 1,
+    softWrap: false,
+    overflow: TextOverflow.fade,
+  );
 }